将画布保存为PNG或JPG

Question

我想将画布保存为PNG,而不是在新窗口中将其作为base64编码的图像打开.

我用过这段代码:

jQuery("#btnPreview").click(function(){
        if (!fabric.Canvas.supports('toDataURL')) {
            alert('Sorry, your browser is not supported.');
        }
        else {
            canvas.deactivateAll();
            canvas.forEachObject(function(o){
                if(o.get("title") == "||Watermark||"){
                    canvas.bringToFront(o);
                }
            });
            window.open(canvas.toDataURL('png'), "");
            canvas.forEachObject(function(o){
                if(o.get("title") == "||Watermark||"){
                    canvas.sendToBack(o);
                }
            });
            canvas.renderAll();
        }

    });

我想使按钮将图像保存为PNG或JPG.

Answer 1

我在我的jquery上使用它:

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

$('.save').attr({
    'download': 'YourProduct.png',  /// set filename
    'href'    : image              /// set data-uri
});

Answer 2

canvas.toDataURL('png')提供一个字符串 la data:image/png;base64,XYZ。您可以将其填充到<a href="%dataURI%" download>download</a>（可能触发元素上的单击事件）。请参阅在 HTML5 中下载资源：a[下载]

不过目前只有 Google Chrome 支持。