下载画布作为图像在 Firefox 和 Microsoft Edge 中不起作用答案

【问题标题】：Download canvas as image not working in firefox and microsoft edge下载画布作为图像在 Firefox 和 Microsoft Edge 中不起作用
【发布时间】：2019-05-05 08:19:19
【问题描述】：

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

有什么解决办法吗？

【问题讨论】：

标签： javascript reactjs image canvas download

【解决方案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);
});

【讨论】：