从浏览器画布保存图片

I'm currently developing a website in ASP .NET MVC and I require functionality for a user to be able to draw a picture on a canvas which can be saved in a database. What is the best method for doing this? preferably a very lightweight solution. I was thinking flash would be the most accessible platform and there may be some good free solutions.

我目前正在ASP .NET MVC中开发一个网站,我要求用户能够在画布上绘制可以保存在数据库中的图片。这样做的最佳方法是什么?优选地是非常轻量级的解我认为闪存将是最容易访问的平台,并且可能有一些很好的免费解决方案。

Thanks

5 个解决方案

#1

Flash can do it pretty easily, though you'll have to get your back-end set up to enable it. Basically you can draw anything on your stage to a bytearray of pixel data, then encode that bytearray to comply with for instance the .PNG specification. Then you send the whole package over to your back end as a byte array and make sure that your server-side scripts know to write it as a .png file to your server, then save the location in your database. Does that make sense?

Flash可以非常轻松地完成,但您必须设置后端才能启用它。基本上,您可以在舞台上绘制任何像素数据的字节数组,然后对该字节数进行编码以符合例如.PNG规范。然后将整个包作为字节数组发送到后端,并确保服务器端脚本知道将其作为.png文件写入服务器,然后将该位置保存在数据库中。那有意义吗?

A broad example can be found here on the Flex Cookbook: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html

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

#2

You can do this in DotNet using the canvas.

您可以使用画布在DotNet中执行此操作。

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

Here is the tutorial: http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm

这是教程:http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm

No need to use Flash.

无需使用Flash。

#3

An excellent way of saving an image is to use the native toDataURL method.

保存图像的一种很好的方法是使用本机toDataURL方法。

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

From there you can post it asynchronously to the server

从那里你可以异步发布到服务器

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

and convert it to an image using ImageMagick:

并使用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');

Edit: Oh, and of course I forgot to say that IE doesn't support canvas, hence no toDataURL method. Even with explorer canvas workaround.

编辑:哦,当然我忘了说IE不支持canvas,因此没有toDataURL方法。即使使用资源管理器画布解决方法。

#4

You should be able to do something like this in Silverlight... Silverlight should be able to, without difficulty, translate the mouse movements into line strokes. I don't know if there is a pure JavaScript solution too.

您应该能够在Silverlight中执行类似的操作...... Silverlight应该能够毫无困难地将鼠标移动转换为线条笔划。我不知道是否还有纯JavaScript解决方案。

#5

User MouseUp,mouseDown and MouceMove events along with LintTo,MoveTO events of canvas (all javascript) to draw a picture and then use canvas.toDataURL() to save this picture in a base64 string in yr database.

用户MouseUp,mouseDown和MouceMove事件以及LintTo,canvas的MoveTO事件(所有javascript)绘制图片然后使用canvas.toDataURL()将此图片保存在yr数据库的base64字符串中。

#1