[javascript-snippet]使用javascript+html5实现图片的灰度处理
// 源码出自：潇湘夜雨
<!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实现图片的灰度处理的更多相关文章
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript根据文件名后缀判断是否图片文件
//JavaScript根据文件名后缀判断是否图片文件 //图片文件的后缀名 var imgExt = new Array(".png",".jpg",&quo ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- HTML5将图片转化成字符画
HTML5将图片转化成字符画 字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能.其实原理很简单:扫描图片相应位置 ...
- Html5选择图片并及时预览图片
以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...
- JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
- 第一百二十九节，JavaScript，理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- 2021年3月-第03阶段-前端基础-JavaScript基础语法-JavaScript基础第01天
1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...
随机推荐
- Homestead 修改 Homestead.yaml 文件后 vagrant up 报错的问题
一般情况是 TAB 和空格的问题. 虽然表面看来,缩进是一致的. 但是 TAB 没能替换为空格,从而导致问题. 解决: $ sudo vim /etc/vim/vimrc.local syntax o ...
- BIO,NIO,AIO(NIO2)的理解
写在前面,这里所说的IO主要是强调的网络IO 1.BIO(同步并阻塞) 客户端一个请求对应一个线程.客户端上来一个请求(最开始的连接以及后续的IO请求),服务端新建一个线程去处理这个请求,由于线程总数 ...
- Servlet 2.x 规范
Servlet 2.x 规范 sun 公司制订的一种基于 Java 技术的 WEB 服务器功能的组件规范.1997 年六月,Servlet 1.0 版本发行,最新版本 Servlet 4.0 处于研发 ...
- 论坛：Html代码生成器>>FCKeditor的使用
>>文件准备: >>例1: >>例2: >>例3:指定工具栏 添加 JS代码:
- ERROR - abandon connection, open stackTrace
项目采用的是阿里巴巴的druid连接池,配置文件中有个removeAbandoned的配置(意义是某个连接如果超过设置的连接活动时间的话,连接会被强制关掉),但是因为爬虫中某些连接会长时间处于活动状态 ...
- IOS初级：UIView和UIButton
AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDict ...
- 2017/2/5：oracle数据库的三大文件
oracle的三大文件: 一:控制文件:控制文件是一个小型的二进制文件,可以记录数据库的物理结构.包括: * 数据库名称 * 数据文件和日志文件的名称和位置 * 数据库创建的时 ...
- mybatis学习 十四 resultMap标签 一对一(联合查询)
1.使用 resultMap 实现关联单个对象(联合查询方式) <resultMap type="Student" id="stuMap1"> &l ...
- CentOS下利用mysqlbinlog恢复MySQL数据库
如果不小心对数据库进行误操作,而又没有及时备份怎么办?这恐怕是广大的coder经常遇到的一类问题.我今天就因为不小心删除了某个数据库,但最后的备份是1个礼拜前的,唯一能解决的办法就是通过mysqlbi ...
- Peter的烟(水题测试2017082401&洛谷1150)
题目链接:Peter的烟 这道题基本做法很水,不解释. #include<bits/stdc++.h> using namespace std; int main(){ int n,k; ...