javascript canvas putImageData n'écrivant pas de données modifiées

Question

Je tente de désaturer une image. Je le charge actuellement, en analysant les données d'image, mais je n'arrive pas à l'écrire sur le canevas.

J'ai suivi toutes les instructions pour ce faire

context.putImageData(imagedata,0,0); 

que je fais, mais les données d'image ne change pas. "ctx" est le contexte de l'image qui est précédemment chargée en cours de conversion en niveaux de gris.

greyscale: function grayscale(ctx){ 

     var id = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height); 

     for(var i=0; i<id.height; i++){ 
      for(var e=0; i<id.width; i++){ 

       var index = (e*4)*id.width+(i*4); 

       var avg = (id.data[index] + id.data[index+1] + id.data[index+2])/3 

       id.data[index] = avg;  
       id.data[index+1] = avg; 
       id.data[index+2] = avg; 
      } 
     } 

     ctx.putImageData(id,0,0); 

    } 

Answer 1

Votre boucle interne compare et incrémente i au lieu de e.

Vous avez également e et j'ai basculé lorsque vous calculez l'index. Il devrait être (avec 4 refactorisée):

var index = 4 * (i*id.width + e); 

Answer 2

Peut-être pas la réponse que vous cherchez, mais vous avez regardé flot.js? De jolies fonctionnalités graphiques et le code source est disponible pour lecture.

Answer 3

le problème est ici:

for(var e=0; i<id.width; i++){ 

votre "e" est élève pas