[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 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...
随机推荐
- 全局组建封装（挂载到vue实例的原型中，通过this访问）
主题:组建的封装 一:install注册的全局封装(v-grid九宫格组建) 1.九宫格的封装主要有三个api 点击功能 每行个数 是否隐藏边框 ...
- 12. pt-index-usage
pt-index-usage h=192.168.100.101,P=3306,u=admin,p=admin /data/mysql3306/data/slow.log 根据slow log来判断i ...
- linux内socket服务器无法连接windows
今天在试socket的时候出现了一个问题:问题概述是这样的: 1.linux采用centOS7(mini)版本,虚拟机版本VMware12,网卡设置NAT 2.服务器和客户端都在windows上,通讯 ...
- Sort Array By Parity LT905
Given an array A of non-negative integers, return an array consisting of all the even elements of A, ...
- Android资源相关语法
2018-08-29 getResources().getString(Rid)获取配置中的字符串
- php与html代码的若干转换
以前懵懵懂懂的看过,没怎么在意,现在总结一下 一般来说,像留言板之类的content,用这样的就够了: $content=addslashes(htmlspecialchars($_POST['con ...
- 多项式相关&&生成函数相关&&一些题目（updating...）
文章目录 多项式的运算 多项式的加减法,数乘 多项式乘法 多项式求逆 多项式求导 多项式积分 多项式取对 多项式取exp 多项式开方 多项式的除法/取模 分治FFT 生成函数 相关题目 多项式的运算 ...
- JSON_FORCE_OBJECT 数字索引数组 强转对象
$abc = array('a','b','c','d','e','f','g'); echo '<pre>'; var_dump($abc); echo json_encode($abc ...
- react native项目的创建和运行
1.创建项目 react-native init projectName 2.运行项目 在AndroidStudio上运行安卓模拟器 cd projectName react-native run-a ...
- Le Chapitre IX
Je crois qu'il profita, pour son évasion[evazjɔ̃]逃跑, d'une migration d'oiseaux sauvages[sovaʒ]未驯化的. ...