typescript w/eckig loding bloburl img funktioniert nicht

Question

Ich habe Probleme beim Konvertieren eines Svg Blob in ein Png über Leinwand.

Hier mein Code:

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); 

Dies war zuvor mit einfachen Javascript (auch einige Jquery).

Die Konsole wird für img.complete false ausgegeben und currentSrc ist leer.

In der Registerkarte Netzwerk kann ich sehen, dass die lokale Svg URL abgerufen wird.

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;

Dies ist ein prod Arbeits Schnipsel. Lassen Sie mich wissen, wenn hilft