在 HTML 和 Javascript 中的图像上“绘制”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10324949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Draw" on top of an image in HTML & Javascript
提问by jklemmack
I am building a web-app that will users mark-up images by "drawing" on it with their cursor. We'll take the users drawings and send it to the server to be converted to PNG or some other format for storage.
我正在构建一个网络应用程序，用户可以通过使用光标在其上“绘制”来标记图像。我们将获取用户的图纸并将其发送到服务器以转换为 PNG 或其他一些格式进行存储。
We need this app to work on both desktop- and tablet-based browsers, so Flash, Java, & Silverlight are out. We want to support IE8+, FF, Chrome, & Safari. Is there any type of Javascript library that will offer up some form of primitive MS-Paint-like drawing capabilities so I can send that data to the server?
我们需要这个应用程序在基于桌面和基于平板电脑的浏览器上运行，所以 Flash、Java 和 Silverlight 已经过时了。我们希望支持 IE8+、FF、Chrome 和 Safari。是否有任何类型的 Javascript 库可以提供某种形式的原始 MS-Paint 式绘图功能，以便我可以将该数据发送到服务器？
This questionis similar, but I'm looking for something that'd encode organic, human gestures, not draw them out.
这个问题很相似，但我正在寻找可以编码有机人类手势的东西，而不是将它们绘制出来。
(And no, creating native apps for each different mobile platform is not within our core competency or budget, so that's not a viable alternative).
（不，为每个不同的移动平台创建原生应用不在我们的核心能力或预算范围内，所以这不是一个可行的选择）。
回答by Anurag Uniyal
You can either use the html canvas element or use SVG library like Raphaele.g. http://ianli.com/sketchpad/is a library using Raphael.
您可以使用 html canvas 元素或使用Raphael等 SVG 库，例如http://ianli.com/sketchpad/是一个使用 Raphael 的库。
回答by Eliran Malka
回答by Christian
Basically, have a <canvas/>element overlay your <img/>and get the users to 'paint' into the canvas.
基本上，让一个<canvas/>元素覆盖您<img/>并让用户“绘画”到画布中。
The paint capabilities will depend on what you need, which you didn't exactly specify, so this is as much as I can help.
绘画功能将取决于您的需要，您没有完全指定，所以这是我所能提供的尽可能多的帮助。
