Javascript 如何使用HTML5 Canvas drawImage将图像切片放入单个<；部门>；元素？

我正在尝试拍摄一张图像，并将其分为20个片段，同时将这些片段显示在它们自己的div中，如下所示：

<div id="example" class="container">
  <div class="item slice1"></div>
  <div class="item slice2"></div>
  <div class="item slice3"></div>
  ...
</div>

---

关于如何分离画布中包含的切片以将其保存为slice1.jpg、slice2.jpg的任何想法。。。还是类似的？我想先修改div（因为它们是唯一的，所以我们可以使用id，这使下一步更容易一些）：

...

然后在代码中：

var i = 0,
    xPos = [0, 200, 350, ...];  //adjust to actual values

for(;i < xPos.length; i++) {
    canvas_context.drawImage(img, xPos[i], 0, 180, 300,  20, 20, 150, 300);
    var slice = canvas.toDataURL();

    var el = document.getElementById('slice' + i);
    el.src = slice;
}

var i=0，
xPos=[0200350，…]//调整到实际值
对于（；i

这将一次创建一个切片，将其作为数据url从画布中提取，并使用切片设置图像源

演示：

<div id="example" class="container">
    <img id="slice0" class="item" src="" alt ="" />
    <img id="slice1" class="item" src="" alt ="" />
    <img id="slice2" class="item" src="" alt ="" />
 ...
</div>

var i = 0,
    xPos = [0, 200, 350, ...];  //adjust to actual values

for(;i < xPos.length; i++) {
    canvas_context.drawImage(img, xPos[i], 0, 180, 300,  20, 20, 150, 300);
    var slice = canvas.toDataURL();

    var el = document.getElementById('slice' + i);
    el.src = slice;
}