<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 :
- drawImg(imgObj) - 自製function,複製一個圖片並改變色階為黑白圖片。
Result
JSFiddle
https://jsfiddle.net/MickeyChen/ou6ftL57/
沒有留言:
張貼留言