我试图弄清楚如何获取给定的 img 元素，并使用 Javascript 将 img 拆分为四个大小相等的图 block 。也就是说，原始图像的左上象限将成为其自己的 img 元素，与其他三个象限相同。但是，我不知道如何才能做到这一点。有人可以提供一个起点或解释如何/是否可以做到这一点吗？它必须是残酷的像素操作吗？
最佳答案
我相信最好的解决方案是使用 Canvas 。唯一需要注意的是，原始图像必须在本地提供或通过 CORS 提供。完成此解决方案的步骤是:
- 选择图片，或通过javascript设置图片来源(如果不显示)
- 加载图像，创建 4 个 Canvas ，每个 Canvas 大小为图像的 1/4
- 使用drawImage，将图像的每个四分之一绘制到每个小 Canvas 上
- 获取每个 Canvas 的每个图像源(canvas.toDataUrl)
- 创建新的图像元素并将其来源设置为每个新来源
可以在链接的 codepen 示例中查看整个解决方案。
关于javascript - 使用 Javascript 将 img 元素拆分为四个大小相等的较小 img 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21067261/