web-dev-qa-db-ja.com

キャンバスをPNGまたはJPGとして保存

新しいウィンドウでbase64でエンコードされた画像として開かずに、キャンバスをPNGとして保存したいと思います。

私はこのコードを使用しました：

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として保存させたいのですが。

javascripthtmlcanvasfabricjs
20
UXX1

私はこれを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
});
13
Dakshika

canvas.toDataURL('png')は、data:image/png;base64,XYZの文字列を提供します。それを<a href="%dataURI%" download>download</a>に詰め込むことができます（おそらく要素のクリックイベントをトリガーします）。 HTML5でのリソースのダウンロード：a [ダウンロード] を参照してください。

ただし、現在はGoogleChromeでのみサポートされています。

4
rodneyrehm

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';
    }
1
saad