我在通过画布将 svg blob 转换为 png 时遇到问题。
这是我的代码:
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const data = (new XMLSerializer()).serializeToString(svg);
const svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
console.log(svgBlob, canvas);
const img = new Image();
const url = URL.createObjectURL(svgBlob);
img.onload = (() => function () {
console.log('inside onload');
ctx.canvas.width = size;
ctx.canvas.height = size;
ctx.drawImage(img, 0, 0);
URL.revokeObjectURL(url);
const imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
DownloadModalComponent.triggerDownload(imgURI);
});
img.src = url;
console.log(img.complete, img.currentSrc);
这以前使用纯javascript(以及一些jquery)。
控制台输出 img.complete false 并且 currentSrc 为空。
在网络选项卡中,我可以看到获取了本地 svg url。