Javascript 客户端 - 从网页上的现有图像创建新图像

Question

有没有办法在网络浏览器中使用 Javascript 将图像切割成图 block ？

我想让用户从网页上的图库中选择一张图片，然后将该图片剪切成 4 或 6 个新图 block ，然后将这些图 block 放在表格中，让用户为每个图 block 添加一些描述。

如我现在所见，我可以在用户选择图像和图 block 数量后从服务器重新加载图 block ，但如果可能的话我想跳过重新加载。

编辑:
关于 KP 关于浏览器级别支持的评论，如果可能的话，我希望有不需要 HTML5 支持的解决方案。

Answer 1

如果你正在处理现代浏览器，你可以用 Canvas 来做。参见 this tutorial并查看“切片”部分。基本上你可以使用

drawImage(图像, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

按照您喜欢的方式(基于 s 的参数) chop 原始图像，然后将该部分放置在 Canvas 中您想要的任何位置(基于 d 的参数) .如果你想保存一个切片，你可以使用 toDataUrl 方法来获取切片的 base64。 See this .

请记住，图像 src url 需要在加载 javascript 的域中，否则你会污染 Canvas 。您可以通过让服务器返回图像的 base64 表示来解决这个问题。

最后，大图像上的 toDataUrl 可能会“很慢”，因此请为此做好准备。

编辑——因为您不能依赖 Canvas ，所以您需要使用 SVG，更多浏览器支持更旧的 SVG。有像 Raphael.js 这样的库来帮助你。