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

- Enhancement: Allow callback argument and return promise 

for canvas methods: `rasterExport` and `exportPDF`
master
Brett Zamir 2018-05-30 16:47:20 +08:00
parent a5ad91a370
commit f2b1a1ff0c
9 changed files with 231 additions and 177 deletions
Show Stats 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"
// 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 issues = getIssues();
var issueCodes = getIssues({ codesOnly: true });
var str = this.svgCanvasToString();
buildCanvgCallback(function () {
var type = imgType || 'PNG';
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 });
return new Promise(function (resolve, reject) {
buildCanvgCallback(function () {
var type = imgType || 'PNG';
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);
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;
buildJSPDFCallback(function () {
var res = getResolution();
var orientation = res.w > res.h ? 'landscape' : 'portrait';
var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
var doc = jsPDF({
orientation: orientation,
unit: unit,
format: [res.w, res.h]
// , compressPdf: true
}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
var docTitle = getDocumentTitle();
doc.setProperties({
title: docTitle /* ,
subject: '',
author: '',
keywords: '',
creator: '' */
});
var issues = getIssues();
var issueCodes = getIssues({ codesOnly: true });
var str = that.svgCanvasToString();
doc.addSVG(str, 0, 0);
return new Promise(function (resolve, reject) {
buildJSPDFCallback(function () {
var res = getResolution();
var orientation = res.w > res.h ? 'landscape' : 'portrait';
var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
var doc = jsPDF({
orientation: orientation,
unit: unit,
format: [res.w, res.h]
// , compressPdf: true
}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
var docTitle = getDocumentTitle();
doc.setProperties({
title: docTitle /* ,
subject: '',
author: '',
keywords: '',
creator: '' */
});
var issues = getIssues();
var issueCodes = getIssues({ codesOnly: true });
var str = that.svgCanvasToString();
doc.addSVG(str, 0, 0);
// doc.output('save'); // Works to open in a new
// window; todo: configure this and other export
// options to optionally work in this manner as
// opposed to opening a new tab
var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName };
var method = outputType || 'dataurlstring';
obj[method] = doc.output(method);
call('exportedPDF', obj);
})();
// doc.output('save'); // Works to open in a new
// window; todo: configure this and other export
// options to optionally work in this manner as
// opposed to opening a new tab
var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName };
var method = outputType || 'dataurlstring';
obj[method] = doc.output(method);
if (cb) {
cb(obj);
}
resolve(obj);
call('exportedPDF', obj);
})();
});
};
/**
@ -26641,7 +26658,7 @@ editor.init = function () {
if (done !== 'all') {
var note = uiStrings$1.notification.saveFromBrowser.replace('%s', data.type);
// Check if there's issues
// Check if there are issues
if (issues.length) {
var pre = '\n \u2022 ';
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"
// 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 issues = getIssues();
var issueCodes = getIssues({ codesOnly: true });
var str = this.svgCanvasToString();
buildCanvgCallback(function () {
var type = imgType || 'PNG';
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 });
return new Promise(function (resolve, reject) {
buildCanvgCallback(function () {
var type = imgType || 'PNG';
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);
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;
buildJSPDFCallback(function () {
var res = getResolution();
var orientation = res.w > res.h ? 'landscape' : 'portrait';
var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
var doc = jsPDF({
orientation: orientation,
unit: unit,
format: [res.w, res.h]
// , compressPdf: true
}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
var docTitle = getDocumentTitle();
doc.setProperties({
title: docTitle /* ,
subject: '',
author: '',
keywords: '',
creator: '' */
});
var issues = getIssues();
var issueCodes = getIssues({ codesOnly: true });
var str = that.svgCanvasToString();
doc.addSVG(str, 0, 0);
return new Promise(function (resolve, reject) {
buildJSPDFCallback(function () {
var res = getResolution();
var orientation = res.w > res.h ? 'landscape' : 'portrait';
var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
var doc = jsPDF({
orientation: orientation,
unit: unit,
format: [res.w, res.h]
// , compressPdf: true
}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
var docTitle = getDocumentTitle();
doc.setProperties({
title: docTitle /* ,
subject: '',
author: '',
keywords: '',
creator: '' */
});
var issues = getIssues();
var issueCodes = getIssues({ codesOnly: true });
var str = that.svgCanvasToString();
doc.addSVG(str, 0, 0);
// doc.output('save'); // Works to open in a new
// window; todo: configure this and other export
// options to optionally work in this manner as
// opposed to opening a new tab
var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName };
var method = outputType || 'dataurlstring';
obj[method] = doc.output(method);
call('exportedPDF', obj);
})();
// doc.output('save'); // Works to open in a new
// window; todo: configure this and other export
// options to optionally work in this manner as
// opposed to opening a new tab
var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName };
var method = outputType || 'dataurlstring';
obj[method] = doc.output(method);
if (cb) {
cb(obj);
}
resolve(obj);
call('exportedPDF', obj);
})();
});
};
/**
@ -26647,7 +26664,7 @@
if (done !== 'all') {
var note = uiStrings$1.notification.saveFromBrowser.replace('%s', data.type);
// Check if there's issues
// Check if there are issues
if (issues.length) {
var pre = '\n \u2022 ';
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
[`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.
[`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.
[`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
@ -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
## `exportPDF`
## `getSvgString`
this.getSvgString = function ()

2
editor/svg-editor.js
View File

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