是否可以将多个图像图层收集到一个画布中?

Question

我有一个div，其中有几个图像固定在适当的位置，我想将其放入单个画布中，以便保存合成图片。 这可能吗？

我通读了 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);

}

我期待画布中的合成图像，但到目前为止我什么也没得到。 请帮忙

Answer 1

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

getImageData/putImageData方法旨在进行像素操作，对您的问题绝对无用。您的代码只是将刚刚创建的画布的一个区域复制到自身中(即什么都不做(。但是您真正需要的是使用drawImage方法将图像一一绘制到画布上。另请注意，您不需要使用toDataURL方法(它主要用于图像发送/保存(，因为您drawImage调用时，画布中已经需要复合图像。

所以你的代码应该看起来像这样：

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

Answer 2

我问题的第二部分是"这样我就可以保存合成图片">

这是我从如何将图像从画布保存到磁盘中找到的

这是完整的代码(我希望它对某人有所帮助(

function getImgs4Canvas() {
var aImages=$("#cloneimages img");
var oCanvas = document.getElementById("imgCanvas");
var oCtx = oCanvas.getContext("2d");
for (var oimg of aImages) {
oCtx.drawImage(oimg, 0, 0, oimg.width, oimg.height);
}
var jpgFile = oCanvas.toDataURL('image/jpeg', 1.0);
// save the image as a jpg 'blob' in the user's download (default) directoy
ImageSaver.download_data_uri(jpgFile, "downloadimgtest");
}
var ImageSaver = {
// function to force-download from a data uri as a filename
// NB the download="filename" attribute isn't yet supported by safari
download_data_uri: function(dataURI, fileName) {
var tempUrl = ImageSaver.make_url_from_data(dataURI);
var link = $('<a href="' + tempUrl + '" id="download" download="' + fileName + '" target="_blank"> </a>');
$("body").append(link);
$("#download").get(0).click();
},
// function to generate a temporary browser index url for a datauri
// if a data-uri is larger than 2mb, chrome's address bar can't handle it.
// fortunately, you can blob it and then use a temporary blob url
make_url_from_data: function(dataURI) {
var blob = ImageSaver.make_blob(dataURI);
var tempUrl = URL.createObjectURL(blob);
return tempUrl;
},
// function to convert a datauri to a blob
// Blobs are temporary data structures that can hold binary data, and make that data accessible through a short url. They can probably do other things too; I have no idea.
make_blob: function(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
};
// write the ArrayBuffer to a blob, and you're done
return new Blob([ab], {
type: mimeString
});
}
}