<canvas id ="cvs51" width ="282" height = "384">
      votre navigateur n'accepte pas Canvas
</canvas>
<script>
var canv1 = document.getElementById('cvs51');
var context1 = canv1.getContext('2d');
var image1 = new Image();
image1.src = 'img/lyon.jpg'; //adresse de l'image
image1.onload = function () {
   context1.drawImage(this,0,0);
   var imageD = context1.getImageData(0,0,282,192);
var mapP = imageD.data;
   for ( var i=0; i < mapP.length; i +=4) {
var gris= 1/3 * (mapP[i]+mapP[i+1]+mapP[i+2]);
     mapP[i] = gris;
     mapP[i+1] = gris;
     mapP[i+2] = gris;
}; // fin for
context1.putImageData(imageD,0,193);
}; // fin fonction
   </script>

image source puis ..noir / blanc