使用画布在图像上绘制(jpg或png)并使用图像保存绘图

时间:2011-03-31 12:59:22

标签: html5 canvas

我尝试使用画布在图像上绘图。是的,当然我做到了。但我需要立即将画布绘图与图像合并。

即我的概念是,我有一个图像(#a),我喜欢在图像上标记一些地方(圆形,矩形等),所以我只选择画布技术。 (如果有其他技术可用,请建议我。)

因此,在画布绘制之后,我想将画布图像与我的实际图像(#a)合并。然后,我会得到标记的图像。

我以前做过什么?。

我将背景设置为canvas标签的实际图像(#a)。 (即带有一些背景图像的帆布标签)。我完成了绘图。然后,我将画布图像转换为dataURI,然后我将使用Linux命令(imageMagic)将实际图像(#a)与画布图合并。

你能告诉我任何其他方式,直接在图像上绘图并立即用图像保存图形。

提前致谢。

1 个答案:

答案 0 :(得分:5)

不要设置画布的背景。

相反,您希望使用画布上下文的drawImage()函数将图像绘制到画布上。然后进行所有绘图操作。

然后您可以正确保存图像。我也建议为此寻找Canvas2Image。

http://www.nihilogic.dk/labs/canvas2image/