Question

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

由于

Answer 1

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

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

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

无需使用Flash。

Answer 2

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

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

Answer 3

保存图像的一种很好的方法是使用原生的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方法。即使使用资源管理器画布解决方法。

Answer 4

你应该可以在Silverlight中做这样的事情...... Silverlight应该能够毫无困难地将鼠标移动转换为线条笔划。我不知道是否还有纯JavaScript解决方案。

Answer 5

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

从浏览器画布保存图片

5 个答案: