2016 年快結束了，最后一天總要留下點什么。

前段時間迷上像素畫，折騰了好一段時間，后來思考了下，能不能用程序或者有什么圖像處理軟件能把一張圖片直接轉成像素風格？

于是先谷歌一下，在豆瓣發現了這個很棒的小站，教你畫像素畫，其中有朋友分享一個PS處理的方法：位圖快速轉像素，這個方法處理對比度強的圖片效果是不錯的，于是我按照同樣的思路，嘗試用Canvas來完成同樣的效果，純粹只是不想打開PS。

看最終效果 or 不想折騰PS的 快戳這里：圖像轉換像素圖

思路

將一張圖片縮小到一定的百分比，比如25%，這時候截圖，圖片將丟失一些像素信息，對的就是要這種效果。

使用PS的閾值功能，將此時的圖片處理，在設置合適的閾值下，讓圖片達到最佳顯示效果。

最后將圖片放大至看到像素點，就能看到我們要的像素化效果。

那么，用Canvas怎么實現呢？

首先應該理解閾值的概念，閾值可以理解為臨界值，大于臨界值呈現一種狀態，小于臨界值又呈現另一種狀態。PS中閾值可以將圖片變成黑白圖像，閾值的范圍是0~255，假設閾值是192，則PS會將亮度小于192的像素點轉成黑色，將亮度大于192的轉成白色。

getImageData

Canvas的ImageData對象可以得到圖像的所有信息，imageData.data是一個保存著圖片像素信息的數組，數組中每個值的范圍是0~255，每四個值表示一個像素點的顏色信息，格式是這樣的：imageData.data = [像素點1的R, 像素點1的G, 像素點1的B, 像素點1的A, 像素點2的R, 像素點2的G, 像素點2的B, 像素點2的A, ... , 像素點n的A]。

var pixel = ctx.getImageData(x, y, width, height);

putImageData

對imageData.data數組做修改后，可以通過putImageData寫入修改后的像素數據。

ctx.putImageData(imageData, x, y);

實現

縮小圖像

var scale = 0.25;

ctx.drawImage(image, 0, 0, image.width * scale, image.height * scale);

灰度化并閾值處理

為了實現最終效果，我這里是將圖片的所有像素信息先灰度化，替代亮度信息，然后每個像素點的灰度值與設定的閾值相比較，大于閾值的顯示為白色，小于閾值的顯示為黑色。

// 灰度值的計算公式，由rgb值計算

var gray = 0.299 * r + 0.587 * g + 0.114 * b;

閾值處理的方法實現：

/**

* [convert description]

* @param {[type]} ctx [description]

* @param {[type]} imageData [description]

* @param {[type]} threshold [閾值]

* @return {[type]} [description]

*/

function convert(ctx, imageData, threshold) {

var data = imageData.data;

for (var i = 0; i < data.length; i += 4) {

// 灰度計算公式

var gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 *data[i + 2];

var color = gray >= threshold ? 255 : 0;

var alpha = data[i + 3];

data[i] = color; // red

data[i + 1] = color; // green

data[i + 2] = color; // blue

data[i + 3] = alpha >= threshold ? 255 : 0; // alpha, 去掉png圖透明

}

ctx.putImageData(imageData, 0, 0);

}

將圖像還原大小

ctx.drawImage(image, 0, 0, image.width / scale, image.height / scale);

反鋸齒處理

小圖經過放大默認是模糊的，將imageSmoothingEnabled置為false才能清晰顯示像素點。

ctx.imageSmoothingEnabled = false;

ctx.mozImageSmoothingEnabled = false;

ctx.webkitImageSmoothingEnabled = false;

ctx.msImageSmoothingEnabled = false;

來，看效果（左圖為原圖）：

對于對比度強的圖片，不進行閾值處理也可以有不錯的效果

最終效果還是可以，但是這個方法本身存在一定局限性，對于對比度不高的圖片效果很差，幾乎不適用。所以玩的時候是比較挑圖片的。

在線版僅支持高版本瀏覽器，歡迎試玩，快戳這里

總結

以上是生活随笔為你收集整理的python 将图片转换成像素画_Canvas 实现位图转像素画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。