HTML5 - canvas : imagData

HTML

<!--使用crossOrigin="anonymous"解決跨域存取圖片的問題，
參考連結https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image-->
<img src="https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg" width="200" 
crossOrigin="anonymous">
<canvas id="myCanvas" width="200" height="133"></canvas>

JQuery 1.9.1

$(function() {
  function drawImg(imgObj) {
    var ctx = $('#myCanvas')[0].getContext('2d');
    var _iow = imgObj.width;//呼叫的圖形寬度
    var _ioh = imgObj.height;//呼叫的圖形高度
    var _iox = 0;//將要複製的圖形之起始x基準點
    var _ioy = 0;//將要複製的圖形之起始y基準點
    ctx.drawImage(imgObj, _iox, _ioy, _iow, _ioh);//將呼叫的物件寫入畫布中
    var cImg = ctx.getImageData(_iox, _ioy, _iow, _ioh);//設定要複製的資料範圍
    for (var i = 0; i <= cImg.data.length; i += 4) {//每四筆就loop一次
      cImg.data[i] = 255 - cImg.data[i];//Rad-用255色去剪掉Red原本的值
      cImg.data[i + 1] = 255 - cImg.data[i + 1];//green-用255色去剪掉green原本的值
      cImg.data[i + 2] = 255 - cImg.data[i + 2];//blue-用255色去剪掉blue原本的值
      cImg.data[i + 3] = 255;//alpha-維持原樣不變
    }
    ctx.putImageData(cImg, 0, 0);//將改變過顏色的圖片於原位覆蓋上去
  }
  $('img').load(function() {
    drawImg(this);//這邊的this=$('#img')
  }).each(function() {//執行完$('#img')的載入後，就遍歷$('#img')
    if (this.complete) $(this).load();//如果html的這張圖片載入成功，＄('img')就再執行load內容一次
  });
});

主要使用function :

1. crossOrigin - 結合合適的CROS響應頭，就可實踐跨域使用<img>，這裡有更想詳細的說明https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image。
2. complete - HTML DOM complete 屬性，可返回瀏覽器是否已完成圖片的加載。
3. getImageData - 複製畫布上指定的像素範圍，getImageData(將要拷貝的起始x位置, 將要拷貝的起始y位置, 將要拷貝的寬度, 將要拷貝的高度)。
4. imageData - getImageData拷貝的圖片中每個像素的值，imageData.data[red:value,green:value,blue:value,alpha:value]。

   語法	解說
   rad	0 ~ 255
   green	0 ~ 255
   blue	0 ~ 255
   alpha	0 ~ 255（0為全透明，255為不透明）

5. putImageData - 將從getImageData取的的資料放回畫布，putimageData(要放回畫布的物件名稱, 要放回畫布上的x座標, 要放回畫布上的y座標, 以自身為基準的左移幅度-可選, 以自身為基準的下移幅度-可選, 放上畫布時的寬度-可選, 放上畫布時的高度-可選)

Result

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