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

Question

有没有办法在网络浏览器中使用Javascript将图片剪切成图块？

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

正如我现在所看到的，我可以在用户选择图片和图块数量后从服务器重新加载图块，但我想尽可能跳过重新加载。

修改
关于KP对浏览器级别支持的评论，我想有一个不需要HTML5支持的解决方案，如果可能的话。

Answer 1

如果您正在处理现代浏览器，您可以使用canvas进行操作。请参阅this tutorial并查看“切片”部分。基本上你可以使用

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

按照您喜欢的方式切割原始图像（基于s的参数），并将该部分放在画布中的任何位置（基于d的参数）。如果您想要保存切片，可以使用toDataUrl方法获取切片的base64。 See this

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

最后，大型图片上的toDataUrl可能会“慢”，所以请为此做好准备。

编辑 - 因为你不能依赖画布，你需要使用SVG，更老的浏览器支持SVG。像Raphael.js这样的图书馆可以帮助您。