脚本绘制图像

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等浏览器内技术来捕捉鼠标移动并首先生成位图数据。