圖片轉ascii字符圖

效果圖

基本思路

1. 把圖片每一個像素點的信息拿出來，最重要的是拿到rgb的值

2. 把每一個像素點由rgb轉成灰度圖像，即0-255

3. 給0-255分級，把每一個等級的像素點轉換成ascii碼，完成

實現

第一步：獲取像素信息

經查閱，使用canvas的getImageData方法可完成此要求，以下

<canvas id="canvas"></canvas>
<script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    canvas.width=800;
    canvas.height=800;
    context.rect(0,0,800,800);
    context.fillStyle="red";
    context.fill();

    console.log(context.getImageData(0,0,800,800))
</script>

上述代碼指在canvas中鋪滿背景色爲red，同時用getImageData()方法輸出整個畫布800*800的每一個像素點。在控制檯咱們能夠看到console的結果：

咱們看到長度爲2560000，而咱們的寬*高才640000，這是怎麼回事，難道不是一個像素點對應getImageData()中的一位？咱們把2560000/640000，得出的結果值爲4，因此咱們能夠初步猜想，在getImageData()中，每一個像素點對應着四位。繼續往下看

從圖中咱們能夠看出0123爲一個循環，而此處咱們的像素點位紅色，根據r（紅）g（綠）b（黑），紅色的rgb應該爲(255,0,0)，因此0-3對應rgb的三個顏色取值，而第四個值應該是指代a（透明度）。

以上，咱們完成了getImageData()的初步認識

擴展：使用getImageData()作反轉圖

首先反轉的意思是指，把每一個像素點的每一個rgb值都與255相減（alpha的值不改變），減完以後的值再次組成圖片，此時獲得的新圖片就是咱們的反轉圖片。

方法以下：

<canvas id="canvas"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 800;
    canvas.height = 800;
    var img = new Image();
    img.src = "love.png";
    img.onload =function(){
        invert(this);
    };
    //    像素點的rgba數組
    function invert(img) {
        context.drawImage(img,0,0);
        //獲取圖片對象以及元素點的數組
        var img1 = context.getImageData(0, 0, 800, 800);
        var data = img1.data;
        //反轉rgba
        for (var i = 0, len = data.length; i < len; i += 4) {
            data[i]=255-data[i];
            data[i+1]=255-data[i+1];
            data[i+2]=255-data[i+2];
        }
        context.putImageData(img1, 0, 0);
    }
</script>

這段代碼的關鍵點在於，要拿到圖片對象，而且取得該對象的data像素點數據，在原對象上對數據進行修改後，使用putImageData方法，把修改後的圖片對象賦給canvas

效果以下：

原圖

效果圖

若是咱們能夠作反轉圖了，那麼也能夠思考下一個問題，其實咱們平時看的不少濾鏡效果，本質上就是改變像素點的rgba值，只是不一樣濾鏡效果的rgba算法不同，像咱們如今作的這個反轉效果也能夠算濾鏡的一種。

第二步：轉灰度圖

Gray Scale Image 或是Grey Scale Image，又稱灰階圖。把白色與黑色之間按對數關係分爲若干等級，稱爲灰度。灰度分爲256階。用灰度表示的圖像稱做灰度圖。

簡單來講，灰度圖就是咱們平時所說的黑白圖片，把普通圖片轉成灰度圖有如下幾種算法

1.浮點算法：Gray=R0.3+G0.59+B*0.11

2.整數方法：Gray=(R30+G59+B*11)/100

3.移位方法：Gray =(R76+G151+B*28)>>8;

4.平均值法：Gray=（R+G+B）/3;

5.僅取綠色：Gray=G；

有了上面咱們的反轉圖的經驗，此次作灰度圖轉換其實也很簡單，代碼以下：

//轉換灰度圖
    for (var i = 0, len = data.length; i < len; i += 4) {
        var avg=(data[i]+data[i+1]+data[i+2])/3;
        data[i]=avg;
        data[i+1]=avg;
        data[i+2]=avg;
    }

效果圖：

第三步：分級轉換成字符表示

接下來即是轉成字符來表示，先把字符分紅15級，即0-14，依次爲

var arr=["M","N","H","Q","$","O","C","?","7",">","!",":","–",";","."];

那麼要想把0-255轉換成0-14，因爲Math.floor(255/18)`的結果值爲14，方法以下：

var avg=(data[i]+data[i+1]+data[i+2])/3;
var num=Math.floor(avg/18);

因此基本代碼以下（注意換行的方法）：

function invert(img) {
    context.drawImage(img,0,0);
    //獲取圖片對象以及元素點的數組
    var img1 = context.getImageData(0, 0, 300, 300);
    var data = img1.data;
    //轉換灰度圖
    var arr=["M","N","H","Q","$","O","C","?","7",">","!",":","–",";","."];
    var result=[];
    for (var i = 0, len = data.length; i < len; i += 8) {
        var avg=(data[i]+data[i+1]+data[i+2])/3;
        var num=Math.floor(avg/18);
        result.push(arr[num]);
        if(i%1200==0&&i!=0){
            result.push("<br>")
        }
    }
    opt.innerHTML=result.join();
    document.body.appendChild(opt);
}