带 angular 的打字稿将 bloburl 加载到 img 中不起作用

Question

我在通过 canvas 将 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。

Answer 1

let svgSource = "yourSVGcodehere"; // string of your <svg></svg>
let data = "data:image/svg+xml," + encodeURIComponent(svgSource);
let ctx = my2dcanvas.getContext("2d"); // my2dcanvas is your canvas element
let img = new Image();
img.onload = function() {
        ctx.drawImage(img, 0, 0);
        my2dcanvas.toBlob(function(blob) {
        doSomethingWithBlob(blob) // funciton processing the blob
        // clear canvas context:
        ctx.clearRect(0, 0, 320, 320)
    }, 'image/png');
};
img.src = data;

这是一个产品工作片段。如果有帮助请告诉我

带 angular 的打字稿将 bloburl 加载到 img 中不起作用

typescript w/ angular loading bloburl into img not working

canvas

typescript

angular

angular5