调整两个图像并保存画布

Question

我正在尝试使用数据库中的两个或三个图像加载画布。

我的页面正常工作，所以我可以移动图像并重新调整大小...... http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

但现在我想在画布下面有一个（保存图像）按钮，所以当你在画布上移动和调整图像时，可以将画布保存为一个jpg

是否可以使用上面链接的代码添加保存画布或保存图像按钮。 我看了，但找不到这么简单。

我不需要任何精美的图像编辑器应用程序，就像上面的例子中那样

感谢

Answer 1

将画布保存为图像是Canvas的功能之一，非常简单。 您可以在javascript中使用简单的事件处理程序或表单提交处理程序来实现此目的。 这是一个使用jQuery获取画布并重定向到画布的png的代码示例 内容。关键功能是toDataURL（）。请在此处详细了解http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl

canvas = $("#maincanvas").get(0);

.. your drawing operations here ...

// The save image button event handler 
var toPNG = function() {
  return window.location = canvas.toDataURL('image/png');
};
$('button#save').click(toPNG);