資訊專欄INFORMATION COLUMN
摘要：灰度值的計算公式，由值計算閾值處理的方法實現(xiàn)閾值灰度計算公式去掉圖透明將圖像還原大小反鋸齒處理小圖經(jīng)過放大默認是模糊的，將置為才能清晰顯示像素點。
2016 年快結(jié)束了，最后一天總要留下點什么。
前段時間迷上像素畫，折騰了好一段時間，后來思考了下，能不能用程序或者有什么圖像處理軟件能把一張圖片直接轉(zhuǎn)成像素風(fēng)格？
于是先谷歌一下，在豆瓣發(fā)現(xiàn)了這個很棒的小站，教你畫像素畫，其中有朋友分享一個PS處理的方法：位圖快速轉(zhuǎn)像素，這個方法處理對比度強的圖片效果是不錯的，于是我按照同樣的思路，嘗試用Canvas來完成同樣的效果，純粹只是不想打開PS。
看最終效果 or 不想折騰PS的 快戳這里：圖像轉(zhuǎn)換像素圖
思路將一張圖片縮小到一定的百分比，比如25%，這時候截圖，圖片將丟失一些像素信息，對的就是要這種效果。
使用PS的閾值功能，將此時的圖片處理，在設(shè)置合適的閾值下，讓圖片達到最佳顯示效果。
最后將圖片放大至看到像素點，就能看到我們要的像素化效果。
那么，用Canvas怎么實現(xiàn)呢？
首先應(yīng)該理解閾值的概念，閾值可以理解為臨界值，大于臨界值呈現(xiàn)一種狀態(tài)，小于臨界值又呈現(xiàn)另一種狀態(tài)。PS中閾值可以將圖片變成黑白圖像，閾值的范圍是0~255，假設(shè)閾值是192，則PS會將亮度小于192的像素點轉(zhuǎn)成黑色，將亮度大于192的轉(zhuǎn)成白色。
getImageDataCanvas的ImageData對象可以得到圖像的所有信息，imageData.data是一個保存著圖片像素信息的數(shù)組，數(shù)組中每個值的范圍是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數(shù)組做修改后，可以通過putImageData寫入修改后的像素數(shù)據(jù)。
ctx.putImageData(imageData, x, y);實現(xiàn) 縮小圖像
var scale = 0.25; ctx.drawImage(image, 0, 0, image.width * scale, image.height * scale);灰度化并閾值處理
為了實現(xiàn)最終效果，我這里是將圖片的所有像素信息先灰度化，替代亮度信息，然后每個像素點的灰度值與設(shè)定的閾值相比較，大于閾值的顯示為白色，小于閾值的顯示為黑色。
// 灰度值的計算公式，由rgb值計算 var gray = 0.299 * r + 0.587 * g + 0.114 * b;
閾值處理的方法實現(xiàn)：
/**
* [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);反鋸齒處理
小圖經(jīng)過放大默認是模糊的，將imageSmoothingEnabled置為false才能清晰顯示像素點。
ctx.imageSmoothingEnabled = false; ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false;
完整的代碼已經(jīng)上傳至 github（https://github.com/chuiliu/the-pixel-art）
來，看效果（左圖為原圖）：
對于對比度強的圖片，不進行閾值處理也可以有不錯的效果
最終效果還是可以，但是這個方法本身存在一定局限性，對于對比度不高的圖片效果很差，幾乎不適用。所以玩的時候是比較挑圖片的。
在線版僅支持高版本瀏覽器，歡迎試玩，快戳這里
原文鏈接：Canvas 實現(xiàn)位圖轉(zhuǎn)像素畫
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86740.html
摘要：不過，在測試過程中卻發(fā)現(xiàn)，在移動端的瀏覽器上，繪制的內(nèi)容展示十分模糊如下圖，經(jīng)過分析之后發(fā)現(xiàn)是由于移動端高清屏幕引起的。這也是為什么高清屏更加細膩的原因。 由于一些移動端的兼容性原因，我們某個項目需要前端將pdf轉(zhuǎn)換成在移動端頁面可直接觀看的界面。為了方便解決，我們采用了pdf.js這個插件，該插件可以將pdf轉(zhuǎn)換成canvas繪制在頁面上。不過，在測試過程中卻發(fā)現(xiàn)，在移動端的瀏覽器上...
摘要：不過，在測試過程中卻發(fā)現(xiàn)，在移動端的瀏覽器上，繪制的內(nèi)容展示十分模糊如下圖，經(jīng)過分析之后發(fā)現(xiàn)是由于移動端高清屏幕引起的。這也是為什么高清屏更加細膩的原因。 由于一些移動端的兼容性原因，我們某個項目需要前端將pdf轉(zhuǎn)換成在移動端頁面可直接觀看的界面。為了方便解決，我們采用了pdf.js這個插件，該插件可以將pdf轉(zhuǎn)換成canvas繪制在頁面上。不過，在測試過程中卻發(fā)現(xiàn)，在移動端的瀏覽器上...
摘要：貝塞爾曲線方法可以繪制一種類似的曲線。不同的是貝塞爾曲線需要兩個控制點而不是一個，線段的每一個端點都需要一個控制點。下面是描述貝塞爾曲線的簡單示例。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文：Drawing on Canvas 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分參考了《JavaScript 編程精解（第 2...
閱讀 972·2021-11-22 13:53
閱讀 2604·2021-10-15 09:40
閱讀 1088·2021-10-14 09:42
閱讀 3922·2021-09-22 15:59
閱讀 964·2021-09-02 09:47
閱讀 2540·2019-08-30 15:54
閱讀 1504·2019-08-29 17:14
閱讀 462·2019-08-29 15:15
