javascript - HTML drawImage 不适用于 Chrome。我尝试了我找到的所有提示

Question

我注意到我的绘制函数在 Chrome 上不起作用，在 Firefox 中一切正常并且绘制函数:

   Map.prototype.generate = function(){
        var ctx = document.createElement("canvas").getContext("2d");        
        ctx.canvas.width = this.width;
        ctx.canvas.height = this.height;    

        var rows = ~~(this.width/32);
        var columns = ~~(this.height/32);

        var imageObject = document.createElement("img");
        imageObject.src='ground.png';


        for (var i = 0; i < rows; i++) {        
            for (var j=0; j <columns; j++) {  
                ctx.drawImage(imageObject,i*32,j*32,32,32); 
            }   
        }       

        // store the generate map as this image texture
        this.image.src = ctx.canvas.toDataURL("image/jpg");                 

        // clear context
        // ctx = null;
    }

关于为什么它只在 Firefox 中工作有什么想法吗？

Answer 1

尝试进行此更改:

   var imageObject = document.createElement("img");

   /// create a reference to current 'this'
   var me = this;

   /// need this as loading is async
   imageObject.onload = function() {    

       for (var i = 0; i < rows; i++) {        
           for (var j=0; j <columns; j++) {  
               console.log("1");
               /// use 'this' = image
               ctx.drawImage(this, i*32,j*32,32,32); 
           }   
       }       

       // store the generate map as this image texture
       /// 'me' as 'this' is here the image
       me.image.src = ctx.canvas.toDataURL("image/jpg");                 
   }

   imageObject.src='ground.png';