Manière la plus facile de “tirer” des lignes simples sur une image avec jQuery et d'économiser sur les Rails de DB?

Voici une solution rapide à l'aide de l'élément canvas et régulière js (pas de bibliothèques) qui devrait vous aider à obtenir commencé.

Ajouter un élément canvas à votre page html.

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

Ajouter du javascript à attirer votre image sur la toile. Il écoutera pour les clics, et de tracer les lignes que l'utilisateur clique.

<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>

Rendu compte que j'ai oublié de répondre à la deuxième moitié de la question, à propos de l'enregistrement de l'image à l'un des Rails de DB. C'est plus difficile de répondre, car cela dépend de ce que vous voulez faire avec les données qui en résultent. Si vous voulez juste de l'image finale, je vous suggère de sauvegarder l'image dans un système de fichiers (j'utilise S3 pour stocker l'ensemble de mes images). Il y a une discussion sur la façon de faire déjà sur StackOverflow: Capture Canvas HTML gif/jpg/png/pdf?

Si vous avez besoin de manipuler le chemin tracé, je veux sauver les points de données individuels ainsi qu'une référence à l'image sous-jacente. Envoyer les points de données de retour à votre serveur Rails via ajax, ainsi que l'url de votre image. Votre table de base de données peut alors ressembler à ceci:

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