Canvas 實現位圖轉像素畫

ACb0y 發布于2019-08-21 11:28 / 2708人閱讀

摘要：灰度值的計算公式，由值計算閾值處理的方法實現閾值灰度計算公式去掉圖透明將圖像還原大小反鋸齒處理小圖經過放大默認是模糊的，將置為才能清晰顯示像素點。

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;

完整的代碼已經上傳至 github（https://github.com/chuiliu/the-pixel-art）

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

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

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

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

原文鏈接：Canvas 實現位圖轉像素畫

GPU云服務器云服務器音視頻如何實現音畫同步位圖顯示位圖壓縮位圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86740.html

Canvas在移動端繪制模糊的原因與解決辦法

摘要：不過，在測試過程中卻發現，在移動端的瀏覽器上，繪制的內容展示十分模糊如下圖，經過分析之后發現是由于移動端高清屏幕引起的。這也是為什么高清屏更加細膩的原因。由于一些移動端的兼容性原因，我們某個項目需要前端將pdf轉換成在移動端頁面可直接觀看的界面。為了方便解決，我們采用了pdf.js這個插件，該插件可以將pdf轉換成canvas繪制在頁面上。不過，在測試過程中卻發現，在移動端的瀏覽器上...

Airmusic 2019-08-23 17:10 評論0 收藏0
Canvas在移動端繪制模糊的原因與解決辦法

摘要：不過，在測試過程中卻發現，在移動端的瀏覽器上，繪制的內容展示十分模糊如下圖，經過分析之后發現是由于移動端高清屏幕引起的。這也是為什么高清屏更加細膩的原因。由于一些移動端的兼容性原因，我們某個項目需要前端將pdf轉換成在移動端頁面可直接觀看的界面。為了方便解決，我們采用了pdf.js這個插件，該插件可以將pdf轉換成canvas繪制在頁面上。不過，在測試過程中卻發現，在移動端的瀏覽器上...

jas0n 2019-08-29 18:45 評論0 收藏0
JavaScript 編程精解中文第三版十七、在畫布上繪圖

摘要：貝塞爾曲線方法可以繪制一種類似的曲線。不同的是貝塞爾曲線需要兩個控制點而不是一個，線段的每一個端點都需要一個控制點。下面是描述貝塞爾曲線的簡單示例。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Drawing on Canvas 譯者：飛龍協議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯部分參考了《JavaScript 編程精解（第 2...

habren 2019-08-23 18:19 評論0 收藏0