// 源码出自：潇湘夜雨
<!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. 如何搭建http服务仓库

    1.拷贝仓库repo-A文件到服务器/media/D: 2.通过createrepo_c 生成仓库rpm信息数据 cd repo-A createrepo . 3.chmod -R 775  repo ...

  2. Luogu 2216[HAOI2007]理想的正方形 - 单调队列

    Solution 二维单调队列, 这个数组套起来看得我眼瞎... Code #include<cstdio> #include<algorithm> #include<c ...

  3. 专访UI中国认证设计师卤大湿 | 一位UI大师关于UI设计的思考

    现如今,设计师可以说是一个自带光环的Title,很多深藏不漏的UI设计师们都在以自己的方式为产品设计做出贡献,卤大湿便是这其中之一. 精分青年卤大湿,这个在UI中国上是张酷酷的鲁迅头像的UI设计师,是 ...

  4. m序列

    产生m序列移位寄存器是一种逻辑电路,1阶,2阶...的电路图各不相同. 一般使用本原多项式计算出各阶数电路图. 一般的多项式为 f(x) = c0 * x^0 + c1 * x^1 + c2 * x^ ...

  5. maven clean package 时出现Failed to read artifact descriptor for的问题解决

    maven clean package 时出现Failed to read artifact descriptor for的问题 [ERROR] Failed to execute goal on p ...

  6. linux和普通文本的换行问题

    情景一: 普通文本 vim操作换行   :%s#xxx#\n#g 情景二: linux环境换行 vim   :%s#xxx#\r#g

  7. JS高级-Date- Error-***Function:

    1. Date: API: 1. 8个单位: FullYear   Month   Date   Day Hours     Minutes   Seconds   Milliseconds 2. 每 ...

  8. LSTM长短期记忆神经网络模型简介

    LSTM网络也是一种时间递归神经网络,解决RNN的长期依赖关系. RNN模型在训练时会遇到梯度消失或者爆炸的问题,训练时计算和反向传播,梯度倾向于在每一时刻递增或递减,梯度发散到无穷大或者0..... ...

  9. 特级教师总结的教育之33条(ZZ)

    一位班主任发给家长的一则短信:“无论成绩好坏,请想想:每个孩子都是种子,只不过每个人的花期不同.有的花,一开始就灿烂绽放:有的花,需要漫长的等待.不要看着别人怒放了,自己的那棵还没有动静就着急,相信是 ...

  10. floor函数

    C++中 可以用floor函数来截断小数部分 floor(x)返回一个不大于x的整数,有点像取整函数