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

Merge pull request #601 from SVG-Edit/issues/316

Browse Source
This commit is contained in:
JFH
2021-07-22 23:45:14 +02:00
committed by GitHub
parent 45991f6880 eaa30389b9
commit 50fe6a12d2
3 changed files with 82 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"canvg": "3.0.7",
"core-js": "3.14.0",
"elix": "15.0.0",
"html2canvas": "^1.1.4",
"i18next": "20.3.1",
"jspdf": "2.3.1",
"pathseg": "1.2.0",
@@ -6500,7 +6501,6 @@
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
"integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
"optional": true,
"engines": {
"node": ">= 0.6.0"
}
@@ -8525,7 +8525,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
"integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
"optional": true,
"dependencies": {
"base64-arraybuffer": "^0.2.0"
}
@@ -12929,10 +12928,9 @@
"dev": true
},
"node_modules/html2canvas": {
"version": "1.0.0-rc.7",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz",
"integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==",
"optional": true,
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.1.4.tgz",
"integrity": "sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==",
"dependencies": {
"css-line-break": "1.1.1"
},
@@ -29950,8 +29948,7 @@
"base64-arraybuffer": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
"integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
"optional": true
"integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
},
"base64-js": {
"version": "1.3.1",
@@ -31635,7 +31632,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
"integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
"optional": true,
"requires": {
"base64-arraybuffer": "^0.2.0"
}
@@ -35184,10 +35180,9 @@
"dev": true
},
"html2canvas": {
"version": "1.0.0-rc.7",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz",
"integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==",
"optional": true,
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.1.4.tgz",
"integrity": "sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==",
"requires": {
"css-line-break": "1.1.1"
}

1
package.json
View File

@@ -97,6 +97,7 @@
"canvg": "3.0.7",
"core-js": "3.14.0",
"elix": "15.0.0",
"html2canvas": "^1.1.4",
"i18next": "20.3.1",
"jspdf": "2.3.1",
"pathseg": "1.2.0",

150
src/svgcanvas/svg-exec.js
View File

@@ -7,6 +7,7 @@
import { jsPDF } from 'jspdf/dist/jspdf.es.min.js';
import 'svg2pdf.js/dist/svg2pdf.es.js';
import html2canvas from 'html2canvas';
import * as hstry from './history.js';
import {
text2xml, cleanupElement, findDefs, getHref, preventClickDefault,
@@ -35,7 +36,6 @@ const {
} = hstry;
let svgContext_ = null;
let $id = null;
let svgCanvas = null;
/**
@@ -46,7 +46,6 @@ let svgCanvas = null;
export const init = function (svgContext) {
svgContext_ = svgContext;
svgCanvas = svgContext_.getCanvas();
$id = svgCanvas.$id;
};
/**
@@ -777,51 +776,47 @@ export const rasterExport = async function (imgType, quality, exportWindowName,
const { issues, issueCodes } = getIssues();
const svg = svgCanvas.svgCanvasToString();
if (!$id('export_canvas')) {
const canvasEx = document.createElement('CANVAS');
canvasEx.id = 'export_canvas';
canvasEx.style.display = 'none';
document.body.appendChild(canvasEx);
}
const c = $id('export_canvas');
c.style.width = svgCanvas.contentW + "px";
c.style.height = svgCanvas.contentH + "px";
const canvg = svgContext_.getcanvg();
const ctx = c.getContext('2d');
const v = canvg.fromString(ctx, svg);
// Render only first frame, ignoring animations.
await v.render();
// Todo: Make async/await utility in place of `toBlob`, so we can remove this constructor
return new Promise((resolve) => {
const dataURLType = type.toLowerCase();
const datauri = quality
? c.toDataURL('image/' + dataURLType, quality)
: c.toDataURL('image/' + dataURLType);
let bloburl;
/**
* Called when `bloburl` is available for export.
* @returns {void}
*/
function done() {
const obj = {
datauri, bloburl, svg, issues, issueCodes, type: imgType,
mimeType, quality, exportWindowName
};
if (!opts.avoidEvent) {
svgContext_.call('exported', obj);
}
resolve(obj);
}
if (c.toBlob) {
c.toBlob((blob) => {
bloburl = createObjectURL(blob);
done();
}, mimeType, quality);
return;
}
bloburl = dataURLToObjectURL(datauri);
done();
});
const iframe = document.createElement('iframe');
iframe.onload = function() {
const iframedoc=iframe.contentDocument||iframe.contentWindow.document;
const ele = svgContext_.getSVGContent();
const cln = ele.cloneNode(true);
iframedoc.body.appendChild(cln);
setTimeout(function(){
// eslint-disable-next-line promise/catch-or-return
html2canvas(iframedoc.body, { useCORS: true, allowTaint: true }).then((canvas) => {
return new Promise((resolve) => {
const dataURLType = type.toLowerCase();
const datauri = quality
? canvas.toDataURL('image/' + dataURLType, quality)
: canvas.toDataURL('image/' + dataURLType);
iframe.parentNode.removeChild(iframe);
let bloburl;
function done() {
const obj = {
datauri, bloburl, svg, issues, issueCodes, type: imgType,
mimeType, quality, exportWindowName
};
if (!opts.avoidEvent) {
svgContext_.call('exported', obj);
}
resolve(obj);
}
if (canvas.toBlob) {
canvas.toBlob((blob) => {
bloburl = createObjectURL(blob);
done();
}, mimeType, quality);
return;
}
bloburl = dataURLToObjectURL(datauri);
done();
});
});
}, 1000);
};
document.body.appendChild(iframe);
};
/**
@@ -863,36 +858,37 @@ export const exportPDF = async (
const res = svgCanvas.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
// Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
const doc = jsPDF({
orientation,
unit,
format: [ res.w, res.h ]
// , compressPdf: true
});
const docTitle = svgCanvas.getDocumentTitle();
doc.setProperties({
title: docTitle /* ,
subject: '',
author: '',
keywords: '',
creator: '' */
});
const { issues, issueCodes } = getIssues();
// const svg = this.svgCanvasToString();
// await doc.addSvgAsImage(svg)
await doc.svg(svgContext_.getSVGContent(), { x: 0, y: 0, width: res.w, height: res.h });
// 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
outputType = outputType || 'dataurlstring';
const obj = { issues, issueCodes, exportWindowName, outputType };
obj.output = doc.output(outputType, outputType === 'save' ? (exportWindowName || 'svg.pdf') : undefined);
svgContext_.call('exportedPDF', obj);
return obj;
const iframe = document.createElement('iframe');
iframe.onload = function() {
const iframedoc=iframe.contentDocument||iframe.contentWindow.document;
const ele = svgContext_.getSVGContent();
const cln = ele.cloneNode(true);
iframedoc.body.appendChild(cln);
setTimeout(function(){
// eslint-disable-next-line promise/catch-or-return
html2canvas(iframedoc.body, { useCORS: true, allowTaint: true }).then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const doc = new jsPDF({
orientation: orientation,
unit: unit,
format: [ res.w, res.h ]
});
const docTitle = svgCanvas.getDocumentTitle();
doc.setProperties({
title: docTitle
});
doc.addImage(imgData, 'PNG', 0, 0, res.w, res.h);
iframe.parentNode.removeChild(iframe);
const { issues, issueCodes } = getIssues();
outputType = outputType || 'dataurlstring';
const obj = { issues, issueCodes, exportWindowName, outputType };
obj.output = doc.output(outputType, outputType === 'save' ? (exportWindowName || 'svg.pdf') : undefined);
svgContext_.call('exportedPDF', obj);
return obj;
});
}, 1000);
};
document.body.appendChild(iframe);
};
/**
* Ensure each element has a unique ID.