開源本身寫的圖片轉Ascii碼圖工具

GitHub地址：https://github.com/qiangzi772...

若是以爲不錯能夠給個star或者提出你的建議

---

img2Ascii，基於JS的圖片轉ASCII示意圖。

效果

轉碼前圖片

轉碼後圖片

構建

npm install 或者 yarn install

以後經過

npm run dev

便可打開項目

使用

如下代碼在main.js中

const Img2Ascii=require('./index');
const img=require('./assets/av.png');

new Img2Ascii(img,(nSrc,img)=>{
    const nImg = new Image();
    nImg.src = nSrc;
    nImg.style.width = img.width + 'px';
    nImg.style.height = img.height + 'px';
    nImg.onload = () => {
        document.body.appendChild(nImg);
        document.getElementById('tip').style.display='none';
    }
});

Img2Ascii方法須要傳入兩個參數，第一個參數是圖片路徑，第二個參數是圖片轉換完畢後的回調函數，須要本身在回調函數中注入新生成的圖片節點，不然看不到效果。

實現思路

把圖片在canvas中繪製後，利用getImageData接口獲取圖片的rgba，計算rgba值轉換爲對應的ASCII碼，在適當的位置進行換行，而後總體轉換便完成。

瓶頸

目前項目的瓶頸存在於html2canvas這個插件，把圖片轉成ASCII碼在瀏覽器中輸出是十分快速的，可是後期將輸出的ASCII碼轉換成圖片時，使用了html2canvas插件，這個插件在轉換圖片的過程當中十分緩慢，致使最後的輸出緩慢。接下來會把html2canvas這個插件換成使用別的插件實現，忘廣大網友提供一些轉圖片的插件。

---

除此以外我還寫有draggable拖拽庫以及ant-template模板引擎，若是以爲不錯能夠給個star。