// 源码出自：潇湘夜雨
<!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实现图片的灰度处理的更多相关文章

  1. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  2. JavaScript根据文件名后缀判断是否图片文件

    //JavaScript根据文件名后缀判断是否图片文件 //图片文件的后缀名 var imgExt = new Array(".png",".jpg",&quo ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  5. HTML5将图片转化成字符画

    HTML5将图片转化成字符画 字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能.其实原理很简单:扫描图片相应位置 ...

  6. Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...

  7. JavaScript强化教程——JavaScript 总结

    本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...

  8. 第一百二十九节，JavaScript，理解JavaScript库

    JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...

  9. 2021年3月-第03阶段-前端基础-JavaScript基础语法-JavaScript基础第01天

    1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...

随机推荐

  1. BZOJ1935或洛谷2163 [SHOI2007]园丁的烦恼

    BZOJ原题链接 洛谷原题链接 很容易想到二维前缀和. 设\(S[i][j]\)表示矩阵\((0, 0)(i, j)\)内树木的棵数,则询问的矩形为\((x, y)(xx, yy)\)时,答案为\(S ...

  2. Linux命令大全完整版

      1. linux系统管理命令 adduser 功能说明:新增用户帐号.语 法:adduser补充说明:在Slackware中,adduser指令是个script程序,利用交谈的方式取得输入的用户帐 ...

  3. 伪静态的服务器配置-如何php为 Discuz! X2 配置伪静态

      URL 静态化是一个有利于搜索引擎的设置,通过 URL 静态化,达到原来是动态的 PHP 页面转换为静态化的 HTML 页面,可以提高搜索引擎抓取,当然,这里的静态化是一种假静态,目的只是提高搜索 ...

  4. 网卡驱动如何设置组播MAC地址

    参考资料: https://blog.csdn.net/abccheng/article/details/50465268 将网卡加入到组播组中.

  5. mysqli_query数据库有数据，查不出来

    MySQLDB.class.php <?php /** * 数据库操作工具类 */ class MySQLDB { // 定义相关属性 private $host;// 主机地址 private ...

  6. Python实现的复杂的计算器的代码

    用Python实现复杂的计算器,可以按照“()”.乘除.加减的优先级进行混合运算.主旨是对正则表达式进行学习. 设计思路: 1.在计算式中搜索最后一个“(”,再搜索和它匹配的“)”,截取两个括号间的表 ...

  7. zookeeper和keepalived的区别

    zookeeper主要就是为了保持数据的一致性来的,举个栗子,通俗点就是 本来是存储在各个服务器上的配置文件,现在我不存储在各个服务器上了,我就把全部配置文件都存储在zookeeper服务器上,应用服 ...

  8. 《C#从现象到本质》读书笔记（一）第1章 .NET基础知识

    最近根据博客园大神的推荐,买了本<C#从现象到本质>.做一点读书笔记. 由于不懂IL和ildasm,winddg,太深奥,理解不了,就牛嚼草一样,先总结第一遍读书,自己总结的知识点了.不知 ...

  9. SQL表两列取一列唯一值的记录

    问下SQL表两列取一列唯一值的 A列         B列       C列 1001      AA      2012-01-02 1001      BB      2012-02-05 100 ...

  10. How to Create Triggers in MySQL

    https://www.sitepoint.com/how-to-create-mysql-triggers/ I created two tables: CREATE TABLE `sw_user` ...