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

用于绘制图像的脚本

2 个答案: