画像を描画するスクリプト

Question

私はマウスで画像を描画して画像として保存するPHPスクリプトを探しています。あなたが何かを知っていれば助けてください。

Answer 1

。もちろん、この缶は、たとえば、あなたが望むようになどの高度なまたは単純なこと：

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    pos = false; 

ctx.strokeStyle = "red"; 

$(canvas).bind("mousedown", function(evt) { 
    pos = {x: evt.layerX, y: evt.layerY}; 
    ctx.beginPath(); 
    ctx.moveTo(pos.x, pos.y); 
}); 

$(canvas).bind("mousemove", function(evt) { 
    if(!pos) return; // You may not want to do this on every mousemove. 
    pos = {x: evt.layerX, y: evt.layerY}; 
    ctx.lineTo(pos.x, pos.y); 
    ctx.stroke(); 
}); 

$(canvas).bind("mouseup", function(evt) { 
    if(!pos) return; 
    ctx.closePath(); 
    pos = false; 
}); 

はまた、あなたのPHPスクリプトに画像データを送信するボタンを追加します。あなたのsaveImage.phpスクリプトで

$('#btn').bind("click", function(evt) { 
    $.post('saveImage.php', {image : canvas.toDataURL('image/jpeg')}); 
}); 

をサーバー上でデータをデコードし、ファイルに書き込む。

$imgData = $_POST["image"]; // Probably a good idea to sanitize the input! 
$imgData = str_replace(" ", "+", $imgData); 
$imgData = substr($imgData, strpos($imgData, ",")); 

$file = fopen('myImage.jpg', 'wb'); 
fwrite($file, base64_decode($imgData)); 
fclose($file); 

私はここでJSビットにjQueryを使用していますが、これは必須ではありません。

Answer 2

PHPはサーバー側で実行されますが、マウスとの対話はクライアント側で実行されます。 JavaScriptやFlashなどのブラウザ内の技術を使用してマウスの動きをキャプチャし、ビットマップデータを生成する必要があります。あなたはは、あなたが描くことができますJavascriptのスニペットを作り

:-)いくつか車輪の再発明のように感じるん場合