Pages

0

練習 - html5 圖片彩色轉黑白


點選上面這張圖片就可以看到效果~

這是今天練習的一個特殊效果，
利用 html5 對於圖片上每一點像素的處理，
將彩色的圖片轉換成黑白的圖片，
其中用到的程式其實不難，
難是難在將圖片上每個像素轉換為矩陣的觀念與原理~
這個網站對於圖片像素轉換有相當詳細的介紹
而我再進行彩色轉黑白之前
也實際上繪製了一個 2x2 並帶有四個顏色的小圖做為前置作業的練習
圖片彩色轉黑白最重要的就是利用了 html5 裡頭
getImageData、imageData、putImageData 這三個指令
而 imageData 就是表現圖片每個像素在陣列中的長相(RGBA)

因此要轉成黑白最重要的觀念
就是 RGB 三色的數值必須相同，才可以讓彩色變成黑白
再利用 for 迴圈的方式，讀取圖片中每一個像素的數值
乘上一些數字(經驗法則得出來的數值)
就會成為每一個像素所對應的灰階數值
如此一來當迴圈將每個像素都處理完畢
彩色圖片就會變成灰階的圖片了~

但這邊有一個在練習的時候相當要注意的地方
就是利用 html5 讀取圖片的模式
如果沒有經過 IIS 的頁面或是圖片
以及是從外部載入的非同一個伺服器下的圖片
瀏覽器本身會有保護的機制而無法正常運作轉換
javascript 會出現以下兩個錯誤訊息：
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
是以後練習要注意的地方

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d"); 

var pic = new Image();
pic.src="img/20120529_color.jpg";

pic.addEventListener("load",eventShipLoaded,false);

function eventShipLoaded(){
 imagecolor();
}

function imagecolor(){
 context.drawImage(pic,0,0);
 var imageData = context.getImageData(0,0,329,202);
 var data = imageData.data;

 for (var i = 0; i < data.length; i += 4) {
  var brightness = 0.4 * data[i] + 0.5 * data[i + 1] + 0.2 * data[i + 2];
  data[i] = brightness; //red
  data[i + 1] = brightness; //green
  data[i + 2] = brightness; //blue
  data[i + 3] = 255; //alpha
 }

 context.putImageData(imageData, 0, 0);
}

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言