【问题标题】：Easiest way to "draw" simple lines over an image with jQuery and save to Rails DB?使用 jQuery 在图像上“绘制”简单线条并保存到 Rails DB 的最简单方法？
【发布时间】：2012-01-27 08:01:04
【问题描述】：

我想在图像上画线。基本上允许用户为他们喜欢的山路绘制路径。

1) 有人知道用于绘制基本线条的简单库吗？

2) 用户在图像上画了一堆线后，将数据保存到数据库的最佳方法是什么？

【问题讨论】：

虽然不是图书馆 ;) scribblemaps.com/create
你能用画布（html5）吗？

标签： jquery ruby-on-rails drawing lines

【解决方案1】：

画线

Paper.js 。查看Path Simplification 示例。
Raphaël - Raphael SketchPad

您可以轻松地将元素叠加在图像上，以便用户在图像上绘图。

另外，只是为了好玩，但你见过吗 SVG-edit (demo)？

保存线路数据

上面的 SketchPad 脚本提供了 JSON 格式的绘制数据，这些数据可以在数据库中保存为纯文本。可以对 PaperJS 中的对象执行相同的操作。这是一个 JSFiddle example with PaperJS (code) 和 here with an image as a background。

【讨论】：

【解决方案2】：

这是一个使用 canvas 元素和常规 js（无库）的快速解决方案，可以帮助您入门。

向您的 html 页面添加一个画布元素。

<canvas id="canvas" width="800" height="600">
  Your browser does not support the canvas element.
</canvas>

添加 javascript 以在画布上绘制图像。然后它将监听点击，并在用户点击时绘制线条。

<script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var context = document.getElementById('canvas').getContext('2d');

  var points = [];

  // Determine where the user clicked, I believe I pulled this from elsewhere on StackOverflow a while ago.
  function getCursorPosition(e) {
    var mx, my;
    if (e.pageX || e.pageY) {
      mx = e.pageX;
      my = e.pageY;
    }
    else {
      mx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      my = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    mx -= canvas.offsetLeft;
    my -= canvas.offsetTop;
    return {x: mx, y: my};
  }

  // Once we have at least two points, draw a line between them.
  function drawPath() {
    context.beginPath();
    for (var i = 0; i < points.length - 1; i++) {
      context.moveTo(points[i]['x'], points[i]['y']);
      context.lineTo(points[i+1]['x'], points[i+1]['y']);
      context.stroke();
    }
    context.closePath();
  }

  // Listen for clicks, and redraw the map when they occur.
  function initPointCollection() {
    canvas.onclick = function(e) {
      var point = getCursorPosition(e);
      points.push(point);

      if (points.length > 1) {
        drawPath();
      }
    }
  }

  function init() {
    // Load up your image.  Don't attempt to draw it until we know it's been loaded.
    var mountain = new Image();
    mountain.onload = function() {
      context.drawImage(this, 0, 0);
      initPointCollection();
    }
    mountain.src = 'mountain.png';  // Replace with actual image.
  }

  // Should check if document has finished loading first, but I'm too lazy, especially without JQuery.
  init();
</script>

意识到我忘了回答问题的后半部分，关于将图像保存到 Rails 数据库。这很难回答，因为它取决于您想对结果数据做什么。如果您只想要最终图像，我建议您将图像保存到文件系统（我使用 S3 来存储我的所有图像）。 StackOverflow 上已经讨论了如何做到这一点：Capture HTML Canvas as gif/jpg/png/pdf?

如果您需要操作绘制的路径，我会保存各个数据点以及对底层图像的引用。通过 ajax 将数据点连同图像的 url 发送回 Rails 服务器。您的数据库表可能如下所示：

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

【讨论】：

【解决方案3】：

html5 画布是我所知道的唯一可以让你这样做的东西。这是一篇很棒的文章：http://diveintohtml5.info/canvas.html

【讨论】：