ASCII圖

在莒南等地區，都構建了全面的區域性戰略布局，加強發展的系統性、市場前瞻性、產品創新能力，以專注、極致的服務理念，為客戶提供網站設計制作、網站設計 網站設計制作按需定制開發,公司網站建設,企業網站建設,成都品牌網站建設,營銷型網站,外貿網站制作,莒南網站建設費用合理。

在終端執行各種命令的時候經常會看到一些終端里顯示出來的"圖片"，遠看仿佛一張圖，近看則是一個個的 ASCII碼，它們 大致長這樣子

而今天我們要做的則是用JS把一張給定的圖片轉換成這種用ASCII字符組成的“ASCII圖” 先看看最終效果，假設我們給定的圖片是這樣子的，

這是代碼處理后的結果，用了I'mYasic這8個字符來表示,還是可以分辨出大致的輪廓的。

單級圖

而另一種圖則是單極圖，也就是黑白圖片，還是剛剛那張圖片，輸出如下

基礎知識

這兩種圖都是比較簡單的，只需要以下知識即可

• HTML5中的Canvas
• 像素的RGB值
• JS中的Canvas相關API
  

制作ASCII圖

一般來說，在計算機當中，我們看到的大多數圖片都是由一個個像素點構成的，每一個像素點則由 RGBA 構成，在 css 中我們時常用的rgba(255, 255, 255, 255, 0)就是一組RGBA值， 也即是RGB三原色和Alpha透明度。當然一張圖片不是僅僅包含所有像素點數據的，還包括一些描述信息，也稱為圖片的 profile，這一部分小則幾KB,多則幾百KB，是圖片壓縮中經常被處理的部分。

那么對于圖片中每一個像素點來說，只要我們改變了其相應的RGBA的值，最終的圖片也就變了樣子。而修改哪些像素點、修改成什么樣的RGBA，則決定著最終的圖片風格，這也是許多濾鏡采用的機制。

基于以上的理論知識，我們的ASCII圖制作思路也就有了。ASCII圖其實就是將一張圖中的一個像素點，通過計算其RGBA的值，劃分成給定的幾個量化值，在這里由于我們用的I'mYasic這8個字符來表示，所以要分成8組值，每一組用一個ASCII字符來表示，最終就能組成一幅完整的ASCII圖片。

接下來就是具體的代碼實現。

獲取圖片的像素信息

通過 Canvas API 中的getImageData()方法我們可以獲得一個對象，這個對象的屬性里包含一個一維數組 data，這個一維數組每4個元素為一組，代表了一個 canvas 中指定范圍的全部像素信息，并且依次是 RED，GREEN，BLUE，ALPHA。因此我們可以先把圖片放進 canvas 中，再調用這個方法拿到像素。

不過我很疑惑為什么 data 是一個一維數組，通常處理的圖片都是二維圖片，如果用二維數組來表示像素信息，代碼讀取和處理會方便很多，也更容易理解。甚至可以用一個三維數組，專門用一個維度來放置RGBA信息。

獲取圖片像素信息的代碼如下所示

var canvasContext = canvas.getContext("2d");
canvasContext.drawImage(sourceImg, 0, 0);
var imgData = canvasContext.getImageData(0 , 0, sourceImg.width, sourceImg.height);
var imgDataArray = imgData.data;

另外有需要云服務器可以了解下創新互聯建站www.js-pz168.com，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站題目：詳解使用JS如何制作簡單的ASCII圖與單極圖-創新互聯
URL分享：http://www.js-pz168.com/article12/dhdgdc.html

成都網站建設公司_創新互聯，為您提供App設計、App開發、做網站、網站設計公司、網頁設計公司、定制網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