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上使用画布元素;为了看我正在做什么，我将在这里使用一个画布元素。

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

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

// 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发布。

Answer 1

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

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（带或不带画布）组合图像数组

1 个答案: