圖片轉ascii字符圖

wing324 發布于2019-08-20 15:07 / 438人閱讀

摘要：以上，我們完成了的初步認識擴展使用做反轉圖首先反轉的意思是指，把每個像素點的每個值都與相減的值不改變，減完之后的值再次組成圖片，此時得到的新圖片就是我們的反轉圖片。第二步轉灰度圖或是，又稱灰階圖。用灰度表示的圖像稱作灰度圖。

效果圖

基本思路

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

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

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

實現 第一步：獲取像素信息

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

上述代碼指在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的值不改變），減完之后的值再次組成圖片，此時得到的新圖片就是我們的反轉圖片。

方法如下：

這段代碼的關鍵點在于，要拿到圖片對象，并且取得該對象的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("
")
        }
    }
    opt.innerHTML=result.join();
    document.body.appendChild(opt);
}

GPU云服務器云服務器字符串轉Ascii php圖片轉字符程序 unicode轉ascii ascii字符串壓縮

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

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

圖片轉ascii字符圖

摘要：以上，我們完成了的初步認識擴展使用做反轉圖首先反轉的意思是指，把每個像素點的每個值都與相減的值不改變，減完之后的值再次組成圖片，此時得到的新圖片就是我們的反轉圖片。第二步轉灰度圖或是，又稱灰階圖。用灰度表示的圖像稱作灰度圖。效果圖 showImg(https://segmentfault.com/img/remote/1460000008704923?w=1813&h=845); 基...

SnaiLiu 2019-08-29 12:12 評論0 收藏0
圖片轉ascii字符圖

摘要：以上，我們完成了的初步認識擴展使用做反轉圖首先反轉的意思是指，把每個像素點的每個值都與相減的值不改變，減完之后的值再次組成圖片，此時得到的新圖片就是我們的反轉圖片。第二步轉灰度圖或是，又稱灰階圖。用灰度表示的圖像稱作灰度圖。效果圖 showImg(https://segmentfault.com/img/remote/1460000008704923?w=1813&h=845); 基...

0xE7A38A 2019-08-01 16:32 評論0 收藏0
超不清視頻播放器-用Python將視頻轉成字符

摘要：一幅圖像全部轉成字符序列后，就可以直接在控制臺輸出了。讀取視頻使用了，并直接用它提供的方法轉了灰度圖，在之前的文章中也有過介紹，計算機視覺開發利器這一步比較重要，因為有的視頻分辨率很高，直接一個像素轉一個字符的話量太大，所以先縮小圖片。今天分享的這段代碼，看起來沒啥實際用處，而且有些反潮流，因為現如今大家看視頻都追求更高分辨率的超清畫質，而我們這個，是一個超不清的視頻播放器：在...

DobbyKim 2019-07-30 18:43 評論0 收藏0
開源自己寫的圖片轉Ascii碼圖工具

摘要：地址如果覺得不錯可以給個或者提出你的建議，基于的圖片轉示意圖。瓶頸目前項目的瓶頸存在于這個插件，把圖片轉成碼在瀏覽器中輸出是十分快速的，但是后期將輸出的碼轉換成圖片時，使用了插件，這個插件在轉換圖片的過程中十分緩慢，導致最后的輸出緩慢。 GitHub地址：https://github.com/qiangzi772... 如果覺得不錯可以給個star或者提出你的建議 img2Ascii...

Yangyang 2019-08-20 17:53 評論0 收藏0