欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通過(guò)javascript把圖片轉(zhuǎn)化為字符畫(huà)

 更新時(shí)間:2013年10月24日 10:38:35   作者:  
平時(shí)我們都是使用軟件把圖片轉(zhuǎn)化為字符畫(huà),今天我就用JAVASCRIPT把圖片轉(zhuǎn)化成字符畫(huà),在娛樂(lè)中學(xué)習(xí)一些JS、HTML5、canvas的使用方法。

通過(guò)javascript把圖片轉(zhuǎn)化為字符畫(huà)

1.獲取上傳圖片對(duì)象數(shù)據(jù)
Javascript無(wú)法直接獲取本地上傳的圖片的數(shù)據(jù),html5可以解決這一問(wèn)題 。html5里面的FileReader interface可以把圖片對(duì)象的數(shù)據(jù)讀到內(nèi)存,然后通過(guò)接口的進(jìn)度事件(Progress Events)訪問(wèn)這些數(shù)據(jù)。
瀏覽器支持:
1、Internet Explorer: 10+
2、Firefox: 10+
3、Chrome: 13+
4、Opera: 12+
5、Safari: partial

復(fù)制代碼 代碼如下:

var reader = new FileReader();                        //建立一個(gè)FileReader接口 
reader.readAsDataURL(fileBtn.files[0]);        //fileBtn為文件上傳控件對(duì)象 
reader.onload = function () {                             //在onload事件中訪問(wèn)圖像數(shù)據(jù) 
    img.src = reader.result;  }

2.獲取圖像對(duì)象像素點(diǎn)
圖像對(duì)象的getImageData 方法返回一個(gè)對(duì)象,每個(gè)像素點(diǎn)的 rgba 值都保存在其 data 屬性下面,這是一個(gè)一位數(shù)組, 也就是說(shuō),rgba 分別對(duì)應(yīng)一個(gè)值,然后接著就是一下像素點(diǎn)的 rgba,假設(shè) getImageData.data 的值為 [1,2,3,4,5,6,7,8], 那么 getImageData 對(duì)象范圍就包含了 2 個(gè)像素點(diǎn),第一個(gè)像素點(diǎn)的 rgba 值分別是 1,2,3,4,第二個(gè)像素點(diǎn)的就是 4,5,6,7,8。 因此,我們?cè)谌∶總€(gè)像素點(diǎn)的 rgba 值的時(shí)候其index 應(yīng)該在像素點(diǎn)的索引值上乘以 4,然后通過(guò) getGray() 計(jì)算灰度。

復(fù)制代碼 代碼如下:

