我可以输入图像并输出为一个图像文件吗？

Question

HTML5 Canvas中是否有一种方法允许我将一个句子输入到文本框中，然后将该文本放到横幅图像上然后允许我将该图像保存为带有文本的图像？

我想要这样做的原因是它适用于传单生成器，因此没有任何软件编辑横幅的人只需选择我没有任何文字制作的横幅模板然后输入拥有然后将横幅输出到传单作为一个图像。

我知道Canvas可以做的事情就像在图像上输入一样，但我想知道是否可以将图像输出到设定的目的地。

提前致谢。

Answer 1

我理解您的文本 - 客户端可以键入的内容 - 是在画布中绘制的吗？ 如果是这样 - 有一种方法可以将整个画布保存为图像。

您可以使用div作为绘图的预览图像，并生成如下：

// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();

// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;

这是一个小提琴http://jsfiddle.net/GnH8E/

第一个图像是画布 - 下一个是图像预览。