1

この例に従って、キャンバスをPNGファイルに保存します。http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/

私の問題：ダウンロードしたファイルが破損していて、メモ帳で開くと、次のパターンになります。

  1. HTMLコード（PHPファイルに対応）
  2. ASCII文字（PNGファイルに対応すると思いました）
  3. <body><html>

＃1と＃3を削除してファイルをローカルに保存すると、有効なPNG画像が得られます。

私は上記の例が言っていることを正確に実行していますが、私の結果は異なります。dataURLに他の情報があるのはなぜですか。キャンバス自体以外？

ありがとう。

編集

<?php
$imdata = $_POST["imgdata"];
//run this code only when there is long POST data
if(strlen($imdata)>1000) {
        //removing the "data:image/png;base64," part
        $imdata =  substr($imdata,strpos($data,",")+1);
        // put the data to a file
        file_put_contents('image.png', base64_decode($imdata));
        //force user to download the image
        if(file_exists("image.png")){
                header('Content-type: image/png');
                header('Content-Disposition: attachment; filename="image.png"');
                readfile('image.png');
        }
}
?>
4

2 に答える 2

5

キャンバスをHTML5で保存すると、base64文字列になります。この文字列の先頭には、画像形式に関する特定の情報があります。後でハードファイルに変換するためにbase64を保存する場合は、これを取り除く必要があります。画像をキャンバス（または一部の画像コントロール）に再描画する場合は、この情報を再度追加する必要があります。

ファイルを保存する方法は次のとおりです。

var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/png");

// strip off invalid data for saving
dataURL = dataURL.replace("data:image/png;base64,", "");

これで、base64文字列を画像に変換し、必要に応じてハードファイルに保存できます。この画像をもう一度キャンバスに表示したい場合は、次のようにします。

function displayImage(base64string) {
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    var image = new Image();

    // prepend the required image info again
    image.src = "data:image/png;base64," + base64string;

    image.onload = function() {
        context.drawImage(image, 0, 0);
    }
}
于 2012-08-01T14:11:42.670 に答える
1

これは私のために働いた-

function SaveCanvasToFile(myFileName) 
{
   var link = document.createElement('a');
   link.textContent = 'download image';
   link.href = myCanvas.toDataURL('image/png', 1.0);
   link.download = myFileName;
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);    
}

これには、ファイルをサーバーに移動してから再度ダウンさせる必要がないという利点があります。

于 2019-02-21T14:38:28.780 に答える