通过javascript把图片转化为字符画 推荐
2013-10-24 08:52
281 查看
1.获取上传图片对象数据
Javascript无法直接获取本地上传的图片的数据,html5可以解决这一问题 。html5里面的FileReader interface可以把图片对象的数据读到内存,然后通过接口的进度事件(Progress Events)访问这些数据。浏览器支持:Internet Explorer: 10+Firefox: 10+
Chrome: 13+
Opera: 12+
Safari: partial
代码片段:var reader = new FileReader(); //建立一个FileReader接口
reader.readAsDataURL(fileBtn.files[0]); //fileBtn为文件上传控件对象
reader.onload = function () { //在onload事件中访问图像数据
img. reader.result; }
2.获取图像对象像素点
图像对象的getImageData方法返回一个对象,每个像素点的
rgba值都保存在其
data属性下面,这是一个一位数组, 也就是说,
rgba分别对应一个值,然后接着就是一下像素点的
rgba,假设
getImageData.data的值为
[1,2,3,4,5,6,7,8], 那么
getImageData对象范围就包含了 2 个像素点,第一个像素点的
rgba值分别是
1,2,3,4,第二个像素点的就是
4,5,6,7,8。 因此,我们在取每个像素点的
rgba值的时候其
index应该在像素点的索引值上乘以
4,然后通过
getGray()计算灰度。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.根据rgb值计算灰度
不同的RGB空间,灰阶的计算公式有所不同,常见的几种RGB空间的计算灰阶的公式如下:1、简化 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、简化 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)// 根据rgb值计算灰度
function getGray(r, g, b) {
return 0.299 * r + 0.578 * g + 0.114 * b;
}
4.根据灰度生成相应字符
把不同的灰度替换成相应的字符,原则上灰度越深的像素应该用越复杂的字符,具体什么字符可以自由替换,这只是一个测试版本。代码片段:// 根据灰度生成相应字符
function toText(g) {
if (g <= 30) {
return ’8′;
} elseif (g > 30 && g <= 60) {
return ’&’;
} elseif (g > 60 && g <= 120) {
return ’$';
} elseif (g > 120 && g <= 150) {
return ’*';
} elseif (g > 150 && g <= 180) {
return ’o';
} elseif (g > 180 && g <= 210) {
return ’!';
} elseif (g > 210 && g <= 240) {
return ’;';
} else {
return‘.’;
}
}
到这次我们的工作就完成得差不多啦,上面只给出了一些代码的片段,把原理疏通了一下,具体怎么实现大家可以自由发挥,下面给出一个示例,把源码也贴出来跟大家分享。查看示例PS:已经把这个demo整合到我博客的小工具里了(通过模板实现)去看看?下载地址
相关文章推荐
- 通过javascript把图片转化为字符画
- 通过javascript把图片转化为字符画
- 通过javascript把图片转化为字符画
- 通过javascript把图片转化为字符画
- 通过javascript把图片转化为字符画
- 通过javascript把图片转化为字符画
- 通过javascript把图片转化为字符画
- python小项目--图片转化为字符画
- JavaScript - AJAX 通过 FormData 上传 form 表单中的所有数据(text 文本,files 图片等二进制文件)
- JavaScript通过select动态更换图片的方法
- 基于javascript代码实现通过点击图片显示原图片
- 用JavaScript将Canvas内容转化成图片的方法
- HTML5将图片转化成字符画
- JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
- 基于canvas将图片转化成字符画
- asp javascript 通过放大切换图片实现类似屏保效果
- JavaScript通过mouseover()实现图片变大效果的示例
- 动态生成二维码图片后通过js(JavaScript)或jq实现网页图片转base64格式下载
- javascript 通过定时循环检测获取快速获取图片实际大小的宽高