[javascript-snippet]使用javascript+html5实现图片的灰度处理
2016-02-04 09:45
911 查看
// 源码出自:潇湘夜雨 <!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高级程序设计学习笔记第三章--基本概念
- 关于JavaScript作用域你想知道的一切
- ExtJs 入门教程
- canvas导出为图片并用JS下载
- js实现开灯关灯效果
- java调用javascript :js引擎rhino
- JSP点击事件大全
- 【js】小数保留n位小数
- js插件开发的一些感想和心得
- 关于JavaScript作用域你想知道的一切
- 分享我对JS插件开发的一些感想和心得
- JS获取时间的相关函数及时间戳与时间日期之间的转换
- js的匿名函数
- JavaScript中的作用域和闭包浅谈
- DOM的高级操作——表单的添加/删除/获取
- MVC in Javascript
- WebAPI接收JSON参数注意事项
- Nokitjs 系列-01 - HelloWorld
- JavaScript基础精华01(变量,语法,数据类型)
- JavaScript基础精华01(变量,语法,数据类型)