将画布另存为PNG或JPG [英] Saving canvas as a PNG or JPG

问题描述

我使用这个代码：

$ b。我想将画布保存为PNG，而不是在新窗口中以base64编码的图片打开。
$ b

  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。

解决方案

我在我的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 
}）; 
  

I want to save canvas as PNG, without opening it in a new window as base64-encoded image.

I used this code:

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();
        }

    });

I want to make the button save the image as a PNG or JPG.

解决方案

I use this on my 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
});

这篇关于将画布另存为PNG或JPG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！