将画布保存为PNG或JPG格式

Question

我想将canvas保存为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格式。

- UXX1

---

可能重复：如何将HTML Canvas保存为gif/jpg/png/pdf？ - Alexander

我不认为这是一个重复的问题。 - Denys Séguret

有没有办法让PHP下载它？ - UXX1

@UXX1 - 你的问题才发布了大约30分钟！再给它一些时间。你可以编辑你的问题，包括PHP问题，这样更多人就能看到它。 - Jay

在Firefox中，您可以右键单击画布，选择“另存为图像”，就像处理普通图像一样。 - AnnanFay

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

- Dakshika

Answer 2

canvas.toDataURL('png') 提供了一个类似于 data:image/png;base64,XYZ 的字符串。你可以将其插入到一个 <a href="%dataURI%" download>download</a> 中（可能会触发元素上的点击事件）。请参见 HTML5中的资源下载：a[download]。

目前仅受 Google Chrome 支持。

- rodneyrehm

Answer 3

在 script.js 文件中

  $(document).on('click','#btnPreview',function(){
     var img =$scope.canvas.toDataURL('image/png');
     $.ajax({
                type: "POST",   
                url: 'ajax.php', 
                data: {'img':img},
                success: function(data) { 
                    $("#loader_message").html("Image saved successfully"); 
                }
            });
  });

在 ajax.php 文件中。

    $encodedData=explode(',', $_POST["img"]);
    $data = base64_decode($encodedData[1]);
    $urlUploadImages = $_SERVER['DOCUMENT_ROOT'].$projName.'/images/canvas/';
    $nameImage = "test.png";
    $img = imagecreatefromstring($data);
     if($img) {
        imagepng($img, $urlUploadImages.$nameImage, 0);
        imagedestroy($img); 
        echo "OK";
    }
    else {
        echo 'ERROR';
    }

- saad

---

它正在服务器文件夹“canvas”上保存。 - saad

我的意思是问题是“如何本地保存”。我知道您的代码的预期目标，这就是为什么我指出它实际上并没有回答这个问题。 - Kaiido