HTML 5 Canvas，编辑并保存在现有图像上

Question

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

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

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

Answer 1

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

Answer 2

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

1. 将图像加载到画布中，并通过绘制来真正更改画布
2. 将图片加载到img中并将其用作背景，在该背景上有一个透明画布，您可以在此处绘制点
3. 不要触摸图片，也不要使用画布，但要将每个点设为一个单独的img标记，只是生活在图像上方

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

Answer 3

不完全相同，但你可以做到这一点。我可以给你一个开头 - 结账这个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