HTML5 - canvas : image gary

HTML

<canvas id="myCanvas" width="200" height="276"></canvas>

JQuery 1.9.1

$(function(){
  function drawImg(imgObj){
    var ctx=$('#myCanvas')[0].getContext('2d');
    //設定繪圖物件的位置與大小
    var _x=0,_y=0,_w=$('#myCanvas').width(),_h=($('#myCanvas').height()-10)/2;
    
    ctx.drawImage(imgObj,_x,_y,_w,_h);//繪製要被複製的圖
    var imgData=ctx.getImageData(_x,_y,_w,_h);//擷取複製範圍
    var data=imgData.data;//取的複製範圍的data
    console.log(data.length);
    for(var i=0;i<data.length;i+=4){

      //設定RGB的灰色值
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      data[i]=brightness;//設定red的新值
      data[i+1]=brightness;//設定green的新值
      data[i+2]=brightness;//設定blue的新值
    };
    ctx.putImageData(imgData,_x,_h+10);//將處理完成的圖秀出
  };
  var imgObj= new Image();//設置新的image物件
  imgObj.crossOrigin='anonymous';//設置跨域使用為匿名
  $(imgObj).load(function(){
    drawImg(this);//驅動drawImg
  });
  imgObj.src = 'https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg';
});

主要使用function :

1. drawImg(imgObj) - 自製function，複製一個圖片並改變色階為黑白圖片。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/ou6ftL57/