调整两个图像并保存画布

【问题标题】：adjust two images and save Canvas调整两个图像并保存画布
【发布时间】：2012-01-22 09:35:10
【问题描述】：

我正在尝试使用数据库中的两到三张图片加载画布。

我的页面可以正常工作，所以我可以像 example 那样移动图像并调整它们的大小。

但现在我想在画布下方有一个（保存图像）按钮，这样当您在画布上完成移动和调整图像时，您可以将画布保存为一个 jpg。

是否可以使用上面链接的代码来广告保存画布或保存图像按钮？我看过但找不到这么简单的东西。

我不需要任何花哨的图像编辑器应用程序，就像上面示例中的那样。

【问题讨论】：

标签： javascript image html canvas

【解决方案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);

【讨论】：