成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

圖片轉(zhuǎn)ascii字符圖

wing324 / 447人閱讀

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

效果圖

基本思路

把圖片每個(gè)像素點(diǎn)的信息拿出來(lái)，最重要的是拿到rgb的值

把每個(gè)像素點(diǎn)由rgb轉(zhuǎn)成灰度圖像，即0-255

給0-255分級(jí)，把每個(gè)等級(jí)的像素點(diǎn)轉(zhuǎn)換成ascii碼，完成

實(shí)現(xiàn) 第一步：獲取像素信息

經(jīng)查閱，使用canvas的getImageData方法可完成此要求，如下

上述代碼指在canvas中鋪滿背景色為red，同時(shí)用getImageData()方法輸出整個(gè)畫布800*800的每個(gè)像素點(diǎn)。在控制臺(tái)我們可以看到console的結(jié)果：

我們看到長(zhǎng)度為2560000，而我們的寬*高才640000，這是怎么回事，難道不是一個(gè)像素點(diǎn)對(duì)應(yīng)getImageData()中的一位？我們把2560000/640000，得出的結(jié)果值為4，所以我們可以初步猜測(cè)，在getImageData()中，每個(gè)像素點(diǎn)對(duì)應(yīng)著四位。繼續(xù)往下看

從圖中我們可以看出0123為一個(gè)循環(huán)，而此處我們的像素點(diǎn)位紅色，根據(jù)r（紅）g（綠）b（黑），紅色的rgb應(yīng)該為(255,0,0)，所以0-3對(duì)應(yīng)rgb的三個(gè)顏色取值，而第四個(gè)值應(yīng)該是指代a（透明度）。

以上，我們完成了getImageData()的初步認(rèn)識(shí)

擴(kuò)展：使用getImageData()做反轉(zhuǎn)圖

首先反轉(zhuǎn)的意思是指，把每個(gè)像素點(diǎn)的每個(gè)rgb值都與255相減（alpha的值不改變），減完之后的值再次組成圖片，此時(shí)得到的新圖片就是我們的反轉(zhuǎn)圖片。

方法如下：

這段代碼的關(guān)鍵點(diǎn)在于，要拿到圖片對(duì)象，并且取得該對(duì)象的data像素點(diǎn)數(shù)據(jù)，在原對(duì)象上對(duì)數(shù)據(jù)進(jìn)行修改后，使用putImageData方法，把修改后的圖片對(duì)象賦給canvas

效果如下：

原圖

效果圖

如果我們可以做反轉(zhuǎn)圖了，那么也可以思考下一個(gè)問(wèn)題，其實(shí)我們平時(shí)看的很多濾鏡效果，本質(zhì)上就是改變像素點(diǎn)的rgba值，只是不同濾鏡效果的rgba算法不一樣，像我們現(xiàn)在做的這個(gè)反轉(zhuǎn)效果也可以算濾鏡的一種。

第二步：轉(zhuǎn)灰度圖 
Gray Scale Image 或是Grey Scale Image，又稱灰階圖。把白色與黑色之間按對(duì)數(shù)關(guān)系分為若干等級(jí)，稱為灰度?；叶确譃?56階。用灰度表示的圖像稱作灰度圖。

簡(jiǎn)單來(lái)說(shuō)，灰度圖就是我們平時(shí)所說(shuō)的黑白圖片，把普通圖片轉(zhuǎn)成灰度圖有以下幾種算法

1.浮點(diǎn)算法：Gray=R0.3+G0.59+B*0.11


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


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


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


5.僅取綠色：Gray=G；

有了上面我們的反轉(zhuǎn)圖的經(jīng)驗(yàn)，這次做灰度圖轉(zhuǎn)換其實(shí)也很簡(jiǎn)單，代碼如下：

//轉(zhuǎn)換灰度圖
    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;
    }

效果圖：

第三步：分級(jí)轉(zhuǎn)換成字符表示

接下來(lái)便是轉(zhuǎn)成字符來(lái)表示，先把字符分成15級(jí)，即0-14，依次為

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

那么要想把0-255轉(zhuǎn)換成0-14，由于Math.floor(255/18)`的結(jié)果值為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);
    //獲取圖片對(duì)象以及元素點(diǎn)的數(shù)組
    var img1 = context.getImageData(0, 0, 300, 300);
    var data = img1.data;
    //轉(zhuǎn)換灰度圖
    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);
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82010.html

相關(guān)文章

  • 圖片轉(zhuǎn)ascii字符圖

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

    SnaiLiu 評(píng)論0 收藏0

  • 圖片轉(zhuǎn)ascii字符圖

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

    0xE7A38A 評(píng)論0 收藏0

  • 超不清視頻播放器-用Python將視頻轉(zhuǎn)成字符

    摘要：一幅圖像全部轉(zhuǎn)成字符序列后，就可以直接在控制臺(tái)輸出了。讀取視頻使用了，并直接用它提供的方法轉(zhuǎn)了灰度圖，在之前的文章中也有過(guò)介紹，計(jì)算機(jī)視覺開發(fā)利器這一步比較重要，因?yàn)橛械囊曨l分辨率很高，直接一個(gè)像素轉(zhuǎn)一個(gè)字符的話量太大，所以先縮小圖片。 今天分享的這段代碼，看起來(lái)沒啥實(shí)際用處，而且有些反潮流，因?yàn)楝F(xiàn)如今大家看視頻都追求更高分辨率的超清畫質(zhì)，而我們這個(gè)，是 一個(gè)超不清的視頻播放器 ： 在...

    DobbyKim 評(píng)論0 收藏0

  • 開源自己寫的圖片轉(zhuǎn)Ascii碼圖工具

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

    Yangyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<