[javascript-snippet]使用javascript+html5实现图片的灰度处理
// 源码出自：潇湘夜雨
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<img src="" id='stuPic' style="display:none">
<input type="file" id="loadFile">
<canvas id="canvas" width="600" height="600"></canvas>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function grey(image){
var imagedata = context.getImageData(0,0,image.width,image.height);
var imagedata1 = context.createImageData(image.width,image.height);
var pix = imagedata.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
var grayscale = pix[i] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
pix[i] = grayscale; // red
pix[i+1] = grayscale; // green
pix[i+2] = grayscale; // blue
// alpha
}
context.putImageData(imagedata, 0, 0);
}
$("#loadFile").change(function(){
var file = $(this)[0].files[0];
var fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onload = function (e){
$("#stuPic").attr("src", this.result).load(function(){
context.drawImage(this,0,0);
var s = context.getImageData(100,50,350,150);
grey(this);
context.putImageData(s,100,50);
});
};
});
</script>
</body>
</html>
[javascript-snippet]使用javascript+html5实现图片的灰度处理的更多相关文章
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript根据文件名后缀判断是否图片文件
//JavaScript根据文件名后缀判断是否图片文件 //图片文件的后缀名 var imgExt = new Array(".png",".jpg",&quo ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- HTML5将图片转化成字符画
HTML5将图片转化成字符画 字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能.其实原理很简单:扫描图片相应位置 ...
- Html5选择图片并及时预览图片
以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...
- JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
- 第一百二十九节，JavaScript，理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- 2021年3月-第03阶段-前端基础-JavaScript基础语法-JavaScript基础第01天
1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...
随机推荐
- HDOJ4734 F(x)
原题链接 数位\(DP\),继续套记搜模板 定义\(f[pos][now]\),\(pos\)是枚举到的位数,\(now\)是\(A\)的权值减去当前枚举的数的权值,即剩余权值大小. 然后就是记搜模板 ...
- 码云-中国的github
# 域名城 https://www.domain.cn/ # 码云 https://gitee.com
- Epson Pos Printer for .net
注:因发现各网站爬虫随意收集文章,故做此声明:版权归原作者(Leaf.Duan)所有,转载还请著名出处,谢谢 设备信息 Epson TM-T88IV Thermal Printer,爱普生 TM-T8 ...
- 使用Narrator读取RichTextBlock内容
先测试基本的RichTextBlock,看能否读取. 测试RichTextBlock中哪些子控件是可以被读取的. 结论:只有Hyperlink能Tab到,能被读取. 问题:RichTextBlock在 ...
- [VBS]检测计算机各硬件信息
1)批处理脚本:Rhea_HardwareInfoCollector.bat 调用VBScript脚本Rhea_HardwareInfoCollector.vbs,并将结果打印到文件Rhea_Resu ...
- 2018.11.02 NOIP训练 停车场（线段树）
传送门 这是一道困饶了我一年的题. 其实就是去年去NOIP提高组试水的时候考的模拟题 但当时我水平不够,跟ykykyk一起杠了一个下午都没调出来. 今天终于AAA了. 其实就是一个维护最长连续0101 ...
- IBM X3650 M3/M4的服务器装系统
IBM X3650 M3/M4的服务器一般都有两块以上的硬盘.所以如果没有做RAID,那首先应该做好raid 磁盘阵列.本文装系统的前提是RAID已经做好. 一般安装系统的方式为先在IBM官网下载对应 ...
- 关于java项目中的XML文件
一,xml的机制 1.xml文件会在服务器启动的时候进行加载 2.加载完成后根据xml文件里面配置的属性对集成的对象进行属性和行为赋予 3.xml会有很多不同的标签,每个标签都有它特定的含义 二.为什 ...
- SQL MAP 注入测试
SQL MAP是一款测试系统是否有SQL漏洞的工具 下载地址: http://sqlmap.org/ sqlmap 是一款使用python编写的工具,所以需要安装python,需要安装python 为 ...
- Jquery 的ajax里边不能识别$(this)
确实不能用,在ajax外面弄个变量$this= $(this),然后在里面用就行了 在jQuery使用ajax后$(this)失效,原因很简单,$(this)指向的是最近调用它的jquery对象,即$ ...