Support PNG, JPEG, BMP, WEBP export formats by change of "Export to PNG" menu item into "Export" with its own pull-down dialog (and a HTML5 range type input element for "quality" selection for JPEG or WEBP files), including changes for the server_opensave extension; change locale key from "export_png" to "export_img" and change the corresponding localized strings (currently CS, DE, ES, FR, IT, NL, PT-BR, RO, SK, all reset to English to avoid translation errors); within the setCustomHandlers() API, deprecate "pngsave" in favor of "exportImage" (chosen to avoid just using the simpler but reserved JS keyword "export") including use within the server_opensave extension; a few JSLint-friendly changes

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2602 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/extensions/ext-server_opensave.js

@@ -11,7 +11,7 @@ svgEditor.addExtension("server_opensave", {
 	callback: function() {
 
 		var save_svg_action = 'extensions/filesave.php';
-		var save_png_action = 'extensions/filesave.php';
+		var save_img_action = 'extensions/filesave.php';
 	
 		// Create upload target (hidden iframe)
 		var target = $('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
@@ -32,8 +32,10 @@ svgEditor.addExtension("server_opensave", {
 					.appendTo('body')
 					.submit().remove();
 			},
-			pngsave: function(win, data) {
+			exportImage: function(win, data) {
-				var issues = data.issues;
+				var issues = data.issues,
+                    mimeType = data.mimeType,
+                    quality = data.quality;
 				
 				if(!$('#export_canvas').length) {
 					$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
@@ -43,7 +45,7 @@ svgEditor.addExtension("server_opensave", {
 				c.width = svgCanvas.contentW;
 				c.height = svgCanvas.contentH;
 				canvg(c, data.svg, {renderCallback: function() {
-					var datauri = c.toDataURL('image/png');
+					var datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType);
 					
 					var uiStrings = svgEditor.uiStrings;
 					var note = '';
@@ -63,9 +65,10 @@ svgEditor.addExtension("server_opensave", {
 					
 					var form = $('<form>').attr({
 						method: 'post',
-						action: save_png_action,
+						action: save_img_action,
 						target: 'output_frame'
-					})	.append('<input type="hidden" name="output_png" value="' + datauri + '">')
+					})	.append('<input type="hidden" name="output_img" value="' + datauri + '">')
+                        .append('<input type="hidden" name="mime" value="' + mimeType + '">')
 						.append('<input type="hidden" name="filename" value="' + filename + '">')
 						.appendTo('body')
 						.submit().remove();

editor/extensions/filesave.php

@@ -8,27 +8,35 @@
  * Copyright(c) 2010 Alexis Deveria
  *
  */
+
+$allowedMimeTypesBySuffix = array(
+    'svg' => 'image/svg+xml',
+    'png' => 'image/png',
+    'jpeg' => 'image/jpeg',
+    'bmp' => 'image/bmp',
+    'webp' => 'image/webp'
+);
+
+$mime = !isset($_POST['mime']) || !in_array($_POST['mime'], $allowedMimeTypesBySuffix) ? 'image/svg+xml' : $_POST['mime'];
  
-if(!isset($_POST['output_svg']) && !isset($_POST['output_png'])) {
+if (!isset($_POST['output_svg']) && !isset($_POST['output_img'])) {
 	die('post fail');
 }
 
 $file = '';
 
-$suffix = isset($_POST['output_svg'])?'.svg':'.png';
+$suffix = '.' . array_search($mime, $allowedMimeTypesBySuffix);
 
-if(isset($_POST['filename']) && strlen($_POST['filename']) > 0) {
+if (isset($_POST['filename']) && strlen($_POST['filename']) > 0) {
 	$file = $_POST['filename'] . $suffix;
 } else {
 	$file = 'image' . $suffix;
 }
 
-if($suffix == '.svg') {
+if ($suffix == '.svg') {
-	$mime = 'image/svg+xml';
 	$contents = rawurldecode($_POST['output_svg']);
 } else {
-	$mime = 'image/png';
+	$contents = $_POST['output_img'];
-	$contents = $_POST['output_png'];
 	$pos = (strpos($contents, 'base64,') + 7);
 	$contents = base64_decode(substr($contents, $pos));
 }

editor/locale/lang.af.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "kleinste voorwerp",
 		"new_doc": "Nuwe Beeld",
 		"open_doc": "Open Beeld",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Slaan Beeld",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.ar.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "أصغر كائن",
 		"new_doc": "صورة جديدة",
 		"open_doc": "فتح الصورة",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "حفظ صورة",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.az.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "smallest object",
 		"new_doc": "New Image",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.be.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "маленькі аб'ект",
 		"new_doc": "Новае выява",
 		"open_doc": "Адкрыць выява",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Захаваць малюнак",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.bg.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "най-малката обект",
 		"new_doc": "Ню Имидж",
 		"open_doc": "Отворете изображението",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.ca.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "objecte més petit",
 		"new_doc": "Nova imatge",
 		"open_doc": "Obrir imatge",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Guardar imatge",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.cs.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "nejmenšímu objektu",
 		"new_doc": "Nový dokument",
 		"open_doc": "Otevřít dokument",
-		"export_png": "Exportovat jako PNG",
+		"export_img": "Export",
 		"save_doc": "Uložit dokument",
 		"import_doc": "Importovat SVG",
 		"align_to_page": "Zarovnat element na stránku",

editor/locale/lang.cy.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "lleiaf gwrthrych",
 		"new_doc": "Newydd Delwedd",
 		"open_doc": "Delwedd Agored",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Cadw Delwedd",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.da.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "mindste objekt",
 		"new_doc": "Nyt billede",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Gem billede",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.de.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "kleinstes Objekt",
 		"new_doc": "Neues Bild",
 		"open_doc": "Bild öffnen",
-		"export_png": "Als PNG exportieren",
+		"export_img": "Export",
 		"save_doc": "Bild speichern",
 		"import_doc": "Importiere SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.el.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "μικρότερο αντικείμενο",
 		"new_doc": "Νέα εικόνα",
 		"open_doc": "Άνοιγμα εικόνας",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Αποθήκευση εικόνας",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.en.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "smallest object",
 		"new_doc": "New Image",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.es.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "El objeto más pequeño",
 		"new_doc": "Nueva imagen",
 		"open_doc": "Abrir imagen",
-		"export_png": "Exportar como PNG",
+		"export_img": "Export",
 		"save_doc": "Guardar imagen",
 		"import_doc": "Importar un archivo SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.et.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "väikseim objekt",
 		"new_doc": "Uus pilt",
 		"open_doc": "Pildi avamine",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Salvesta pilt",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.fa.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "‫کوچکترین شئ‬",
 		"new_doc": "‫تصویر جدید ‬",
 		"open_doc": "‫باز کردن تصویر ‬",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "‫ذخیره تصویر ‬",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.fi.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "pienin kohde",
 		"new_doc": "Uusi kuva",
 		"open_doc": "Avaa kuva",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.fr.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "Objet plus petit",
 		"new_doc": "Nouvelle image",
 		"open_doc": "Ouvrir une image",
-		"export_png": "Exporter au format PNG",
+		"export_img": "Export",
 		"save_doc": "Enregistrer l'image",
 		"import_doc": "Importer un objet SVG",
 		"align_to_page": "Aligner l'élément relativement à la Page",

editor/locale/lang.fy.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "Lytste ûnderdiel",
 		"new_doc": "Nije ôfbielding",
 		"open_doc": "Ôfbielding iepenje",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Ôfbielding bewarje",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.ga.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "lú réad",
 		"new_doc": "Íomhá Nua",
 		"open_doc": "Íomhá Oscailte",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Sábháil Íomhá",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.gl.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "menor obxecto",
 		"new_doc": "Nova Imaxe",
 		"open_doc": "Abrir Imaxe",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Gardar Imaxe",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.he.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "הקטן אובייקט",
 		"new_doc": "תמונה חדשה",
 		"open_doc": "פתח תמונה",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "שמור תמונה",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.hi.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "छोटी से छोटी वस्तु",
 		"new_doc": "नई छवि",
 		"open_doc": "छवि खोलें",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "सहेजें छवि",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.hr.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "najmanji objekt",
 		"new_doc": "Nove slike",
 		"open_doc": "Otvori sliku",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Spremanje slike",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.hu.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "legkisebb objektum",
 		"new_doc": "Új kép",
 		"open_doc": "Kép megnyitása",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Kép mentése más",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.hy.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "smallest object",
 		"new_doc": "New Image",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.id.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "objek terkecil",
 		"new_doc": "Gambar Baru",
 		"open_doc": "Membuka Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.is.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "lítill hluti",
 		"new_doc": "New Image",
 		"open_doc": "Opna mynd",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Spara Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.it.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "Oggetto più piccolo",
 		"new_doc": "Nuova immagine",
 		"open_doc": "Apri immagine",
-		"export_png": "Esporta come PNG",
+		"export_img": "Export",
 		"save_doc": "Salva",
 		"import_doc": "Importa SVG",
 		"align_to_page": "Allinea elementi alla pagina",

editor/locale/lang.ja.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "最小のオブジェクト",
 		"new_doc": "新規イメージ",
 		"open_doc": "イメージを開く",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "画像を保存",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.ko.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "작은 개체",
 		"new_doc": "새 이미지",
 		"open_doc": "오픈 이미지",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "이미지 저장",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.lt.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "mažiausias objektą",
 		"new_doc": "New Image",
 		"open_doc": "Atidaryti atvaizdą",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Išsaugoti nuotrauką",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.lv.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "mazākais objekts",
 		"new_doc": "New Image",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.mk.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "најмалата објект",
 		"new_doc": "Нови слики",
 		"open_doc": "Отвори слика",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Зачувај слика",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.ms.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "objek terkecil",
 		"new_doc": "Imej Baru",
 		"open_doc": "Membuka Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.mt.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "iżgħar oġġett",
 		"new_doc": "Image New",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Image Save",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.nl.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "Kleinste object",
 		"new_doc": "Nieuwe afbeelding",
 		"open_doc": "Open afbeelding",
-		"export_png": "Exporteer als PNG",
+		"export_img": "Export",
 		"save_doc": "Afbeelding opslaan",
 		"import_doc": "Importeer SVG",
 		"align_to_page": "Lijn element uit relatief ten opzichte van de pagina",

editor/locale/lang.no.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "minste objekt",
 		"new_doc": "New Image",
 		"open_doc": "Åpne Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Lagre bilde",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.pl.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "Najmniejszy obiekt",
 		"new_doc": "New Image",
 		"open_doc": "Otwórz obraz",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Zapisz obraz",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.pt-BR.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "menor objeto",
 		"new_doc": "Nova imagem",
 		"open_doc": "Abrir imagem",
-		"export_png": "Exportar como PNG",
+		"export_img": "Export",
 		"save_doc": "Salvar imagem",
 		"import_doc": "Importar SVG",
 		"align_to_page": "Alinhar elemento na página",

editor/locale/lang.pt-PT.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "menor objeto",
 		"new_doc": "Nova Imagem",
 		"open_doc": "Abrir Imagem",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Salvar Imagem",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.ro.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "cel mai mic obiect",
 		"new_doc": "Imagine nouă",
 		"open_doc": "Imagine deschisă",
-		"export_png": "Exportare ca şi PNG",
+		"export_img": "Export",
 		"save_doc": "Salvare imagine",
 		"import_doc": "Importare SVG",
 		"align_to_page": "Aliniere la pagină",

editor/locale/lang.ru.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "Самый маленький объект",
 		"new_doc": "Создать изображение",
 		"open_doc": "Открыть изображение",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Сохранить изображение",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.sk.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "najmenšiemu objektu",
 		"new_doc": "Nový obrázok",
 		"open_doc": "Otvoriť obrázok",
-		"export_png": "Exportovať ako PNG",
+		"export_img": "Export",
 		"save_doc": "Uložiť obrázok",
 		"import_doc": "Import SVG",
 		"align_to_page": "Zarovnať element na stránku",

editor/locale/lang.sl.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "najmanjša objekt",
 		"new_doc": "New Image",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Shrani slike",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.sq.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "objektit më të vogël",
 		"new_doc": "New Image",
 		"open_doc": "Image Hapur",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Image Ruaj",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.sr.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "Најмањи објекат",
 		"new_doc": "Нова слика",
 		"open_doc": "Отвори слике",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Сачувај слика",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.sv.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "minsta objektet",
 		"new_doc": "New Image",
 		"open_doc": "Öppna bild",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.sw.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "minsta object",
 		"new_doc": "New Image",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.test.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "smallest object",
 		"new_doc": "New Image",
 		"open_doc": "Open Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.th.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "วัตถุที่เล็กที่สุด",
 		"new_doc": "รูปภาพใหม่",
 		"open_doc": "ภาพเปิด",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "บันทึกรูปภาพ",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.tl.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "pinakamaliit na bagay",
 		"new_doc": "Bagong Imahe",
 		"open_doc": "Buksan ang Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "I-save ang Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.tr.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "küçük nesne",
 		"new_doc": "Yeni Resim",
 		"open_doc": "Aç Resim",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Görüntüyü Kaydet",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.uk.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "маленький об'єкт",
 		"new_doc": "Нове зображення",
 		"open_doc": "Відкрити зображення",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Зберегти малюнок",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.vi.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "nhỏ đối tượng",
 		"new_doc": "Hình mới",
 		"open_doc": "Mở Image",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "Save Image",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.yi.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "סמאָלאַסט קעגן",
 		"new_doc": "ניו בילד",
 		"open_doc": "Open בילד",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "היט בילד",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.zh-CN.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "最小的对象",
 		"new_doc": "新文档",
 		"open_doc": "打开文档",
-		"export_png": "导出为PNG格式",
+		"export_img": "导出",
 		"save_doc": "保存图像",
 		"import_doc": "导入SVG",
 		"align_to_page": "对齐元素到页面",

editor/locale/lang.zh-HK.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "最小的对象",
 		"new_doc": "新形象",
 		"open_doc": "打开图像",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "保存图像",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/lang.zh-TW.js

@@ -84,7 +84,7 @@ svgEditor.readLang({
 		"smallest_object": "最小的物件",
 		"new_doc": "清空圖像",
 		"open_doc": "打開圖像",
-		"export_png": "Export as PNG",
+		"export_img": "Export",
 		"save_doc": "保存圖像",
 		"import_doc": "Import SVG",
 		"align_to_page": "Align Element to Page",

editor/locale/locale.js

@@ -125,7 +125,7 @@ var svgEditor = (function($, Editor) {
 
 			tool_clear: tools.new_doc,
 			tool_docprops: tools.docprops,
-			tool_export: tools.export_png,
+			tool_export: tools.export_img,
 			tool_import: tools.import_doc,
 			tool_imagelib: tools.imagelib,
 			tool_open: tools.open_doc,

editor/svg-editor.html

@@ -152,7 +152,7 @@
 			
 			<li id="tool_export">
 				<div></div>
-				Export as PNG
+				Export
 			</li>
 			
 			<li id="tool_docprops">

editor/svg-editor.js

@@ -190,8 +190,8 @@
 					Editor.showSaveWarning = false;
 					svgCanvas.bind('saved', opts.save);
 				}
-				if (opts.pngsave) {
+				if (opts.exportImage || opts.pngsave) { // Deprecating pngsave
-					svgCanvas.bind('exported', opts.pngsave);
+					svgCanvas.bind('exported', opts.exportImage || opts.pngsave);
 				}
 				customHandlers = opts;
 			});
@@ -533,26 +533,43 @@
 				$('#dialog_container').draggable({cancel: '#dialog_content, #dialog_buttons *', containment: 'window'});
 				var box = $('#dialog_box'),
 					btn_holder = $('#dialog_buttons'),
-					dbox = function(type, msg, callback, defText) {
+					dialog_content = $('#dialog_content'),
-						$('#dialog_content').html('<p>'+msg.replace(/\n/g, '</p><p>')+'</p>')
+					dbox = function(type, msg, callback, defaultVal, opts, changeCb) {
+						var ok, ctrl;
+						dialog_content.html('<p>'+msg.replace(/\n/g, '</p><p>')+'</p>')
 							.toggleClass('prompt', (type == 'prompt'));
 						btn_holder.empty();
 
-						var ok = $('<input type="button" value="' + uiStrings.common.ok + '">').appendTo(btn_holder);
+						ok = $('<input type="button" value="' + uiStrings.common.ok + '">').appendTo(btn_holder);
 
-						if (type != 'alert') {
+						if (type !== 'alert') {
 							$('<input type="button" value="' + uiStrings.common.cancel + '">')
 								.appendTo(btn_holder)
 								.click(function() { box.hide(); callback(false);});
 						}
 
-						if (type == 'prompt') {
+						if (type === 'prompt') {
-							var input = $('<input type="text">').prependTo(btn_holder);
+							ctrl = $('<input type="text">').prependTo(btn_holder);
-							input.val(defText || '');
+							ctrl.val(defaultVal || '');
-							input.bind('keydown', 'return', function() {ok.click();});
+							ctrl.bind('keydown', 'return', function() {ok.click();});
+						}
+						else if (type === 'select') {
+							var div = $('<div style="text-align:center;">');
+							ctrl = $('<select>').appendTo(div);
+							$.each(opts || [], function (opt, val) {
+								ctrl.append($('<option>').html(val));
+							});
+							dialog_content.append(div);
+							if (defaultVal) {
+								ctrl.val(defaultVal);
+							}
+                            if (changeCb) {
+                                ctrl.bind('change', 'return', changeCb);
+                            }
+							ctrl.bind('keydown', 'return', function() {ok.click();});
 						}
 
-						if (type == 'process') {
+						if (type === 'process') {
 							ok.hide();
 						}
 
@@ -560,17 +577,18 @@
 
 						ok.click(function() {
 							box.hide();
-							var resp = (type == 'prompt') ? input.val() : true;
+							var resp = (type === 'prompt' || type === 'select') ? ctrl.val() : true;
 							if (callback) callback(resp);
 						}).focus();
 
-						if (type == 'prompt') input.focus();
+						if (type === 'prompt' || type === 'select') ctrl.focus();
 					};
 
 				$.alert = function(msg, cb) { dbox('alert', msg, cb);};
 				$.confirm = function(msg, cb) {	dbox('confirm', msg, cb);};
 				$.process_cancel = function(msg, cb) { dbox('process', msg, cb);};
 				$.prompt = function(msg, txt, cb) { dbox('prompt', msg, cb, txt);};
+				$.select = function(msg, opts, cb, changeCb, txt) { dbox('select', msg, cb, txt, opts, changeCb);};
 			}());
 
 			var setSelectMode = function() {
@@ -656,7 +674,9 @@
 			};
 
 			var exportHandler = function(window, data) {
-				var issues = data.issues;
+				var issues = data.issues,
+					type = data.type || 'PNG',
+                    dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
 
 				if (!$('#export_canvas').length) {
 					$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
@@ -666,11 +686,11 @@
 				c.width = svgCanvas.contentW;
 				c.height = svgCanvas.contentH;
 				canvg(c, data.svg, {renderCallback: function() {
-					var datauri = c.toDataURL('image/png');
+                    var datauri = data.quality ? c.toDataURL('image/' + dataURLType, data.quality) : c.toDataURL('image/' + dataURLType);
 					exportWindow.location.href = datauri;
 					var done = $.pref('export_notice_done');
 					if (done !== 'all') {
-						var note = uiStrings.notification.saveFromBrowser.replace('%s', 'PNG');
+						var note = uiStrings.notification.saveFromBrowser.replace('%s', type);
 
 						// Check if there's issues
 						if (issues.length) {
@@ -2528,21 +2548,39 @@
 			};
 
 			var clickExport = function() {
-				// Open placeholder window (prevents popup)
+				$.select('Select an image type for export: ', [
-				if (!customHandlers.pngsave) {
+                    // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
-					var str = uiStrings.notification.loadingImage;
+                    // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
-					exportWindow = window.open('data:text/html;charset=utf-8,<title>' + str + '<\/title><h1>' + str + '<\/h1>');
+                    'PNG',
-				}
+                    'JPEG', 'BMP', 'WEBP'
-
+                ], function (imgType) { // todo: replace hard-coded msg with uiStrings.notification.
-				if (window.canvg) {
+					if (!imgType) {
-					svgCanvas.rasterExport();
+						return;
-				} else {
+					}
-					$.getScript('canvg/rgbcolor.js', function() {
+					// Open placeholder window (prevents popup)
-						$.getScript('canvg/canvg.js', function() {
+					if (!customHandlers.exportImage && !customHandlers.pngsave) {
-							svgCanvas.rasterExport();
+						var str = uiStrings.notification.loadingImage;
+						exportWindow = window.open('data:text/html;charset=utf-8,<title>' + str + '<\/title><h1>' + str + '<\/h1>');
+					}
+                    var quality = parseInt($('#image-slider').val(), 10)/100;
+					if (window.canvg) {
+						svgCanvas.rasterExport(imgType, quality);
+					} else {
+						$.getScript('canvg/rgbcolor.js', function() {
+							$.getScript('canvg/canvg.js', function() {
+								svgCanvas.rasterExport(imgType, quality);
+							});
 						});
-					});
+					}
-				}
+				}, function () {
+                    var sel = $(this);
+                    if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
+                        $('<div><label>Quality: <input id="image-slider" type="range" min="1" max="100" value="92" /></label></div>').appendTo(sel.parent()); // Todo: i18n-ize label
+                    }
+                    else {
+                        $('#image-slider').parent().remove();
+                    }
+                });
 			};
 
 			// by default, svgCanvas.open() is a no-op.

editor/svgcanvas.js

@@ -4294,10 +4294,12 @@ this.save = function(opts) {
 };
 
 // Function: rasterExport
-// Generates a PNG Data URL based on the current image, then calls "exported" 
+// Generates a Data URL based on the current image, then calls "exported" 
-// with an object including the string and any issues found
+// with an object including the string, image information, and any issues found
-this.rasterExport = function() {
+this.rasterExport = function(imgType, quality) {
-	// remove the selected outline before serializing
+    var mimeType = 'image/' + imgType.toLowerCase();
+
+    // remove the selected outline before serializing
 	clearSelection();
 	
 	// Check for known CanVG issues 
@@ -4323,7 +4325,7 @@ this.rasterExport = function() {
 	});
 
 	var str = this.svgCanvasToString();
-	call("exported", {svg: str, issues: issues});
+	call("exported", {svg: str, issues: issues, type: imgType, mimeType: mimeType, quality: quality});
 };
 
 // Function: getSvgString