腳本繪製圖像

Question

我正在尋找一個PHP腳本，它允許我用鼠標繪製圖像並將其保存爲圖像。如果你知道任何請幫忙。

Answer 1

如果你做感覺像重塑了幾個輪子:-)

做一個JavaScript片段，讓你畫。

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腳本：

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

在你saveImage.php腳本如你所願，例如這當然可以被評爲先進或簡單在服務器上解碼數據並將其寫入文件。

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

應該這樣做:-)我在這裏使用jQuery的JS位，當然沒有必要。

Answer 2

PHP在服務器端執行，而與鼠標的交互在客戶端執行。您需要使用JavaScript或Flash等瀏覽器內技術來捕捉鼠標移動並首先生成位圖數據。