5

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

谢谢

4

5 回答 5

1

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

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

于 2010-02-25T19:02:02.423 回答
1

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

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

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

无需使用 Flash。

于 2010-02-25T15:29:19.387 回答
1

保存图像的一种极好的方法是使用本机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 不支持画布，因此没有 toDataURL 方法。即使使用资源管理器画布解决方法。

于 2010-03-25T09:17:07.320 回答
0

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

于 2010-07-12T18:04:25.943 回答
0

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

于 2010-02-25T15:27:31.357 回答