记录并存储高分辨率手绘图
是否有任何先进的解决方案可以用 JavaScript 在网站上捕获手绘图（从平板电脑、触摸屏或类似 iPad 的设备）并将其存储在服务器端？
本质上，这将是一个简单的鼠标绘图画布，其特点是其分辨率（即每秒捕获的鼠标移动次数）需要非常高，否则绘图中的圆形线条将变成“快速移动笔/鼠标时“多边形”：
（如果不是这种情况，则使用 inputDraw 解决方案@Gregory 建议的将是 100% 完美。）
它还必须具有高水平的图形质量，即笔画抗锯齿。这里没有什么花哨的东西，但 MS Paint 风格、1x1 像素描边不会削减它。
总的来说，我发现这是一件非常有趣的事情，因为平板电脑至少变得更加普遍了。 （并不是说他们得到了我认为他们应得的关注）。
任何建议都将受到高度赞赏。我更喜欢开源解决方案，但我也对 ActiveX 控件或 Java Applet 等专有解决方案持开放态度。
FF4、Chrome支持是必须的；需要 Opera、IE8/9 支持。
请注意，大多数“画布”库以及与我类似的其他问题的大多数答案都参考以编程方式在画布上绘图。这不是我正在寻找的东西。我正在寻找能够记录用户在特定区域上绘图的实际笔或鼠标移动的东西。
出于好奇，自提出此问题以来是否发生了任何变化，开始悬赏。
Are there any advanced solutions for capturing a hand drawing (from a tablet, touch screen or iPad like device) on a web site in JavaScript, and storing it on server side?
Essentially, this would be a simple mouse drawing canvas with the specialty that its resolution (i.e. the number of mouse movements it catches per second) needs to be very high, otherwise round lines in the drawing will become "polygonal" when moving the pen / mouse fast:
(if this weren't the case, the inputDraw solution suggested by @Gregory would be 100% perfect.)
It would also have to have a high level of graphical quality, i.e. antialias the penstroke. Nothing fancy here but a MS Paint style, 1x1 Pixel stroke won't cut it.
I find this a very interesting thing in general, seeing as Tablet PCs are becoming at least a bit more common. (Not that they get the attention I feel they deserve).
Any suggestions are highly appreciated. I would prefer an Open Source solution, but I am also open to proprietary solutions like ActiveX controls or Java Applets.
FF4, Chrome support is a must; Opera, IE8/9 support is desired.
Please note that most "canvas" libraries around, and most answers to other questions similar to mine, refer to programmatically drawing onto a canvas. This is not what I am looking for. I am looking for something that records the actual pen or mouse movements of the user drawing on a certain area.
Starting a bounty out of curiosity whether anything has changed during the time since this question was asked.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我怀疑如果没有在为此目的定制的某些嵌入式系统上编写有效的汇编程序，您将无法获得比“onmousemove”事件所提供的更高的分辨率。您在操作系统内运行，遵守操作系统的规则，这意味着您受到操作系统提供的时间片频率的限制。 （通常每秒大约 100 个，根据负载而变化）我没有使用可以克服“多边形”问题的平板电脑，并且我使用了一些高端平板电脑。 Photoshop 通过三次插值克服了这个问题。
也就是说，除非您有一个非常特殊的平板电脑，它将捕获许多移动事件并将它们排队到某个内部缓冲区，并在将数据分派到操作系统时一次发送一整包坐标。不过，我查看了平板电脑 api，它们一次只提供一组坐标，因此如果发生这种情况，您将需要自定义硬件、自定义驱动程序以及可以处理多个数据包的自定义 api坐标。
或者你可以使用一个该死的 canvas 标签，onmousemove 事件，event.pageX|pageY 一些三次插值，canvas的"toDataURI" api，将结果发布到您的php脚本，然后就说你做了所有其他奇特的事情。
在我的测试中，onmousemove 将为您提供每个移动像素一个事件，仅受浏览器中事件循环速度的限制。您将获得快速移动的稀疏数据点（多边形），这在没有巨额研究经费和硬件设计师的情况下已经是最好的了。交易。
I doubt you'll get anything higher resolution than the "onmousemove" event gives you, without writing an efficient assembler program on some embedded system custom built for the purpose. You run inside an OS, you play by the OS's rules, which means you're limited by the frequency of the timeslices an OS will give you. (usually about 100 per second, fluxuating depending on load) I've not used a tablet that can overcome the "polygon" problem, and I've used some high end tablets. Photoshop overcomes the problem with cubic interpolation.
That is, unless, you have a very special tablet that will capture many movement events and queue them up to some internal buffer, and send a whole packet of coordinates at a time when it dispatches data to the OS. I've looked at tablet api's though, and they only give one set of coordinates at a time, so if this is going to happen, you'll need custom hardware, and a custom driver, and custom apis that can handle packets of multiple coordinates.
Or you could just use a damned canvas tag, the onmousemove event, event.pageX|pageY some cubic interpolation, the "toDataURI" api of canvas, post the result to your php script, and then just say you did all that other fancy stuff.
onmousemove, in my tests, will give you one event per pixel of movement, limited only by the speed of the event loop in the browser. You'll get sparse data points (polygons) with fast movement and that's as good as it gets without a huge research grant and a hardware designer. Deal.
oekaki 世界中有一些用于此目的的小程序： Shi Painter、Chibipaint 或 PaintBBS。 这里您有用于集成的 php 类。
这些小程序生成的绘图具有相当好的质量。如果您在 oekakicentral.com 注册，您可以看到所有画廊，并且一些图画有一个动画链接，显示了如何进行它绘制了（这取决于小程序），因此您可以比较小程序的可能性。其中一些是开源的。
编辑：另请参阅使用 HTML 5 制作的此。
there are some applets for this in the oekaki world: Shi painter, Chibipaint or PaintBBS. Here you have php classes for integration.
Drawings produced by these applets can have quite good quality. If you register in oekakicentral.com you can see all the galleries and some drawings have an animation link that shows how was it drawn (it depends on the applet), so you can compare the possibilities of the applets. Some of them are open source.
Edit: See also this made in HTML 5.
看一下
非商业用途免费。根据他们的网站，商业用途价格为 29 欧元。但它不是开源的。
恕我直言，值得一看。
或者，您可以基于开源并使用 jQuery 的 svg-edit 实现某些内容（演示）。如果需要 Google Frame 插件才能支持 IE6+。
编辑：我刚刚找到了 svg-freehand-signature 项目 (演示），它捕获您的手写签名并使用 POST 将其作为 SVG 发送到服务器。它以直接、独立的 zip 形式分发（开箱即用，适用于 Safari 和 Firefox，您可能需要将其与 svgweb 结合使用为 Internet Explorer 带来 SVG 支持）。
编辑：我成功组合了 Cesar Oliveira 的 canvaslol （只需查看页面的源代码即可了解其工作原理）使用 ExplorerCanvas 在 IE 上进行操作。您还可以查看 Anne van Kesteren 的 Paintr 实验。
Have a look at <InputDraw/>: a flash component that turns freehand drawing into SVG. Then you could send back the generated SVG to your server.
It's free for non commercial use. According to their site, commercial use price is 29€. It's not open source though.
IMHO it's worth a look.
Alternatively, you implement something based on svg-edit which is open source and uses jQuery (demo). If requires the Google Frame Plugin for IE6+ support though.
EDIT: I just found the svg-freehand-signature project (demo) that captures your handwritten signature and sends it to a server as a SVG using POST. It's distributed as a straight-forward and self-contained zip (works out of the box with Safari and Firefox, you may want to combine it with svgweb that brings SVG support to Internet Explorer).
EDIT: I successfully combined Cesar Oliveira's canvaslol (just look at the source of the page to see how it works) with ExplorerCanvas to have something on IE. You can also have a look at Anne van Kesteren's Paintr experiment.
markup.io 正在通过鼠标松开后应用的算法来做到这一点。
我最近问了一个类似的问题，得到了有趣但不令人满意的答案： 有什么办法可以加速mousemove事件吗？
markup.io is doing that with an algorithm applied after the mouseup.
I asked a similar question recently, and got interesting but not satisfying answers: Is there any way to accelerate the mousemove event?