将图像数组与 javascript 组合（有或没有 canvas）

Question

我想创建一条图像并合成一个新图像，例如 image = [image0-image1-image2].

我们将使用：

images = ['https://upload.wikimedia.org/wikipedia/commons/5/55/Al-Farabi.jpg',
    'https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg',
 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/3D_coordinate_system.svg/10000px-3D_coordinate_system.svg.png']

我想把上面的外拍，拼贴出来。我想在后台进行。

我了解到可以在 dom 之外使用 canvas 元素；为了看我在做什么，我将在这里使用 canvas 元素。

// create an off-screen canvas using document.createElement('canvas')
// here I use a canvas in DOM cause I cannot find a way to displayed the final collage 
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

// set its dimension to target size
canvas.width = 1200;
canvas.height = 630;

并发现三种不同的行为，我认为应该给出相同的结果。你能解释一下为什么吗？

如果我手动复制并粘贴每张图片的控制台代码，一次一张在此处输入代码`

var image = new Image();
// i is the i-th element in images
image.src = images[i]; 
image.onload = function() {
    context.save();
    context.drawImage(image, canvas.width * 0.3 * i, 0, canvas.width*0.3, canvas.height);
}

我可以看到元素一个挨着一个放置，就像我希望的那样。

但是如果我一次复制所有三段代码，无论是在一个循环中，我只能看到放在中的最后一张图像三个不同的位置：

for (var i = images.length; i <= 0; i++) {
var image = new Image();
image.src = images[i];
  image.onload = function(){
        context.save();
        context.drawImage(image, canvas.width*0.3 * i, 0, canvas.width*0.3, canvas.height); 
  }
}

所以我想，也许这是在加载图像后使用回调的问题 - 我尝试了以下但没有任何反应：canvas 保持为空。

// my callback
function addImage(image, position){
      image.onload = function(){
          context.save();
          context.drawImage(image, canvas.width*0.3 * position, 0, canvas.width*0.3, canvas.height); 
      }         
}

function loadImages (images, callback) {
  for (var i = images.length-1; i >= 0; i--) {
    var image = new Image();
    image.src = images[i];
    callback(image, i);
   }
}


// canvas will stay empty:
loadImages(images, addImage);

你能帮忙弄清楚这三个部分的区别，并弄清楚如何将一组图像组合成一个图像吗？

可能在后台，然后我想通过 ajax 保存图像并 post。

Answer 1

在您的循环示例中，所有 onload 函数都共享循环中相同的 i 和 image 变量。但是 onload 函数是在循环完成后调用的回调函数。因此，所有 onload 函数都使用循环完成后的相同 i 和 image 值。您需要创建一个本地作用域，以便每个 onload 函数都有自己的 i 和 image 值。例如...

for (var i = 0; i < images.length; i++) {
    var image = new Image();
    image.src = images[i];
    image.onload = function(image, i) {
        return function(){
           context.drawImage(image, canvas.width*0.3 * i, 0, canvas.width*0.3, canvas.height); 
        }
    }(image, i);
}

将图像数组与 javascript 组合（有或没有 canvas）

combine array of images with javascript (with or without canvas)

javascript

canvas

image

callback

html5-canvas