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

Javascript clientside - create new images from existing image on web page

本文关键字：图像创建新图像客户端网页 Javascript 更新时间：2023-09-26

有没有一种方法可以在web浏览器中使用Javascript将图像剪切成瓷砖？

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

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

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

如果您使用的是现代浏览器，可以使用canvas。请参阅本教程并查看"切片"部分。基本上你可以使用

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

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

请记住，image-src-url需要位于javascript加载的域上，否则会污染画布。您可以通过让服务器返回图像的base64表示来绕过这个问题。

最后，大图像上的toDataUrl可能会"慢"，所以要做好准备。

EDIT——由于您不能依赖于画布，因此需要使用SVG，因为更老的SVG受到更多浏览器的支持。有像Raphael.js这样的库可以帮助你。