javascript - 是否可以将多个图像层收集到一个 Canvas 中？

Question

我有一个 div，其中有几个固定位置的图像，我想将它们放入一个 Canvas 中，以便我可以保存合成图片。这可能吗？

我通读了 w3schools 的 canvas 教程，并使用 MDN 检查了 API，并提出了以下不执行任何操作的代码...

<div id="pics" >
<img id="i1" class="images"
src="http://chris.chrisjneeds.com/images/stars/stars01.jpg" width="300" height="277" style="position: fixed;">
<img id="i2" class="images" 
src="http://chris.chrisjneeds.com/images/ships/ships26.png" width="300" height="277" style="position: fixed;">
</div>

<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3; horizontal-align: right; float: right">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
function myCanvas() {
var aImages = document.getElementsByClassName('images'),
      nImgsLen = aImages.length;
var oCanvas = document.getElementById("myCanvas");
var oCtx = oCanvas.getContext("2d");

for (var oImgData, nImgId = 0; nImgId < nImgsLen; nImgId++) {
  oImgData = oCtx.getImageData(0, 0, 300, 277); 
  oCtx.putImageData(oImgData, 0, 0);
}
var img=new Image();
img.src = oCanvas.toDataURL();
oCtx.drawImage(img,10,10);

}

我期待 Canvas 中的合成图像，但到目前为止我没有得到任何东西。请帮忙

Answer 1

当然，这是可能的，但不像您的代码那样。

getImageData/putImageData方法适用于 pixel manipulation对你的问题绝对没用。您的代码只是将刚刚创建的 Canvas 区域复制到自身(即什么都不做)。但您真正需要的是使用 drawImage 将图像一张一张地绘制到 Canvas 上。方法。另请注意，您不需要使用 toDataURL 方法(它主要用于图像发送/保存)因为您使用 drawImage 调用您已经需要合成图像 Canvas 。

所以你的代码应该是这样的:

...
var aImages = document.getElementsByClassName('images');
var oCanvas = document.getElementById("myCanvas");
var oCtx = oCanvas.getContext("2d");
for (var img of aImages) {
  oCtx.drawImage(img, 0, 0, img.width, img.height);
}