将预装的图像绘制到画布中 [英] draw preloaded image into canvas

问题描述

再次，完全从我的深度，但我需要预先加载一些图像，然后将其添加到页面，当'所有元素（包括xml文件等）加载。图像和参考被存储在阵列中以供稍后访问。尝试从该数组绘制和图像引发一个错误，但我知道它是可用的，我可以只是append到页面：

  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：'要加载的映像的名称'，image：img}）; //存储映像名称以供以后引用和映像
}）; 
 
 
} 
 
 //当某些其他条件存在时，我调用下面的函数
 
 buildScreen：function（imageLocs，image）{ 
 //通过imageLocs（XML）创建这个函数lOOPS并创建CANVAS元素，添加类ETC和绘制SPRITE的一部分（图像）
 //进入CANVASES创建
 var ctx = $ 'ID of CANVAS'）。get（0）.getContext（2d）; 
 var x ='position x in imageLocs'
 var y ='imageLocs'中的位置y 
 var w ='imageLocs'中的宽度
 var h ='imageLocs中的位置x '
 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）//我知道它是AVAILABE as this LINE将图像添加到页面
} 
  

解决方案

问题

问题是因为您将一个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）//追加screenImage 
 Utilis.buildScreen（'1'，imageLocs，screenImage，ST.didYouSeeIt，'ST'）
 } 
   screenImage  var由 $（screenImageRef [0] .image），这将返回一个jQuery对象，该对象包装本机映像对象。要返回原始本机映像对象，请使用以下命令：
  screenImage.get（0）
  
或
  screenImage [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 找出什么类型/结构变量实际上有。使用 console.log 在你以前的 image  var会给一个奇怪的对象转储的jQuery包装而不是预期的 [object HTMLImageElement] 或一些其他图像/控制台相关的输出（取决于浏览器）。
 
Once again, completely out of my depth but I need to preload some images and then add them to the page when 'all elements (including xml files etc.)' are loaded. The images and references are stored in an array for later access. Trying to draw and image from that array throws an error yet I know it is available as I can just appendTo the page:
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
    }

解决方案
Problem

The issue is caused because you are passing a jQuery object to a native function, in this case ctx.drawImage, drawImage will only support native objects.
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')
}
Your screenImage var is created by $(screenImageRef[0].image), this will return a jQuery object that wrappers the native image object. To get back to the original native image object use the following:
screenImage.get(0)
or
screenImage[0]
The former is the jQuery supported way.

Solution

So the fix to your code should be either, changing the following line:
Utilis.buildScreen('1', imageLocs, screenImage.get(0), ST.didYouSeeIt, 'ST');
Or changing the line in the buildScreen method:
ctx.drawImage(image.get(0), x,y, w, h, 0, 0, w, h);
... Whichever you prefer.

Confusion when debugging

The reason why everything appears to work when you append the image, is because you are using jQuery to append the image, and jQuery supports being passed jQuery wrapped elements. If you had tried to append your screenImage using native functions i.e. Element.appendChild() you would have got similar errors.

Just to help in future, it's always best to use console.log to find out what type/structure a variable actually has. Using console.log on your previous image var would have given a strange object dump of the jQuery wrapper (which might have rang alarm bells), rather than the expected [object HTMLImageElement] or some other image/console related output (depending on the browser).

                        
这篇关于将预装的图像绘制到画布中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！