1

HTML 5 キャンバスを使用して、javascript を使用して何かを描画した後、そのキャンバスをハードディスクに保存する必要があります。次の方法を使用して、画像 src を取得できます。

var img = canvas.toDataURL();

この後、 img 変数には次のような値が含まれます

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAP/UlEQVR4Xu2dX4wV1R3HZwSCkbWIRpA+UMqfatwArqyKVSMUbENbGx8KafvQxDaRYKMvbdPyxPWlaNK+1FSDD/WptsEXUkWaytY1aK2y65YlS1SQrDR2Xa2KZTEQwNvvb51LLtvdvXPnnjt/znxucjJ3984553c+5zfznd+cM2fCgA8EIAABCEAAAoUnEB............

この画像のsrcを次のように使用できます

<img id=myimage" src=img />

画像は Web ブラウザに完全に表示されます。

私がしたいのは、この画像をハードディスクに保存することです。PHPまたはJavaScriptで保存する方法はありますか。

どんな助けでも大歓迎です。

4

4 に答える 4

4

PHP> = 5.2.0の場合、data://ストリームラッパーを使用できます。

file_put_contents("file.png",file_get_contents("data://".$var_containing_the_data_uri));

ここで$var_containing_the_data_uri、たとえば、データURIを含む変数に置き換える必要があります$_POST['image']。

AJAXpostを使用してデータを送信できます。GETメソッドを使用する場合は、URLの長さの制限に注意してください。

または、クライアントに画像のダウンロード/保存を許可する場合は<img>、データURIsrcを使用して要素を作成し、右クリックして保存するようにクライアントに指示します。@Kode-Plusが述べたリンクを参照することもできます。

于 2012-07-25T08:51:30.677 に答える
2

私は最近これを行いました。ここにコードがあります。

HTML コード:

<form id="frm" method="post" action="php/saveimg.php" style="display:none">
<input type="submit"  value="submit"/>
<textarea name="data" id="data"></textarea>
</form>

JS コード: ここで「saveimg」は、HTML のボタンです。

$("#saveimg").click(function(){
var dataurl=document.getElementById('mycanvas').toDataURL();
$("#data").val(dataurl);
$("#frm").trigger("submit");
});

PHP コード:

<?php
$data = $_POST['data'];
//removing the "data:image/png;base64," part
$uri =  substr($data,strpos($data,",")+1);
file_put_contents('wow.png', base64_decode($uri));
if(file_exists('wow.png')){
header("Content-Type: application/force-download");
header('Content-Disposition: attachment; filename="wow.png"');
readfile('wow.png');
}
?>

お役に立てれば。

于 2012-07-25T09:10:59.000 に答える
1 
var data = canvas.toDataURL().split(",")[1],
    xhr = new XMLHttpRequest;

xhr.open( "POST", "file.php", true );
xhr.send(data);

PHP:

file_put_contents( "somefile.png", base64_decode( file_get_contents( "php://input" ) );
于 2012-07-25T08:38:09.637 に答える
1

フォーム経由でサーバーにデータを送信できます。例えば：

var img = canvas.toDataURL();
// store in (hidden) element of a form
document.forms["storeImgForm"].elements["imgSrc"].value = img;
document.forms["storeImgForm"].submit();


<form action="http://www.example.com/storeme.php" Method="POST" name="storeImgForm">
 <input type="hidden" name="imgSrc" value="">
</form>

そして、PHP から $_POST["imgSrc"]; から取得します。

于 2012-07-25T08:25:35.370 に答える