Javascript 将预加载的图像绘制到画布中

再一次，完全超出了我的深度，但我需要预加载一些图像，然后在加载“所有元素（包括xml文件等）”时将它们添加到页面中。图像和引用存储在一个数组中，供以后访问。试图从该数组中绘制图像会引发错误，但我知道它是可用的，因为我可以将其添加到页面：

preloadImages: function (loadList, callback) {
    var img;
    var loadedFiles = [];
     var remaining = loadList.length;
   $(loadList).each(function(index, address ) {
     img = new Image();
    img.onload = function() {
         --remaining;
          if (remaining <= 0) {
                callback(loadedFiles);
            }
         };
 img.src = loadList[index];
     loadedFiles.push({file: 'name of image to be loaded', image: img }); //Store the image name for later refernce and the image
    });


}

//WHEN CERTAIN OTHER CONDITIONS EXIST I CALL THE FUNCTION BELOW

buildScreen: function ( imageLocs, image){
//THIS FUNCTION LOOPS THROUGH imageLocs (XML) AND CREATES CANVAS ELEMENTS, ADDING CLASSES ETC AND DRAWS PART OF A SPRITE (image) 
        //INTO THE CANVASES CREATED
    var ctx = $('ID of CANVAS').get(0).getContext("2d");
    var x =  'position x in imageLocs'
        var y =  'position y in imageLocs'
        var w =  'width in imageLocs'
        var h =  'position x in imageLocs'
        ctx.drawImage(image, x,y, w, h, 0, 0, w, h); //THIS THROWS AN ERROR 'TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement'
        //$(image).appendTo("#innerWrapper") //YET I KNOW THAT IT IS AVAILABE AS THIS LINE ADDS THE IMAGE TO THE PAGE
    }

