// 源码出自：潇湘夜雨
<!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. CF Round #510 (Div. 2)

    前言:没想到那么快就打了第二场,题目难度比CF Round #509 (Div. 2)这场要难些,不过我依旧菜,这场更是被\(D\)题卡了,最后\(C\)题都来不及敲了..最后才\(A\)了\(3\) ...

  2. CButtonST|CUniButton等按钮类的使用

    CButtonST CButtonST类的使用参考链接:http://www.cnblogs.com/lidabo/archive/2012/12/17/2821122.html CCeButtonS ...

  3. 我们最常见的UX设计交付成果有哪些？

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 有人会好奇,用户体验(UX)设计师每天都在做些什么呢?说实话,有很多事情!作为UX专家,需要将自己的设计 ...

  4. Sliding Window Median LT480

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  5. 移动端300ms延迟由来及解决方案

    1.300ms延迟由来 300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom).双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页 ...

  6. svn log — 显示提交日志信息

    http://www.cnblogs.com/eoiioe/archive/2009/01/06/1370580.html 概要svn log [PATH]svn log URL [PATH...]描 ...

  7. 求和(NOIP2015)

    题目链接:求和 这道题不是很简单,因为数据并不是很小,常规计算会t. 这里引用chenleyu的解答(如果想要cgg原创解答,--改天吧): 这题相对是比较难的,首先我们要解读题目的意思 一条狭长的纸 ...

  8. 第一个C#语言

    第一个C#程序 .NET和C#的区别 1．  C#只是.NET的一部分,.NET不止包含C# 2．  C#是一种程序语言,.NET是一个平台.框架 IDE环境:vs 2012 VS2012的窗口结构 ...

  9. 【转】PHP实现验证码

    转自http://www.jb51.net/article/40341.htm 新建一个captcha.php: //验证码类class Captcha { private $charset = 'a ...

  10. 680. Valid Palindrome II

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...