从浏览器画布中保存图片

Question

我目前正在开发一个ASP .NET MVC网站，需要实现用户在画布上绘制图片并将其保存到数据库的功能。最好使用非常轻量级的解决方案。我认为Flash可能是最易于访问的平台，并且可能有一些很好的免费解决方案。谢谢。

- Calum

Answer 1

你可以使用Canvas在DotNet中实现这个功能。

canvas.SaveAs(dstfile, "Quality=high");

这是编程教程：http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm 无需使用Flash。

- Todd Moses

---

我认为这个问题是指HTML5中的<canvas />标签，而不是.NET中的Canvas类。https://developer.mozilla.org/zh-CN/Canvas_tutorial - Dan Herbert

Answer 2

保存图像的一个绝佳方法是使用本地的toDataURL方法。

var element = document.getElementById('drawingCanvas');
var data = element.toDataURL();
// data holds the base64 encoded image of the canvas

从那里，您可以将其异步地发布到服务器

$.ajax({
    'type': 'post',
    'dataType': 'json',
    'data': {'image': data},
    'url': '/json/image_converter.php'
});

并使用ImageMagick将其转换为图像：

list($header, $data) = explode(',', $_POST['image']);
$image = base64_decode($data);

$magick = new Imagick();
$magick->setFormat('png');

$magick->readImageBlob($image);

$magick->writeImage('/home/dude/imagefile.png');

编辑：哦，当然我忘了说IE不支持canvas，因此没有toDataURL方法。即使使用explorer canvas的解决方法也不行。

- Igor Zinov'yev

Answer 3

Flash可以很轻松地完成这个任务，不过您需要设置后端以启用它。基本上，您可以在舞台上绘制任何内容，将其转换为像素数据的字节数组，然后对该字节数组进行编码，使其符合例如 .PNG 规范。然后，您将整个数据包作为字节数组发送到后端，并确保您的服务器端脚本知道将其写入 .png 文件并保存位置到您的数据库。这样说您懂了吗？

可以在 Flex Cookbook 上找到一个广泛的示例：http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html

- Myk

Answer 4

你应该能够在Silverlight中像这样做... Silverlight应该可以轻松将鼠标移动转换为线条笔画。我不知道是否也有纯JavaScript解决方案。

- Brian Mains

Answer 5

使用canvas的MouseUp、MouseDown和MouseMove事件以及LintTo、MoveTO事件（均为JavaScript）来绘制一幅图片，然后使用canvas.toDataURL()将该图片保存为一个base64字符串存储在您的数据库中。

- Abhinaw Sharma