// 源码出自：潇湘夜雨
<!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. linux 软件编译问题汇总

    1.问题: fatal error: openssl/opensslv.h: No such file or directory 解决: sudo apt-get install libssl-dev ...

  2. Django报错：__init__() missing 1 required positional argument: 'on_delete'

    原因: 在django2.0后,定义外键和一对一关系的时候需要加on_delete选项,此参数为了避免两个表里的数据不一致问题,不然会报错:TypeError: __init__() missing ...

  3. Eclipse 安装使用 M2Eclipse 插件

    help --> Install New Software --> Add 安装完后需要重启eclipse 通常 Eclipse 会自带 Maven.但可能按自己安装的 Maven 存在版 ...

  4. SPring中quartz的配置(可以用实现邮件定时发送，任务定时执行，网站定时更新等)

    http://www.cnblogs.com/kay/archive/2007/11/02/947372.html 邮件或任务多次发送或执行的问题: 1.<property name=" ...

  5. redis在游戏服务器中的使用初探(三) 信息存储

    摘要: 搭建了服务器环境 有了客户端 我们来假想下以下应用场景:我们简单举个实例来描述下Hash的应用场景,比如我们要存储一个用户信息对象数据,包含以下信息:用户ID,为查找的key,存储的value ...

  6. c++11 多线程依次打印ABC

    并发 练习代码 #include <thread> #include <vector> #include <mutex> #include <iostream ...

  7. pygame小记

    pygame.display.set_mode(x, y)设置显示窗口大小pygame.sprite.Sprite方法中有image, rect, speed等参数 其中image 可以通过 pyga ...

  8. 开发简单的JavaWeb项目

    一.配置相关环境 下载配置JDK,eclipse,Tomcat服务器,Mysql数据库,Navicat for MySQL(数据库可视化工具) 如果你已经做好各个环境的配置,eclipse与Tomca ...

  9. hdu-4300（字符串hash）

    题目链接:传送门 参考文章:传送门 思路: (1)对字符串进行翻译,求出s1(未翻译),s2(已翻译)字符串,并分别对s1,s2进行hash操作. (2)比较s1的后x位和s2的前x位的hash值,求 ...

  10. java的Scanner获取输入内容

    //导入 scanner的包 import java.util.Scanner; Scanner scanner = new Scanner(System.in); System.out.printl ...