zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support external (embedded) export invocation; utilize export in embedded demo 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2822 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Brett Zamir 2014-04-09 06:53:08 +00:00
parent 20361c88d1
commit 936d7d3aa4
3 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
editor/embedapi.html
View File

@ -39,9 +39,19 @@
svgCanvas.getSvgString()(handleSvgData); svgCanvas.getSvgString()(handleSvgData);
} }
function exportSvg() {
var str = document.getElementById('svgedit').contentWindow.svgEditor.uiStrings.notification.loadingImage;
var exportWindow = window.open(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
'svg-edit-exportWindow'
);
svgCanvas.rasterExport('JPEG', null, exportWindow.name);
}
// Add event handlers // Add event handlers
$('#load').click(loadSvg); $('#load').click(loadSvg);
$('#save').click(saveSvg); $('#save').click(saveSvg);
$('#export').click(exportSvg);
$('body').append( $('body').append(
$('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' + $('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' +
window.location.href.replace(/\?(.*)$/, '&$1') + // Append arguments to this file onto the iframe window.location.href.replace(/\?(.*)$/, '&$1') + // Append arguments to this file onto the iframe
@ -54,6 +64,7 @@
<body> <body>
<button id="load">Load example</button> <button id="load">Load example</button>
<button id="save">Save data</button> <button id="save">Save data</button>
<button id="export">Export data</button>
<br/> <br/>
</body> </body>
</html> </html>

33
editor/svg-editor.js
View File

@ -202,6 +202,20 @@ TODOS
} }
} }
function checkCanvg (callCanvg) {
return function (win, data) {
if (window.canvg) {
callCanvg(win, data);
} else { // Might not be set up yet
$.getScript('canvg/rgbcolor.js', function() {
$.getScript('canvg/canvg.js', function() {
callCanvg(win, data);
});
});
}
};
}
/** /**
* EXPORTS * EXPORTS
*/ */
@ -406,7 +420,7 @@ TODOS
svgCanvas.bind('saved', opts.save); svgCanvas.bind('saved', opts.save);
} }
if (opts.exportImage) { if (opts.exportImage) {
svgCanvas.bind('exported', opts.exportImage); svgCanvas.bind('exported', checkCanvg(opts.exportImage));
} }
customHandlers = opts; customHandlers = opts;
}); });
@ -1099,6 +1113,7 @@ TODOS
type = data.type || 'PNG', type = data.type || 'PNG',
dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase(); dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
exportWindow = window.open('', data.exportWindowName); // A hack to get the window via JSON-able name without opening a new one
if (!$('#export_canvas').length) { if (!$('#export_canvas').length) {
$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body'); $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
} }
@ -1122,6 +1137,7 @@ TODOS
} }
c.width = svgCanvas.contentW; c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH; c.height = svgCanvas.contentH;
canvg(c, data.svg, {renderCallback: function() { canvg(c, data.svg, {renderCallback: function() {
var datauri = data.quality ? c.toDataURL('image/' + dataURLType, data.quality) : c.toDataURL('image/' + dataURLType); var datauri = data.quality ? c.toDataURL('image/' + dataURLType, data.quality) : c.toDataURL('image/' + dataURLType);
exportWindow.location.href = datauri; exportWindow.location.href = datauri;
@ -2880,7 +2896,7 @@ TODOS
svgCanvas.bind('transition', elementTransition); svgCanvas.bind('transition', elementTransition);
svgCanvas.bind('changed', elementChanged); svgCanvas.bind('changed', elementChanged);
svgCanvas.bind('saved', saveHandler); svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler); svgCanvas.bind('exported', checkCanvg(exportHandler));
svgCanvas.bind('zoomed', zoomChanged); svgCanvas.bind('zoomed', zoomChanged);
svgCanvas.bind('contextset', contextChanged); svgCanvas.bind('contextset', contextChanged);
svgCanvas.bind('extension_added', extAdded); svgCanvas.bind('extension_added', extAdded);
@ -3631,19 +3647,12 @@ TODOS
if (!customHandlers.exportImage) { if (!customHandlers.exportImage) {
var str = uiStrings.notification.loadingImage; var str = uiStrings.notification.loadingImage;
exportWindow = window.open( exportWindow = window.open(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>') 'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
'svg-edit-exportWindow'
); );
} }
var quality = parseInt($('#image-slider').val(), 10)/100; var quality = parseInt($('#image-slider').val(), 10)/100;
if (window.canvg) { svgCanvas.rasterExport(imgType, quality, (exportWindow && exportWindow.name));
svgCanvas.rasterExport(imgType, quality);
} else {
$.getScript('canvg/rgbcolor.js', function() {
$.getScript('canvg/canvg.js', function() {
svgCanvas.rasterExport(imgType, quality);
});
});
}
}, function () { }, function () {
var sel = $(this); var sel = $(this);
if (sel.val() === 'JPEG' || sel.val() === 'WEBP') { if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {

4
editor/svgcanvas.js
View File

@ -4332,7 +4332,7 @@ this.save = function(opts) {
// Function: rasterExport // Function: rasterExport
// Generates a 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, image information, and any issues found // with an object including the string, image information, and any issues found
this.rasterExport = function(imgType, quality) { this.rasterExport = function(imgType, quality, exportWindowName) {
var mimeType = 'image/' + imgType.toLowerCase(); var mimeType = 'image/' + imgType.toLowerCase();
// remove the selected outline before serializing // remove the selected outline before serializing
@ -4361,7 +4361,7 @@ this.rasterExport = function(imgType, quality) {
}); });
var str = this.svgCanvasToString(); var str = this.svgCanvasToString();
call('exported', {svg: str, issues: issues, type: imgType, mimeType: mimeType, quality: quality}); call('exported', {svg: str, issues: issues, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName});
}; };
// Function: getSvgString // Function: getSvgString