var imgData = c.getImageData(0, 0, img.width, img.height); 
var imgDataArr = imgData.data; 
var imgDataWidth = imgData.width; 
var imgDataHeight = imgData.height; 
for (h = 0; h < imgDataHeight; h += 12) { 
    for (w = 0; w < imgDataWidth; w += 6) { 
        var index = (w + imgDataWidth * h) * 4; 
        var r = imgDataArr[index + 0]; 
        var g = imgDataArr[index + 1]; 
        var b = imgDataArr[index + 2]; 
    } 

3.根據(jù)rgb值計(jì)算灰度
不同的RGB空間,灰階的計(jì)算公式有所不同,常見(jiàn)的幾種RGB空間的計(jì)算灰階的公式如下:
1、簡(jiǎn)化 sRGB IEC61966-2.1 [gamma=2.20]
Gray = (R^2.2 * 0.2126  + G^2.2  * 0.7152  + B^2.2  * 0.0722)^(1/2.2)
2、 Adobe RGB (1998) [gamma=2.20]
Gray = (R^2.2 * 0.2973  + G^2.2  * 0.6274  + B^2.2  * 0.0753)^(1/2.2)
3、Apple RGB [gamma=1.80]
Gray = (R^1.8 * 0.2446  + G^1.8  * 0.6720  + B^1.8  * 0.0833)^(1/1.8)
4、ColorMatch RGB [gamma=1.8]
Gray = (R^1.8 * 0.2750  + G^1.8  * 0.6581  + B^1.8  * 0.0670)^(1/1.8)
5、簡(jiǎn)化 KODAK DC Series Digital Camera [gamma=2.2]
Gray = (R^2.2 * 0.2229  + G^2.2  * 0.7175  + B^2.2  * 0.0595)^(1/2.2)

復(fù)制代碼 代碼如下:

// 根據(jù)rgb值計(jì)算灰度 
function getGray(r, g, b) { 
    return 0.299 * r + 0.578 * g + 0.114 * b; 

4.根據(jù)灰度生成相應(yīng)字符
把不同的灰度替換成相應(yīng)的字符,原則上灰度越深的像素應(yīng)該用越復(fù)雜的字符,具體什么字符可以自由替換,這只是一個(gè)測(cè)試版本。
代碼片段:

復(fù)制代碼 代碼如下:

// 根據(jù)灰度生成相應(yīng)字符 
function toText(g) { 
    if (g <= 30) { 
        return '8′; 
    } else if (g > 30 && g <= 60) { 
        return '&'; 
    } else if (g > 60 && g <= 120) { 
        return '$'; 
    }  else if (g > 120 && g <= 150) { 
        return '*'; 
    } else if (g > 150 && g <= 180) { 
        return 'o'; 
    } else if (g > 180 && g <= 210) { 
        return '!'; 
    } else if (g > 210 && g <= 240) { 
        return ';'; 
    }  else { 
        return ‘.'; 
    } 


到這次我們的工作就完成得差不多啦,上面只給出了一些代碼的片段,把原理疏通了一下,具體怎么實(shí)現(xiàn)大家可以自由發(fā)揮。猛點(diǎn)這里代碼下載地址

相關(guān)文章

  • canvas快速繪制圓形、三角形、矩形、多邊形方法介紹

    canvas快速繪制圓形、三角形、矩形、多邊形方法介紹

    本文主要介紹了使用canvas來(lái)繪制常見(jiàn)的各種圖形實(shí)例,并且會(huì)簡(jiǎn)單封裝一下繪制各圖形的方法,最后會(huì)分享給大家一個(gè)封裝好的快速繪制多邊形的方法。下面跟著小編一起來(lái)看下吧
    2016-12-12
  • JavaScript XML實(shí)現(xiàn)兩級(jí)級(jí)聯(lián)下拉列表

    JavaScript XML實(shí)現(xiàn)兩級(jí)級(jí)聯(lián)下拉列表

    用xml作為存儲(chǔ)容器,不用數(shù)據(jù)庫(kù),速度和效率高些。
    2008-11-11
  • JS前端加密算法示例

    JS前端加密算法示例

    這篇文章主要介紹了JS前端加密算法,結(jié)合實(shí)例形式分析了crypto-js具體用法與注意事項(xiàng),需要的朋友可以參考下
    2016-12-12
  • JS返回頁(yè)面時(shí)自動(dòng)回滾到歷史瀏覽位置

    JS返回頁(yè)面時(shí)自動(dòng)回滾到歷史瀏覽位置

    這篇文章主要介紹了JS返回頁(yè)面時(shí)自動(dòng)回滾到歷史瀏覽位置的相關(guān)知識(shí),本文給大家使用的是SessionStorage來(lái)存儲(chǔ)頁(yè)面內(nèi)容,在返回頁(yè)面時(shí)重新加載,具體實(shí)現(xiàn)代碼大家跟隨小編一起看看吧
    2018-09-09
  • 用JS生成UUID的方法實(shí)例

    用JS生成UUID的方法實(shí)例

    下面小編就為大家?guī)?lái)一篇用JS生成UUID的方法實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-03-03
  • JS圖片等比例縮放方法完整示例

    JS圖片等比例縮放方法完整示例

    這篇文章主要介紹了JS圖片等比例縮放方法,結(jié)合完整實(shí)例形式分析了javascript針對(duì)頁(yè)面圖片元素屬性操作的相關(guān)技巧,需要的朋友可以參考下
    2016-08-08
  • js繼承的實(shí)現(xiàn)代碼

    js繼承的實(shí)現(xiàn)代碼

    學(xué)著js的繼承,自己也寫(xiě)了個(gè)。感覺(jué)不是很好?,F(xiàn)在很多代碼都封裝成類(lèi)。
    2010-08-08
  • 淺談JavaScript 數(shù)據(jù)屬性和訪問(wèn)器屬性

    淺談JavaScript 數(shù)據(jù)屬性和訪問(wèn)器屬性

    下面小編就為大家?guī)?lái)一篇淺談JavaScript 數(shù)據(jù)屬性和訪問(wèn)器屬性。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-09-09
  • 純js實(shí)現(xiàn)頁(yè)面返回頂部的動(dòng)畫(huà)(超簡(jiǎn)單)

    純js實(shí)現(xiàn)頁(yè)面返回頂部的動(dòng)畫(huà)(超簡(jiǎn)單)

    下面小編就為大家?guī)?lái)一篇純js實(shí)現(xiàn)頁(yè)面返回頂部的動(dòng)畫(huà)(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • 深入理解JavaScript系列(2) 揭秘命名函數(shù)表達(dá)式

    深入理解JavaScript系列(2) 揭秘命名函數(shù)表達(dá)式

    網(wǎng)上還沒(méi)用發(fā)現(xiàn)有人對(duì)命名函數(shù)表達(dá)式進(jìn)去重復(fù)深入的討論,正因?yàn)槿绱?,網(wǎng)上出現(xiàn)了各種各樣的誤解,本文將從原理和實(shí)踐兩個(gè)方面來(lái)探討JavaScript關(guān)于命名函數(shù)表達(dá)式的優(yōu)缺點(diǎn)
    2012-01-01

最新評(píng)論