javascript - JQuery / Canvas / Javascript ...我可以用什么来移动或旋转鼠标到一个div中的图像？

Question

我正在开发一个使用 PHP/Javascript/JQuery 的交互式网站。在页面上，我想建议访问者用鼠标移动和/或旋转图像，以创建新的构图（如下图所示）并将结果保存为 JPG...</p>

……但我真的不知道该怎么做……你能帮帮我吗？

非常感谢。

Answer 1

对于这么简单的事情，我会使用 SVG 而不是 Canvas。

Raphael是 SVG 的优秀库之一。

可以做像这样简单的事情的画布库是FabricJS和KineticJS

通常我不提倡图书馆，但如果这就是应用程序要做的所有事情，那么它将为您节省大量时间。

Answer 2

Another possibility is to make use of the svg-edit project, possibly tweaking it to better suit your needs if all you want is basic transforms.

Answer 3

所以让我明确一点，这真的很难。

如果您使用 Canvas，您可以使用小型服务器端脚本将其导出为 PNG。

还有其他人做过这样的事情，Lucid Chart使用 DOM 元素来移动东西并用 Canvas 绘制它们。我不确定他们是如何出口的。

如果您将 Canvas 用于整个事情，这里有一点关于如何做到这一点。

在 PHP 方面：

// requires php5
define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

在 JS 方面（使用 jQuery）：

var c  = document.getElementById("yourCanvas");
var png = canvas.toDataURL();
$.post("postimg.php", {img: png}, function() {
    console.log("saved your thing");
});

去年我写了一篇关于这个的博客文章，但只包括了 PHP 方面：

http://j-query.blogspot.com/2011/02/save-base64-encoded-canvas-image-to-png.html