Question

在我的Canvas绘图应用程序中，我有一个下载到png按钮，我想这样做，所以当用户在我的甜蜜警报弹出提示点击“是保存它”时，仅下载画布上的图像。现在它仍在自动下载。谢谢您的帮助。（如果有人有更好的方式通过Javascript下载也有帮助，它正在下载png但是它已损坏且我无法打开它）

$('#download').click(function(){
    swal({
        title: "Are you finished your creation?",  
        text: "click yes to save",   
        type: "warning",  
        showCancelButton: true,   
        confirmButtonColor: "#f8c1D9",   
        confirmButtonText: "Yes, save it!",  
        closeOnConfirm: true 
    }, function (isConfirm) {      
        if (isConfirm) {
            swal("Saving!");

            var base64 = document.getElementById("canvas")
              .toDataURL("image/png")
              .replace(/^data:image\/[^;]/, 'data:application/octet-stream');

            document.getElementById("download-png").href = base64
        } else {

        }

        return false; 
    });
});

HTML

<div id="download">
    <a href="#" id="download-png" download="image.png"><img src="./assets/imgs/tools/save.png" /></a>
</div>

Answer 1

您应该在页面中加入canvas-toBlob.js和FileSaver.js，然后：

function (isConfirm) {      
    if (isConfirm) {
        swal("Saving!");

        var canvas = document.getElementById("canvas")

        // get the canvas as a blob
        canvas.toBlob(function(blob){
            // Save the file...
            saveAs(blob, 'my-image.png')
        }, "image/png", 0.95); // PNG at 95% quality
    } else {
        // user cancel
    }

    return false; 
};

在将Canvas HTML图像下载到PNG之前，Sweet Alert弹出提示

1 个答案: