使用jQuery在图像上“绘制”简单线条并保存到Rails DB的最简单方法？
我想在图像上画线。 基本上允许用户为他们喜欢的山路绘制路径。
1）有没有人知道一个很好的简单库来绘制基本线？
2）用户在图像上绘制一堆线后，将数据保存到数据库的最佳方法是什么？
画线
- Paper.js 。 查看Path Simplification示例。
- Raphaël – Raphael SketchPad
您可以轻松地将元素叠加在图像顶部，以便用户绘制图像。
另外，只是为了好玩，但你看过SVG编辑 （ 演示 ）吗？
保存行数据
上面的SketchPad脚本以JSON格式提供了绘制数据，可以在数据库中保存为纯文本。 可以对PaperJS中的对象进行同样的操作。 这是一个带有PaperJS （ 代码 ）的JSFiddle 示例， 此处以图像为背景 。
这是一个使用canvas元素和常规js（无库）的快速解决方案，可以帮助您入门。
将canvas元素添加到html页面。
添加javascript以在canvas上绘制图像。 然后它会监听点击，并在用户点击时绘制线条。
实现我忘记回答问题的后半部分，关于将图像保存到Rails DB。 这很难回答，因为它取决于您想要对结果数据做什么。 如果您只想要最终图像，我建议您将图像保存到文件系统（我使用S3来存储我的所有图像）。 有关如何在StackOverflow上执行此操作的讨论：将HTML Canvas捕获为gif / jpg / png / pdf？
如果您需要操纵绘制的路径，我会保存单个数据点以及对底层图像的引用。 通过ajax将数据点发送回Rails服务器，以及图像的url。 您的数据库表可能看起来像这样：
create_table :hiking_paths do |t| t.string 'image_url', :null => false t.string 'points', :limit => 1000 #if you want unlimited points, change to text column type t.timestamps end
html5 canvas是我所知道的唯一允许你这样做的东西。 这是一篇很棒的文章： http ： //diveintohtml5.info/canvas.html