将画布下载为图像无法在Firefox和Microsoft Edge中使用

Question

我想将画布下载为图像，但不能在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);
});