通过Javaｓｃｒｉｐｔ将图片转换为人物画

1。获取上传的图像对象数据
Javaｓｃｒｉｐｔ不能直接从本地上传的图片数据，HTML5可以解决这个问题。在HTML5 FileReader接口可以读取图像对象在内存中的数据，然后访问这些数据通过进步进度界面事件（事件进展）。
浏览器支持：
1，Internet Explorer：10 +
2，火狐：10 +
3，铬：13 +
4，歌剧：12 +
5，Safari：部分
复制代码代码如下所示：
var =新读者（有）； / /创建一个FileReader接口
reader.readasdataurl（filebtn。文件{ 0 }）； / / filebtn文件上传控件对象
（reader.onload =功能）{ / /在OnLoad事件访问图像数据
img.src =读者。结果；}


2。获取图像对象的像素点。
getimagedata方法返回一个对象的图像，每个像素的RGBA的值存储在数据属性下面，这是一个数组，也就是说，RGBA对应一个值，然后是一个像素的RGBA，假设getimagedata.data值{ 1,2,3,4,5,6,7,8 }，然后getimagedata对象范围包含2个像素，第一像素值分别为1、2、3、4 RGBA，第二像素4,5,6,7, 8.therefore，当我们把每个像素点的RGBA值，该指标应乘以4的像素点的指标值，然后通过getgray计算灰度（）。
复制代码代码如下所示：
无功imgdata = c.getimagedata（0, 0，img.width，IMG。高度）；
无功imgdataarr = imgdata.data；
Var imgDataWidth = imgData.width;
无功imgdataheight = imgdata.height；
为（H = 0；h＜imgdataheight；H = 12）{
对（W = 0；W < imgdatawidth；W = 6）{
VaR指标=（W + imgdatawidth * H）* 4；
VAR r = imgdataarr {指数+ 0 }；
var g = imgdataarr {指数+ 1 }；
var b = imgdataarr {指数+ 2 }；
}
}


三.根据RGB值计算灰度值
在不同的RGB空间中，灰度的计算公式是不同的。几种常见RGB空间中灰度的计算公式如下：
1。简化的sRGB iec61966-2.1 {γ= 2.20 }
灰色=（r = 2.2 * 0.2126 + G = 2.2 * 0.7152 + B 2.2 2.2）0.0722（1 ）
2，Adobe RGB（1998）{伽玛= 2.20 }
灰色=（r = 2.2 * 0.2973 + G = 2.2 * 0.6274 + B 2.2 2.2）0.0753（1 ）
3，苹果RGB伽玛= 1.80 }
灰色=（r = 1.8 * 0.2446 + G = 1.8 * 0.6720 + B 1.8 1.8）0.0833（1 ）
4、配色RGB {γ= 1.8 }
灰色=（r = 1.8 * 0.2750 + G = 1.8 * 0.6581 + B 1.8 1.8）0.0670（1 ）
5。简化柯达直流系列数码相机{伽玛= 2.2 }
灰色=（r = 2.2 * 0.2229 + G = 2.2 * 0.7175 + B 2.2 2.2）0.0595（1 ）
复制代码代码如下所示：
根据RGB计算灰度值
功能getgray（R，G，B）{
返回0.299 * r + 0.578 * G + 0.114 * *；
}


4。根据灰度生成相应字符
将不同的灰度替换为相应的字符。原则上，像素越深，字符越复杂，具体字符可以自由替换。这只是一个测试版本。
代码段：
复制代码代码如下所示：
根据相应的字符灰色
功能文本（G）{
如果（g < = 30）{
返回8；
否则如果（g > 30 { g＝60）
返回' '；
否则如果（g > 60 { g＝120）
返回' $ '；
否则如果（g > 120 { g＝150）
*返回；
否则如果（g > 150 { g＝180）
return'o；
否则如果（g > 180 { g＝210）
回去！；
否则如果（g > 210 { g＝240）
返回；
其他{ }
返回；
}
}

到目前为止，我们几乎完成了同样的工作。上面只给出了几段代码。我们已经挖掘了这些原则，以及如何实现这些原则。