preload图像：函数（加载列表、回调）{
var-img；
var loadedFiles=[]；
剩余变量=loadList.length；
$（加载列表）。每个（函数（索引、地址）{
img=新图像（）；
img.onload=函数（）{
--剩余的；
如果（剩余我认为您的图像预加载程序不太正确，因为它对所有图像使用相同的
img
变量

我知道有一个很好用：
我认为您的图像预加载程序不太正确，因为它对所有图像使用相同的
img
变量

我知道有一个方法很有效：
问题
问题的原因是您将jQuery对象传递给本机函数，在本例中，
ctx.drawImage
，drawImage将仅支持本机对象

startSequence : function(){
  $('#innerWrapper').empty();
  var screenImageRef = $.grep(ST.imageFilesLoaded, function(e){ 
    return e.file == 'AtlasSheet'
  });
  var screenImage = $(screenImageRef[0].image);
  var imageLocsRef = $.grep(ST.xmlFilesLoaded, function(e){ 
    return e.file == 'IMAGELOCS'
  });
  var imageLocs = $(imageLocsRef[0].xml);
  //$(screenImage).appendTo("#innerWrapper") //appends screenImage 
  Utilis.buildScreen('1', imageLocs, screenImage, ST.didYouSeeIt, 'ST')
}

您的
screenImage
变量是由
$（screenImageRef[0].image）
创建的，这将返回一个包装本机映像对象的jQuery对象。要返回原始本机映像对象，请使用以下命令：

screenImage.get(0)

或

前者是jQuery支持的方式

解决方案
因此，对代码的修复应该是，更改以下行：

Utilis.buildScreen('1', imageLocs, screenImage.get(0), ST.didYouSeeIt, 'ST');

或更改buildScreen方法中的行：

ctx.drawImage(image.get(0), x,y, w, h, 0, 0, w, h);

…随便你喜欢哪个

调试时的混乱
追加图像时，所有操作似乎都正常工作的原因是，您使用jQuery追加图像，并且jQuery支持传递jQuery包装的元素。如果您尝试使用本机函数（即
Element.appendChild（）
）追加
screenImage
，您可能会遇到类似的错误

为了将来有所帮助，最好使用
console.log
来找出变量的实际类型/结构。在以前的
image
var上使用
console.log
会给出一个奇怪的jQuery包装对象转储（可能会发出警报），而不是预期的
[object HTMLImageElement]
或其他与图像/控制台相关的输出（取决于浏览器）。
问题
问题的原因是您将jQuery对象传递给本机函数，在本例中，
ctx.drawImage
，drawImage将仅支持本机对象

startSequence : function(){
  $('#innerWrapper').empty();
  var screenImageRef = $.grep(ST.imageFilesLoaded, function(e){ 
    return e.file == 'AtlasSheet'
  });
  var screenImage = $(screenImageRef[0].image);
  var imageLocsRef = $.grep(ST.xmlFilesLoaded, function(e){ 
    return e.file == 'IMAGELOCS'
  });
  var imageLocs = $(imageLocsRef[0].xml);
  //$(screenImage).appendTo("#innerWrapper") //appends screenImage 
  Utilis.buildScreen('1', imageLocs, screenImage, ST.didYouSeeIt, 'ST')
}

您的
screenImage
变量是由
$（screenImageRef[0].image）
创建的，这将返回一个包装本机映像对象的jQuery对象。要返回原始本机映像对象，请使用以下命令：

screenImage.get(0)

或

前者是jQuery支持的方式

解决方案
因此，对代码的修复应该是，更改以下行：

Utilis.buildScreen('1', imageLocs, screenImage.get(0), ST.didYouSeeIt, 'ST');

或更改buildScreen方法中的行：

ctx.drawImage(image.get(0), x,y, w, h, 0, 0, w, h);

…随便你喜欢哪个

调试时的混乱
追加图像时，所有操作似乎都正常工作的原因是，您使用jQuery追加图像，并且jQuery支持传递jQuery包装的元素。如果您尝试使用本机函数（即
Element.appendChild（）
）追加
screenImage
，您可能会遇到类似的错误

为了将来有所帮助，最好使用
console.log
来找出变量的实际类型/结构。在以前的
image
var上使用
console.log
会给出一个奇怪的jQuery包装对象转储（可能会发出警报），而不是预期的
[object HTMLImageElement]
或其他与图像/控制台相关的输出（取决于浏览器）。
是否确定
图像
（参数传递到
构建屏幕
）不是jQuery包装器对象，而不是纯js图像对象？显然，
preloimages
处理纯图像，但没有看到调用
buildScreen
的代码，无法确定传递的是什么。这就是调用buildScreen函数的原因，我可以用image startSequence:function（）附加#innerWrapper{$（'#innerWrapper'）.empty（）；var screenImageRef=$.grep（ST.imageFilesLoaded，函数（e）{return e.file=='AtlasSheet'}）；var screenImage=$（screenImageRef[0].image）；var-imageLocsRef=$.grep（ST.xmlFilesLoaded，函数（e）{return e.file==''IMAGELOCS'}）；var-IMAGELOCS=$（imageLocsRef[0].xml）；/$（screenImage）.appendTo（“#innerWrapper”）//appends screen image usis.buildScreen（'1'，imageLocs，screen image，ST.didYouSeeIt，'ST'）}感谢您提供的额外信息，我已经添加了一个应该会有帮助的答案。将来，如果您希望添加更多的信息或代码，只需编辑您的问题并添加“更新”如果你搜索其他问题，你会看到人们通常做什么：）你确定
image
（参数传递到
buildScreen
）不是jQuery包装器对象，而不是纯js图像对象？显然，
preloimages
处理纯图像，但没有看到调用
buildScreen
的代码，无法确定传递的是什么。这就是调用buildScreen函数的原因，我可以用image startSequence:function（）附加#innerWrapper{$（'#innerWrapper'）.empty（）；var screenImageRef=$.grep（ST.imageFilesLoaded，函数（e）{return e.file=='AtlasSheet'}）；var screenImage=$（screenImageRef[0].image）；var-imageLocsRef=$.grep（ST.xmlFilesLoaded，函数（e）{return e.file==''IMAGELOCS'}）；var-IMAGELOCS=$（imageLocsRef[0].xml）；/$（screenImage）.appendTo（“#innerWrapper”）//使用.buildScreen（'1'，imageLocs，screenImage，ST.didYouSeeIt，'ST'）附加屏幕图像。}谢谢您提供的额外信息，我