i am trying to convert an svg component to canvas, then download as .png
HTML
<canvas id="canvas" ref={commentCanvas} style={{ display: 'flex' }} />
<a id="link" ref={downloadLink}></a>
<button onClick={addNewComment}>download</button>
Javascript
const commentCanvas = createRef(null);
const downloadLink = createRef(null);
function commentSnip() {
const context = commentCanvas.current.getContext('2d');
var data =
'<svg crossorigin="anonymous" xmlns="http://www.w3.org/2000/svg" width="auto" height="auto">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" >' +
'<b> name' +
'</b> ' +
'<p> age' +
'</p> ' +
'<p style="color:white; text-shadow:0 0 2px blue;"> description' +
'</p>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
var url = DOMURL.createObjectURL(svg);
img.crossOrigin = 'anonymous';
img.onload = function () {
context.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
console.log(img);
downloadLink.current.href = commentCanvas.current
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
downloadLink.current.download = postTitle + item.name + '.png';
downloadLink.current.click();
};
img.src = url;
}
Error
SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
please, is there any workaround for this?