下載畫布作為圖像無法在firefox和microsoft邊緣工作

Question

我想下載canvas作為圖像，但不是在firefox和microsoft邊緣工作但使用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);
});