0

我正在尝试拍摄图像并将其切成 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 ... 或类似内容的任何想法？真的停留在这个

4

1 回答 1

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

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

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

于 2013-05-28T18:31:29.303 回答