使用Javascript将img元素拆分为四个大小相等的较小img元素

Chi*_*apa 2 html javascript split image

我试图找出如何获取给定img元素,并使用Javascript将其拆分img为四个相等大小的图块.也就是说,原始图像的左上象限将成为其自己的img元素,与其他三个象限相同.但是,我对如何做到这一点感到茫然.有人可以提供一个起点或解释如何/如果这样做?它必须是粗暴的像素操纵吗?

Bry*_*ley 5

我相信这里最好的解决方案是使用画布.唯一需要注意的是原始图像必须在本地提供或通过CORS提供.完成此解决方案的步骤是:

  1. 选择图像,或通过javascript设置图像的来源(如果没有显示)
  2. 在图像上加载,创建4个画布,每个画布大小为图像的1/4
  3. 使用drawImage,将每个四分之一的图像绘制到每个小画布上
  4. 获取每个画布的每个图像源(canvas.toDataUrl)
  5. 创建新的图像元素并将其源设置为每个新源

可以在链接的codepen示例中查看整个解决方案.

codepen示例