// 源码出自：潇湘夜雨
<!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. MySQL学习笔记-MySQL数据库优化实践[转]

    最近一段时间,我们整理了一些关于Percona,Linux,Flashcache,硬件设备的优化经验,分享给大家: 硬件 1.开启BBWC RAID卡都有写cache(Battery Backed W ...

  2. 网络编程 tcp(一)

    server端: #include <stdio.h> #include <string.h> #include <unistd.h> #include <s ...

  3. 秒懂 this

    一:全局执行 console.log(this); // Window 可以看出在全局作用域中 this 指向当前的全局对象 Window. 二:函数中执行 1.非严格模式中 function fun ...

  4. Easyui form 表单中的 radio 无法一开始就选中原因

    是因为你在form表单里面,所以会出现样式没有选中状态,必须要从后台去获取数据,然后再绑定.也就是初始化数据.

  5. 一个机器上运行两个tomcat

    一.   在一台计算机上配置2个tomcat是可以的,关键是tomcat里的server.xml文件中三个端口必须不同.需要修改conf/server.xml使两个tomcat占用的端口不相同,在缺省 ...

  6. PID控制算法的C语音实现

    http://wenku.baidu.com/link?url=_u7LmA1-gzG5H8DzFYsrbttaLdvhlHVn5L54pgxgUiyyJK_eWtX0LbS7d0SEbHtHzAoK ...

  7. 2018.06.27"Shortest" pair of paths（费用流）

    "Shortest" pair of paths Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1589 A ...

  8. 树状数组（hdu-4325，hdu-1166，pat-1057）

    1.hdu-4325 题意:插花,要么给出插花的范围,要么查询某个点的花的个数. 思路:通过更新,每次更新区间S到T的数值,表插入花(这一点一开始没想到), 要么查询某个点的花的数目. (与以往单纯的 ...

  9. Codeforces Round #538 (Div. 2) E 随机数生成

    https://codeforces.com/contest/1114/problem/E 题意 交互题,需要去猜一个乱序的等差数列的首项和公差,你能问两种问题 1. 数列中有没有数比x大 2. 数列 ...

  10. GK888CN与Devexpress报表打印标签

    安装海鸥驱动,貌似打几张也会报错 使用打印机自带的gk888t驱动,用gk888t(EPL)打带二纬码时会报错 需要选择Togther, xrLable 运行 CanShrink