Скачать холст как изображение не работает в Firefox и Microsoft Edge

Question

Я хочу скачать canvas как изображение, но не работать в Firefox и Microsoft Edge, но работать с Chrome

Это мой код:

    DownloadImage = (i) => {
        var _this = this;

        this.modeler.saveSVG(function (err, svg) {
            if (err) console.log(err)
            _this.setState({ datasvg: svg }, function () {
                const canvas = _this.refs.canvasforimage;  
                const options = {
                    log: false,
                    ignoreMouse: true,

                };

                canvg(canvas, this.state.datasvg, options);

                const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                const element = document.createElement("a");
                element.setAttribute('download', 'diagram.png');
                element.setAttribute('href', image);
                element.click();

Есть ли какое-либо решение?

Answer 1

Это код, который я использую для сохранения содержимого холста в виде файла изображения PNG:

canvas.toBlob(blob => {
    var a = document.createElement("a"),
        url = URL.createObjectURL(blob);
    a.href = url;
    a.download = "image.png";
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 0);
});