如何创建一个图像生成器来组合多个图像？
更新我正在使用HTML5 canvas和jQuery / JS处理图像生成器。 我想要完成的是以下内容。
用户可以将2或最多3个图像（类型应为png或jpg）上传到canvas。 生成图像应该是1080×1920。 如果哈特仅上传2张图片，则图片为1080×960。 如果上传了3张图片。 每张图片的大小应为1080×640。
上传2或3张图像后，用户可以单击下载按钮获取合并后的图像，格式为1080x1920px。
IT应该使用html canvas来完成这项工作。
我想出了这个：
HTML：
Sorry, canvas not supported Generate jQuery的：
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.height = 400; canvas.width = 800; var img1 = loadImage('http://sofzh.miximages.com/javascript/0e829093-971c-4037-9c1b-864a7be1dbe8.png', main); var img2 = loadImage('http://sofzh.miximages.com/javascript/266px-Ikea_logo.svg.png', main); var minImages = 2; var imagesLoaded = 0; function main() { imagesLoaded += 1; if(imagesLoaded >= minImages) { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); ctx.drawImage(img1, 0, 0); // ctx.translate(canvas.height/2,canvas.width/2); // move to the center of the canvas // ctx.rotate(270*Math.PI/180); // rotate the canvas to the specified degrees // ctx.drawImage(img2,0,canvas.height/2); ctx.translate(-canvas.height/2,canvas.width/2); // move to the center of the canvas ctx.rotate(90*Math.PI/180); // rotate the canvas to the specified degrees ctx.drawImage(img2,-img2.width/2,-img2.width/2); ctx.restore(); // restore the unrotated context } } function loadImage(src, onload) { var img = new Image(); img.onload = onload; img.src = src; console.log(img); return img; }
上面的代码将创建canvas并将两个图像（现在在JS中硬编码）放置到创建的canvas上。 它将旋转90度，但不会定位到右角。 第二张图像也应位于第一张图像旁边。
希望有人可以帮我解决每个图像的旋转和定位问题。 如果有任何问题，请告诉我。
工作小提琴： https ： //jsfiddle.net/8ww1x4eq/2/
看看更新的jsFiddle ，那是你想要的吗？
看看这里的图像旋转
更新了jsFiddle ，绘制了多个图像。
注意：
- 保存脚本只是一种懒惰的方法，以确保在保存merged_image之前我已经加载了外部脚本…
- 样本脚本中没有同步，注意
addToCanvas是在图像加载事件上调用的，这里可能存在竞争条件（但我怀疑它，因为图像被加载到客户端的内存中）
function addToCanvas(img) { // resize canvas to fit the image // height should be the max width of the images added, since we rotate -90 degree // width is just a sum of all images' height canvas.height = max(lastHeight, img.width); canvas.width = lastWidth + img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); if (lastImage) { ctx.drawImage(lastImage, 0, canvas.height - lastImage.height); } ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees ctx.drawImage(img, -canvas.height, lastWidth); lastImage = new Image(); lastImage.src = canvas.toDataURL(); lastWidth += img.height; lastHeight = canvas.height; imagesLoaded += 1; }
您可以使用toDataURL 。 但通过这种方式，用户必须执行诸如将图像另存为…
var img = canvas.toDataURL("image/png");
然后设置为例如img 结果 src：
$("#result").attr("src",img);
Canvas已经是一个Image。
canvas和img是可以互换的，因此不需要添加canvas.toDataURL的冒险步骤，它可能会失败，具体取决于图像源域。 只需将canvas视为原样，然后将其放入DOM中即可。 转换为jpg不会节省空间（实际上是资源饥饿的操作），因为img需要在显示之前进行解码。
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.height = 400; canvas.width = 800; document.body.appendChild(canvas); // add to the end of the document // or add it to a containing element var container = document.getElementById("containerID"); // or use JQuery if(container !== null){ container.appendChild(canvas); }