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

- Enhancement: Allow callback argument and return promise

Browse Source 
for canvas methods: `rasterExport` and `exportPDF`
This commit is contained in:
Brett Zamir
2018-05-30 16:47:20 +08:00
parent a5ad91a370
commit f2b1a1ff0c
9 changed files with 231 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
dist/index-es.js vendored
View File

@@ -17688,73 +17688,90 @@ var SvgCanvas = function SvgCanvas(container, config) {
// 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, exportWindowName) { this.rasterExport = function (imgType, quality, exportWindowName, cb) {
var mimeType = 'image/' + imgType.toLowerCase(); var mimeType = 'image/' + imgType.toLowerCase();
var issues = getIssues(); var issues = getIssues();
var issueCodes = getIssues({ codesOnly: true }); var issueCodes = getIssues({ codesOnly: true });
var str = this.svgCanvasToString(); var str = this.svgCanvasToString();
buildCanvgCallback(function () { return new Promise(function (resolve, reject) {
var type = imgType || 'PNG'; buildCanvgCallback(function () {
if (!$$9('#export_canvas').length) { var type = imgType || 'PNG';
$$9('<canvas>', { id: 'export_canvas' }).hide().appendTo('body'); if (!$$9('#export_canvas').length) {
} $$9('<canvas>', { id: 'export_canvas' }).hide().appendTo('body');
var c = $$9('#export_canvas')[0];
c.width = canvas.contentW;
c.height = canvas.contentH;
canvg(c, str, {
renderCallback: function renderCallback() {
var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
if (c.toBlob) {
c.toBlob(function (blob) {
var bloburl = createObjectURL(blob);
call('exported', { datauri: datauri, bloburl: bloburl, svg: str, issues: issues, issueCodes: issueCodes, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName });
}, mimeType, quality);
return;
}
var bloburl = dataURLToObjectURL(datauri);
call('exported', { datauri: datauri, bloburl: bloburl, svg: str, issues: issues, issueCodes: issueCodes, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName });
} }
}); var c = $$9('#export_canvas')[0];
})(); c.width = canvas.contentW;
c.height = canvas.contentH;
canvg(c, str, {
renderCallback: function renderCallback() {
var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
var bloburl = void 0;
function done() {
var obj = { datauri: datauri, bloburl: bloburl, svg: str, issues: issues, issueCodes: issueCodes, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName };
call('exported', obj);
if (cb) {
cb(obj);
}
resolve(obj);
}
if (c.toBlob) {
c.toBlob(function (blob) {
bloburl = createObjectURL(blob);
done();
}, mimeType, quality);
return;
}
bloburl = dataURLToObjectURL(datauri);
done();
}
});
})();
});
}; };
this.exportPDF = function (exportWindowName, outputType) { this.exportPDF = function (exportWindowName, outputType, cb) {
var that = this; var that = this;
buildJSPDFCallback(function () { return new Promise(function (resolve, reject) {
var res = getResolution(); buildJSPDFCallback(function () {
var orientation = res.w > res.h ? 'landscape' : 'portrait'; var res = getResolution();
var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes var orientation = res.w > res.h ? 'landscape' : 'portrait';
var doc = jsPDF({ var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
orientation: orientation, var doc = jsPDF({
unit: unit, orientation: orientation,
format: [res.w, res.h] unit: unit,
// , compressPdf: true format: [res.w, res.h]
}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable) // , compressPdf: true
var docTitle = getDocumentTitle(); }); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
doc.setProperties({ var docTitle = getDocumentTitle();
title: docTitle /* , doc.setProperties({
subject: '', title: docTitle /* ,
author: '', subject: '',
keywords: '', author: '',
creator: '' */ keywords: '',
}); creator: '' */
var issues = getIssues(); });
var issueCodes = getIssues({ codesOnly: true }); var issues = getIssues();
var str = that.svgCanvasToString(); var issueCodes = getIssues({ codesOnly: true });
doc.addSVG(str, 0, 0); var str = that.svgCanvasToString();
doc.addSVG(str, 0, 0);
// doc.output('save'); // Works to open in a new // doc.output('save'); // Works to open in a new
// window; todo: configure this and other export // window; todo: configure this and other export
// options to optionally work in this manner as // options to optionally work in this manner as
// opposed to opening a new tab // opposed to opening a new tab
var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName }; var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName };
var method = outputType || 'dataurlstring'; var method = outputType || 'dataurlstring';
obj[method] = doc.output(method); obj[method] = doc.output(method);
call('exportedPDF', obj); if (cb) {
})(); cb(obj);
}
resolve(obj);
call('exportedPDF', obj);
})();
});
}; };
/** /**
@@ -26641,7 +26658,7 @@ editor.init = function () {
if (done !== 'all') { if (done !== 'all') {
var note = uiStrings$1.notification.saveFromBrowser.replace('%s', data.type); var note = uiStrings$1.notification.saveFromBrowser.replace('%s', data.type);
// Check if there's issues // Check if there are issues
if (issues.length) { if (issues.length) {
var pre = '\n \u2022 '; var pre = '\n \u2022 ';
note += '\n\n' + uiStrings$1.notification.noteTheseIssues + pre + issues.join(pre); note += '\n\n' + uiStrings$1.notification.noteTheseIssues + pre + issues.join(pre);

2
dist/index-es.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index-es.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

133
dist/index-umd.js vendored
View File

@@ -17694,73 +17694,90 @@
// 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, exportWindowName) { this.rasterExport = function (imgType, quality, exportWindowName, cb) {
var mimeType = 'image/' + imgType.toLowerCase(); var mimeType = 'image/' + imgType.toLowerCase();
var issues = getIssues(); var issues = getIssues();
var issueCodes = getIssues({ codesOnly: true }); var issueCodes = getIssues({ codesOnly: true });
var str = this.svgCanvasToString(); var str = this.svgCanvasToString();
buildCanvgCallback(function () { return new Promise(function (resolve, reject) {
var type = imgType || 'PNG'; buildCanvgCallback(function () {
if (!$$9('#export_canvas').length) { var type = imgType || 'PNG';
$$9('<canvas>', { id: 'export_canvas' }).hide().appendTo('body'); if (!$$9('#export_canvas').length) {
} $$9('<canvas>', { id: 'export_canvas' }).hide().appendTo('body');
var c = $$9('#export_canvas')[0];
c.width = canvas.contentW;
c.height = canvas.contentH;
canvg(c, str, {
renderCallback: function renderCallback() {
var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
if (c.toBlob) {
c.toBlob(function (blob) {
var bloburl = createObjectURL(blob);
call('exported', { datauri: datauri, bloburl: bloburl, svg: str, issues: issues, issueCodes: issueCodes, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName });
}, mimeType, quality);
return;
}
var bloburl = dataURLToObjectURL(datauri);
call('exported', { datauri: datauri, bloburl: bloburl, svg: str, issues: issues, issueCodes: issueCodes, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName });
} }
}); var c = $$9('#export_canvas')[0];
})(); c.width = canvas.contentW;
c.height = canvas.contentH;
canvg(c, str, {
renderCallback: function renderCallback() {
var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
var bloburl = void 0;
function done() {
var obj = { datauri: datauri, bloburl: bloburl, svg: str, issues: issues, issueCodes: issueCodes, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName };
call('exported', obj);
if (cb) {
cb(obj);
}
resolve(obj);
}
if (c.toBlob) {
c.toBlob(function (blob) {
bloburl = createObjectURL(blob);
done();
}, mimeType, quality);
return;
}
bloburl = dataURLToObjectURL(datauri);
done();
}
});
})();
});
}; };
this.exportPDF = function (exportWindowName, outputType) { this.exportPDF = function (exportWindowName, outputType, cb) {
var that = this; var that = this;
buildJSPDFCallback(function () { return new Promise(function (resolve, reject) {
var res = getResolution(); buildJSPDFCallback(function () {
var orientation = res.w > res.h ? 'landscape' : 'portrait'; var res = getResolution();
var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes var orientation = res.w > res.h ? 'landscape' : 'portrait';
var doc = jsPDF({ var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
orientation: orientation, var doc = jsPDF({
unit: unit, orientation: orientation,
format: [res.w, res.h] unit: unit,
// , compressPdf: true format: [res.w, res.h]
}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable) // , compressPdf: true
var docTitle = getDocumentTitle(); }); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
doc.setProperties({ var docTitle = getDocumentTitle();
title: docTitle /* , doc.setProperties({
subject: '', title: docTitle /* ,
author: '', subject: '',
keywords: '', author: '',
creator: '' */ keywords: '',
}); creator: '' */
var issues = getIssues(); });
var issueCodes = getIssues({ codesOnly: true }); var issues = getIssues();
var str = that.svgCanvasToString(); var issueCodes = getIssues({ codesOnly: true });
doc.addSVG(str, 0, 0); var str = that.svgCanvasToString();
doc.addSVG(str, 0, 0);
// doc.output('save'); // Works to open in a new // doc.output('save'); // Works to open in a new
// window; todo: configure this and other export // window; todo: configure this and other export
// options to optionally work in this manner as // options to optionally work in this manner as
// opposed to opening a new tab // opposed to opening a new tab
var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName }; var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName };
var method = outputType || 'dataurlstring'; var method = outputType || 'dataurlstring';
obj[method] = doc.output(method); obj[method] = doc.output(method);
call('exportedPDF', obj); if (cb) {
})(); cb(obj);
}
resolve(obj);
call('exportedPDF', obj);
})();
});
}; };
/** /**
@@ -26647,7 +26664,7 @@
if (done !== 'all') { if (done !== 'all') {
var note = uiStrings$1.notification.saveFromBrowser.replace('%s', data.type); var note = uiStrings$1.notification.saveFromBrowser.replace('%s', data.type);
// Check if there's issues // Check if there are issues
if (issues.length) { if (issues.length) {
var pre = '\n \u2022 '; var pre = '\n \u2022 ';
note += '\n\n' + uiStrings$1.notification.noteTheseIssues + pre + issues.join(pre); note += '\n\n' + uiStrings$1.notification.noteTheseIssues + pre + issues.join(pre);

2
dist/index-umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index-umd.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

5
docs/SvgCanvas.md
View File

@@ -153,7 +153,8 @@ Function | Description
[`svgToString`](#svgtostring) | Sub function ran on each SVG element to convert it to a string as desired [`svgToString`](#svgtostring) | Sub function ran on each SVG element to convert it to a string as desired
[`embedImage`](#embedimage) | Converts a given image file to a data URL when possible, then runs a given callback [`embedImage`](#embedimage) | Converts a given image file to a data URL when possible, then runs a given callback
[`save`](#save) | Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler. [`save`](#save) | Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
[`rasterExport`](#rasterexport) | Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found [`rasterExport`](#rasterexport) | Generates a PNG (or JPG, BMP, WEBP) Data URL based on the current image, then calls “exported” with an object including the string and any issues found
[`exportPDF`](#exportPDF) | Generates a PDF based on the current image, then calls "exportedPDF" with an object including the string, the data URL, and any issues found
[`getSvgString`](#getsvgstring) | Returns the current drawing as raw SVG XML text. [`getSvgString`](#getsvgstring) | Returns the current drawing as raw SVG XML text.
[`setSvgString`](#setsvgstring) | This function sets the current drawing as the input SVG XML. [`setSvgString`](#setsvgstring) | This function sets the current drawing as the input SVG XML.
[`importSvgString`](#importsvgstring) | This function imports the input SVG XML into the current layer in the drawing [`importSvgString`](#importsvgstring) | This function imports the input SVG XML into the current layer in the drawing
@@ -1218,6 +1219,8 @@ Nothing
Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
## `exportPDF`
## `getSvgString` ## `getSvgString`
this.getSvgString = function () this.getSvgString = function ()

2
editor/svg-editor.js
View File

@@ -1397,7 +1397,7 @@ editor.init = function () {
if (done !== 'all') { if (done !== 'all') {
let note = uiStrings.notification.saveFromBrowser.replace('%s', data.type); let note = uiStrings.notification.saveFromBrowser.replace('%s', data.type);
// Check if there's issues // Check if there are issues
if (issues.length) { if (issues.length) {
const pre = '\n \u2022 '; const pre = '\n \u2022 ';
note += ('\n\n' + uiStrings.notification.noteTheseIssues + pre + issues.join(pre)); note += ('\n\n' + uiStrings.notification.noteTheseIssues + pre + issues.join(pre));

127
editor/svgcanvas.js
View File

@@ -3210,71 +3210,88 @@ function getIssues ({codesOnly = false} = {}) {
// 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, exportWindowName) { this.rasterExport = function (imgType, quality, exportWindowName, cb) {
const mimeType = 'image/' + imgType.toLowerCase(); const mimeType = 'image/' + imgType.toLowerCase();
const issues = getIssues(); const issues = getIssues();
const issueCodes = getIssues({codesOnly: true}); const issueCodes = getIssues({codesOnly: true});
const str = this.svgCanvasToString(); const str = this.svgCanvasToString();
buildCanvgCallback(function () { return new Promise((resolve, reject) => {
const type = imgType || 'PNG'; buildCanvgCallback(function () {
if (!$('#export_canvas').length) { const type = imgType || 'PNG';
$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body'); if (!$('#export_canvas').length) {
} $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
const c = $('#export_canvas')[0];
c.width = canvas.contentW;
c.height = canvas.contentH;
canvg(c, str, {renderCallback () {
const dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
const datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
if (c.toBlob) {
c.toBlob(function (blob) {
const bloburl = createObjectURL(blob);
call('exported', {datauri, bloburl, svg: str, issues, issueCodes, type: imgType, mimeType, quality, exportWindowName});
}, mimeType, quality);
return;
} }
const bloburl = dataURLToObjectURL(datauri); const c = $('#export_canvas')[0];
call('exported', {datauri, bloburl, svg: str, issues, issueCodes, type: imgType, mimeType, quality, exportWindowName}); c.width = canvas.contentW;
}}); c.height = canvas.contentH;
})();
canvg(c, str, {renderCallback () {
const dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
const datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
let bloburl;
function done () {
const obj = {datauri, bloburl, svg: str, issues, issueCodes, type: imgType, mimeType, quality, exportWindowName};
call('exported', obj);
if (cb) {
cb(obj);
}
resolve(obj);
}
if (c.toBlob) {
c.toBlob(function (blob) {
bloburl = createObjectURL(blob);
done();
}, mimeType, quality);
return;
}
bloburl = dataURLToObjectURL(datauri);
done();
}});
})();
});
}; };
this.exportPDF = function (exportWindowName, outputType) { this.exportPDF = function (exportWindowName, outputType, cb) {
const that = this; const that = this;
buildJSPDFCallback(function () { return new Promise((resolve, reject) => {
const res = getResolution(); buildJSPDFCallback(function () {
const orientation = res.w > res.h ? 'landscape' : 'portrait'; const res = getResolution();
const unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes const orientation = res.w > res.h ? 'landscape' : 'portrait';
const doc = jsPDF({ const unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
orientation, const doc = jsPDF({
unit, orientation,
format: [res.w, res.h] unit,
// , compressPdf: true format: [res.w, res.h]
}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable) // , compressPdf: true
const docTitle = getDocumentTitle(); }); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
doc.setProperties({ const docTitle = getDocumentTitle();
title: docTitle /* , doc.setProperties({
subject: '', title: docTitle /* ,
author: '', subject: '',
keywords: '', author: '',
creator: '' */ keywords: '',
}); creator: '' */
const issues = getIssues(); });
const issueCodes = getIssues({codesOnly: true}); const issues = getIssues();
const str = that.svgCanvasToString(); const issueCodes = getIssues({codesOnly: true});
doc.addSVG(str, 0, 0); const str = that.svgCanvasToString();
doc.addSVG(str, 0, 0);
// doc.output('save'); // Works to open in a new // doc.output('save'); // Works to open in a new
// window; todo: configure this and other export // window; todo: configure this and other export
// options to optionally work in this manner as // options to optionally work in this manner as
// opposed to opening a new tab // opposed to opening a new tab
const obj = {svg: str, issues, issueCodes, exportWindowName}; const obj = {svg: str, issues, issueCodes, exportWindowName};
const method = outputType || 'dataurlstring'; const method = outputType || 'dataurlstring';
obj[method] = doc.output(method); obj[method] = doc.output(method);
call('exportedPDF', obj); if (cb) {
})(); cb(obj);
}
resolve(obj);
call('exportedPDF', obj);
})();
});
}; };
/** /**