如何让用户在html中将图片置于另一张图片之上？

我想要一个汽车的图像，当用户点击汽车上的一个点时，我会在该点上放下一个x图像或一个圆形图像。我需要保存他们点击的位置，以便在他们回来时将它显示在同一个位置。如何让用户在html中将图片置于另一张图片之上？

在html中这样做的最好方法是什么？

我应该使用一个图像与其上覆盖的其他图像？

我应该使用html5吗？

任何人都知道任何类似性质的工作示例？

想要使用js，html5等在iphone safari（非本地应用程序）上进行这项工作。应用程序在rails上是ruby，所以我可以利用一些服务器端功能，但如果可能的话，宁愿在html/css中尽可能多地利用它。

来源

2013-09-10 Joelio

你是仅限于像JavaScript，HTML和CSS只有客户端技术？ –

是的，将编辑澄清，谢谢，目标是做到这一点在safari的iphone理想使用html5，js和iui（或其他类似的） – Joelio

作为一个出发点：http://stackoverflow.com/questions/19461/click -an-image-get-coordinates和http://css-tricks.com/examples/ShapesOfCSS/ – ChrisW

您可以使用canvas元素来执行此操作。 canvas元素允许您为其绘制图像和形状。

要存储和检索点击，您可以使用网络存储（localStorage）。

例如 - 加载图像，并描绘到帆布：

ONLINE DEMO HERE

HTML：

<canvas id="demo" width="500" height="400"></canvas>

的JavaScript：

/// get context for canvas, cache dimension 
var ctx = demo.getContext('2d'), 
    w = demo.width, 
    h = demo.height, 

    img = new Image(); /// the image we want to load 

/// when done go draw existing marks and start listening for clicks 
img.onload = function() { 

    renderMarks(); 

    demo.onclick = function(e) { 

     /// convert mouse coord relative to canvas 
     var rect = demo.getBoundingClientRect(), 
      x = e.clientX - rect.left, 
      y = e.clientY - rect.top; 

     /// store mark 
     addMark(x, y); 

     /// redraw everything 
     renderMarks(); 
    } 
}

这些是主要的功能，该第一呈现在图像的顶部现有马克到帆布：

function renderMarks() { 

    /// re-draw image which also serves to clear canvas  
    ctx.drawImage(img, 0, 0, w, h); 

    /// get existing marks from localStorage 
    var marks = localStorage.getItem('marks'), 
     i = 0; 

    /// if any, render them all 
    if (marks !== null) { 

     /// localStorage can only store strings 
     marks = JSON.parse(marks); 

     /// set color and line width of circle 
     ctx.strokeStyle = '#f00'; 
     ctx.lineWidth = 3; 

     /// iterate marks and draw each one 
     for(;i < marks.length; i++) { 
      ctx.beginPath(); 
      ctx.arc(marks[i][0], marks[i][1], 30, 0, 2 * Math.PI); 
      ctx.stroke(); 
     } 
    } 
}

这增加了一个标记到集合：

function addMark(x, y) { 

    /// get existing marks or initialize 
    var marks = JSON.parse(localStorage.getItem('marks') || '[]'); 

    /// add mark 
    marks.push([x, y]); 

    /// update storage 
    localStorage.setItem('marks', JSON.stringify(marks)); 
}

（该代码可以被优化以各种方式，但我做了它表明基本原则）。

如果您现在离开页面并返回，您会看到标记再次呈现（免责声明：jsfiddle可能会或不会提供相同的页面，以便在本地/在“真实”页面中进行测试以确保）。

这里的圆圈可以是任何东西，图像，不同的形状等等。

要清除标记只需拨打：

localStorage.clear();

，或者如果你存储的其他数据还有：

localStorage.removeItem('marks');

来源

2013-09-11 00:10:54 K3N

真棒，正是我所期待的！ – Joelio

那么，你可以为每个点创建新的图像，当用户点击你用新的图像替换原始图像。您可以使用CSS或jQuery来做到这一点）

来源

2013-09-11 00:03:11

根据您对显示区域或确切的x/y坐标感兴趣，可能会使用图像<map>。

还检查出this stackoverflow问题。

我没有工作示例可以显示，但我认为这符合类似的性质。我不确定你将如何保存调用状态的信息（返回同一会话或几天/几个月后？）。

我希望这有些用处。

来源

2013-09-11 00:09:09 Ken

如何让用户在html中将图片置于另一张图片之上？

回答

相关问题