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

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

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

如何使用HTML5 Canvas drawImage将图像切片放入单独的<div>元素？</div>

1 个答案: