如何使用HTML5 Canvas drawImage將圖像切片放入單個圖像 <div> 元素？

Question

我正在嘗試拍攝一張圖像並將其切成20個切片，並將這些切片也顯示在自己的div中，如下所示：

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

我更希望圖像在CSS中顯示為背景，盡管我也可以使這項工作添加到。 我發現了一個將一個圖像切成多個切片的簡單示例：

function drawOnCanvas() {
  var canvas = document.getElementById("example");
   if (canvas.getContext){
    var canvas_context = canvas.getContext("2d");
    var img = document.getElementById("image");
      canvas_context.drawImage(img, 0, 0, 180, 300, 20, 20, 150, 300);
      canvas_context.drawImage(img, 200, 0, 180, 300, 200, 20, 150, 300);
      canvas_context.drawImage(img, 350, 0, 180, 300, 380, 20, 150, 300);
  }
}

關於如何分離畫布中包含的切片以將其另存為slice1.jpg，slice2.jpg ...或類似內容的任何想法？ 真的卡在這個

Answer 1

我將首先修改div（由於它們是唯一的，我們不妨使用id來簡化下一步）：

<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;
}

這將一次創建一個切片，將其作為數據URL從畫布中提取，並使用該切片設置圖像源。

演示：
http://jsfiddle.net/GV8vW/5/