程式設計雜筆

[程設雜筆] html5 canvas 截取jpeg和png檔後的簡單影像處理

最近在寫有關canvas截取圖,下載的程式,因為想要同時支援兩個檔案型態,所以遇到一些影像處理的問題。我覺得有趣,畢竟我沒有修過任何有關這方面的課,把這些操作實際記錄下來。此外,這篇還會包含一些色彩顥示的記錄。

首先,先大略講一下canvas截圖的功能,附上網址:

http://blog.xuite.net/vexed/tech/56169024-HTML5+Canvas+%E5%8F%A6%E5%AD%98%E5%9C%96%E6%AA%94

此外,只要把png換成jpeg,就可以下載jpeg檔了。


運用canvas下載png檔,理所當然,背景是透明的,圖檔如下:

但是用jpeg下載,就比較詭異了,如果直接下載,而不做任何處理的話,會生成如下,背景自動都給上黑色:

這樣是很好看沒錯,不過,不是我想要的,我想要一開始背景就是白色的,和canvas在網頁上的一樣。當然,也可以一開始就把canvas全部都上白色,但是這樣我們就不能做png了,所以,勢必在getImageData()之後,要再對影像做處理。下面提供一連串的方法。

1.因為png檔的背景都是透明的,所以我們就找透明的pixel,然後全部都設成白色,程式碼如下:

downloadImg=context.getImageData(panelWidth/2-downloadCanvasWidth/2+1,0,downloadCanvasWidth-1,canvasHeight);//這行是讀我們要下載的圖檔
for(var i=0;i<downloadImg.data.length;i+=4){
  if(downloadImg.data[i+3]==0){//只要發現這格是透明的,那就把它設成白色
    downloadImg.data[i]=255;
    downloadImg.data[i+1]=255;
    downloadImg.data[i+2]=255;
    downloadImg.data[i+3]=255; 
  }
}
downloadContext.putImageData(downloadImg,0,0);

這是影像處理後的結果,可以發現橘色旁邊會有一點黑邊,而字也不是圓狀,而是有鋸齒痕。我推斷是截下來的圖還會包括一旁邊邊的色塊,而這些色塊,不是像我們canvas在畫畫一樣是零和的,而是有漸層的。本來我以為我們用canvas的一些內建方法畫,pixel的alpha不是0,就是255,但我錯了。這麼做是為了讓圖更柔和,所以才有一個漸近的效果。

後來,我也嘗試一些方法,譬如

if(downloadImg.data[i+3]<128)

之類的,但效果都不是很好。

2.第二個方法是,直接建一個全白的圖,從我們截下來的圖來看,只要alpha不等於0的,我們就把它填到我們的全白畫紙上

downloadImg=context.getImageData(panelWidth/2-downloadCanvasWidth/2+1,0,downloadCanvasWidth-1,canvasHeight);//這行是讀我們要下載的圖檔
var tmpImg=downloadImg;
context.beginPath();
context.fillStyle='rgb(255,255,255)';
context.fillRect(0,0,canvasWidth,canvasHeight);//清空canvas
downloadImg=context.getImageData(panelWidth/2-downloadCanvasWidth/2+1,0,downloadCanvasWidth-1,canvasHeight);//取得全白canvas
for(var i=0;i<downloadImg.data.length;i+=4){
  if(tmpImg.data[i+3]!=0){
    downloadImg.data[i]=tmpImg.data[i];
    downloadImg.data[i+1]=tmpImg.data[i+1];
    downloadImg.data[i+2]=tmpImg.data[i+2];
    downloadImg.data[i+3]=tmpImg.data[i+3];
  }
}
downloadContext.putImageData(downloadImg,0,0);

效果其實跟上面一樣。

3.把判斷條件稍微改一下

if(tmpImg.data[i+3]==255)

可以發現,剛剛黑邊的問題被解決了。但是其實還有個很大的問題,就是依然是鋸齒狀的。不過,至少現在看起來比剛剛好多了。

(圖沒法弄的很清楚,因為它是用畫的,像素很小)


 

把jpeg和png拿來做比較,發現png顯示的比較清楚而且又不用做額外的處理,顏色也比較接近真實螢幕顯示的顏色,無怪乎toDataURL()預設的檔格式就是png。

以下由上而下分別是螢幕顯示、jpeg、png顯示,可以看出png顯示的比較好看,也比較正確。查了一下資料,原來jpeg的壓縮比比較好,但顏色較少,這也是為什麼我們的相片都是用jpeg檔。

本來想放這張圖片在我自己筆電上和雙幕上的顯示差異,但好像做不出來。這部分的調整Ubuntu可以參考系統設定值>顏色做調整。不過我不是這方的專家,所以就調好玩的就好,至於以後選色的話,還是在我的雙螢幕上選好了。

 

參考資料:

http://baike.baidu.com/item/jpg

http://baike.baidu.com/view/5342.htm

http://www.w3school.com.cn/tags/canvas_getimagedata.asp

2 thoughts on “[程設雜筆] html5 canvas 截取jpeg和png檔後的簡單影像處理

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s