1

作为 HTML 5 Canvas 的超级新手，我需要能够加载图像，然后能够在图像上绘制即“命中点”并保存。

我才刚刚开始，可以做到这一点 http://www.w3schools.com/html5/canvas_drawimage.asp

所以这很好加载图像我现在只需要允许用户单击图像的某些部分来创建点然后能够保存它们。有什么好的链接或例子吗？

4

3 回答 3

0

对于点的图形编辑，IMO 有三个主要选项：

  1. 将图像加载到画布中，并通过在画布上绘图来真正改变画布
  2. 加载图像img并将其用作背景，在该背景上有一个透明画布，您可以在其中绘制点
  3. 不要触摸图像，也不要使用画布，而是让每个点成为一个单独的img标签，只存在于图像的顶部

对于发送结果，您可能不想发送修改后的图像，而只是发送选定的点配置，这是对服务器的正常 ajax 请求。也可以以png格式发送修改后的图像（甚至在计算机上本地“下载”它而不向服务器发送任何内容），但在这种情况下，IMO 不是一个有用的功能。

于 2012-07-29T05:38:53.790 回答
0

不完全一样，但你可以做到这一点。我可以在这方面给你一个先机——看看这个jsFiddle。我使用FabricJS构建了这个编辑器。NoteEditor.js 中也提供了保存功能

var canvas = new fabric.Canvas('c');
var imgInstance = new fabric.Image(imgElement); 
canvas.add(imgInstance);//initialize the Canvas with the image
于 2014-05-18T17:36:56.867 回答
0

Opera 有一个很好的教程让用户在画布上“绘画”：http ://dev.opera.com/articles/view/html5-canvas-painting/

于 2012-07-29T05:25:34.423 回答