typescript w/angle loding bloburlをimgに変換しない

Question

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;

これがPROD作業スニペットです。役に立ったら教えてください