HTML5 Canvas flip fonction verticale fonctionne dans Firefox mais pas Chrome ou Safari. Pourquoi?

Question

Voici le code qui fonctionne parfaitement bien dans Firefox, mais je ne comprends pas pourquoi cela ne fonctionne pas dans les navigateurs Webkit! Remarque: Im utilisant jQuery pour sélectionner l'élément canvas.

(function() 
    { 
     flipV=function(imageData) 
     { 
      var n = new Array(); 
      var d = imageData.data; 
     // loop through over row of pixels 
      for (var row=0;row<imageData.height;row++) 
      { 
      // loop over every column 
       for (var col=0;col<imageData.width;col++) 
       { 
        var si,di,sp,dp; 

       // source pixel 
        sp=(imageData.width*row)+col; 

       // destination pixel 
       dp=(imageData.width*((imageData.height-1)-row))+col; 

       // source and destination indexes, will always reference the red pixel 
       si=sp*4; 
        di=dp*4; 

        n[di]=d[si]; // red 
        n[di+1]=d[si+1]; // green 
        n[di+2]=d[si+2]; // blue 
        n[di+3]=d[si+3]; // alpha 
       } 
      } 
      imageData.data=n; 

      return imageData; 
     }; 

     var imgs = ['/images/myimage.png']; 

     var $c=$('#canvas'); 
     var cxt=$c[0].getContext('2d'); 


     var w=$c.width(); 
     var h=$c.height(); 

     var img1 = new Image(); 
     img1.onload=function() 
     { 
      cxt.drawImage(img1,0,0,img1.width,img1.height,0,0,w,h); 
      imageData = flipV(cxt.getImageData(0,0,w,h)); 
      cxt.putImageData(imageData,0,0) 

     }; 
     img1.src=imgs[0]; 

    } 
)(); 

Answer 1

Edit: Je joue avec cela un peu, et ai eu à travailler. Le problème est quand quand vous définissez imageData.data = n. Il semble que Chrome/WebKit ne fonctionne pas avec un autre tableau data. Pour que cela fonctionne, j'ai passé l'objet de contexte à flipV et j'ai appelé createImageData(imageData.width, imageData.height) pour obtenir un nouvel objet ImageData, définir n = newImageData.data et renvoyer newImageData.

Je vais laisser le reste ici pour référence:

Il y a un moyen plus facile et très probablement plus rapide pour retourner une image cependant, qui fonctionnera à travers les domaines. Vous pouvez utiliser la fonction scale pour retourner automatiquement tout ce que vous dessinez sur l'axe y. Vous avez juste besoin d'être sûr d'appeler save() et restore() et n'oubliez pas d'ajuster l'emplacement puisque tout est retourné.

function drawVFlipped(ctx, img) { 
    ctx.save(); 
    // Multiply the y value by -1 to flip vertically 
    ctx.scale(1, -1); 
    // Start at (0, -height), which is now the bottom-left corner 
    ctx.drawImage(img, 0, -img.height); 
    ctx.restore(); 
}