Question

我想将图像目录预先加载到画布中，以便在需要时可以显示它们。

I found this question on stackoverflow 并且接受的答案非常有帮助。它们的函数遍历一系列图像位置，然后（我推测）将它们预先加载到画布上。

一旦使用此功能预加载，我实际上很难显示它们。我很清楚 -

的单图像加载方法

img = new Image();
img.src = imgLocation;
img.onload = function() {
  context.drawImage(img, 0, 0);
}

但由于它们已经加载，我假设我不需要使用img.onload或上述任何代码（context.drawImage除外）来实际显示图像

当我尝试从（我只能假设是带有所有图像的输出数组）加载图像时，我得到类型错误。当我在任何索引处检查数组中的内容（console.log()）时，它会显示[object, Object]

我的代码如下：

var framesArr = new Array();
var framesAmnt = 300; // we would normally get this number from the PHP side of things

function ldBtn(){

    //load all frames locations into framesArr
    var i=0;
    for (i=0;i<=(framesAmnt-1);i++){
        framesArr[i] = "frames/Frame" + i + ".png";
    }

    //preload them
    preloadImages(framesArr, preloadDone);
}

var deferreds = [];
var deferred;

function preloadImages (paths, callback) {

    $.each(paths, function (i, src) {
        deferred = $.Deferred(),
        img = new Image();

        deferreds.push(deferred);
        img.onload = deferred.resolve;
        img.src = src;
    });

    $.when.apply($, deferreds).then(callback);
}

function preloadDone(){
    //any old index number will do. *Shruggs*
    context.drawImage(deferreds[2], 0, 0); //this will cause a type error.
}

如何在画布上显示由preloadImages函数加载的图像？

我想我并不完全理解img = new Image(); img.src = imgLocation; img.onload = function()发生时会发生什么。 javascript / jquery将图像存储为什么？如果答案是'一个对象'那么为什么它不会加载这个数组中的对象？

提前感谢您提供任何建议。

Answer 1

首先，您需要将实际图像元素传递给drawImage方法。现在你传递延迟了。

接下来，Chrome和原生元素构造函数（new Image()）存在一个错误。

所以，只需使用document.createElement("img")即可完成相同的操作 - 没有错误。

请参阅相关错误：

关于画布： https://code.google.com/p/chromium/issues/detail?id=238071
根本原因：https://code.google.com/p/chromium/issues/detail?id=245296

我在这里创建了一个简化示例：http://jsfiddle.net/YVDpD/

在jquery / canvas中预加载图像“Uncaught TypeError：Type error”

1 个答案: