在 JavaScript 中创建/修改图像

Question

是否有可能 动态创建和修改图像 在一个 每像素级别 在 JavaScript 中（在客户端）？还是必须使用基于服务器的语言（例如 PHP）来完成此操作？

我的用例如下：

• 用户打开网页并加载本地存储的图像
• 显示图像的预览
• 用户可以使用一组滑块修改图像（像素级操作）
• 最后他可以将图像下载到本地硬盘

在网上搜索时，我只找到了有关使用IE的过滤方法的帖子，但没有找到有关JavaScript中的图像编辑功能的内容。

Answer 1

这必须在服务器端完成。您可能会考虑做的一件事是允许所有编辑在客户端进行，然后最后将最终图像（通过 AJAX）发布到服务器，以允许它以正确的 MIME 类型和正确的方式将其返回给您打包。

Answer 2

一些浏览器支持画布：http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

Answer 3

您可能想查看 处理.js. 。jQuery 出名的 John Resig 写了它。它支持像素处理，不幸的是只有 Firefox 3 可以充分处理它。

Answer 4

还看 数据 URI （不幸的是，尽管 IE 8 以下版本不支持它们！）

Answer 5

你可以想象一组 JS 工具将允许用户定义他想要进行什么样的转换，但转换的最终工作必须在服务器端完成。出于安全原因，客户端的 JS 无法创建文件。

Answer 6

尝试 Allicorn 的图像重定向器 - 听起来这就是你要找的。

Answer 7

JavaScript 中的本地图像操作应该是可能的 - 看看 网站图标的捍卫者. 。;-) 问题是如何将原始图像从文件系统获取到您的页面中（除了首先将 HTTP 上传到服务器之外，我不知道还有什么其他方法）。