0

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

reference for javascript code

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?

Raphael Inyang
  • 173
  • 1
  • 4
  • 13

0 Answers0