canvas的神奇用法


Posted in Javascript onFebruary 03, 2017

canvas有一个神奇的方法getImageData这个玩意。它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变。

如果你有各种滤镜的算法。那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能。

使用方法:

1:先将图片导入画布。

2:var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);  //用这个将图片每个像素点的信息获取出来,得到一个数组。注意得到的信息不是[[r,g,b,a],[r,g,b,a]]这样的二维数组而是[r,g,b,a,r,g,b,a]这样的按rgba顺序排列的单个的数组。

3:这一步就是开始将每个像素的rgba改变。这里简单介绍一下灰度效果的算法及实现步骤。

function gray(canvasData)
{
for ( var x = 0; x < canvasData.width; x++) {
 for ( var y = 0; y < canvasData.height; y++) {
 // Index of the pixel in the array
 var idx = (x + y * canvasData.width) * 4;
 var r = canvasData.data[idx + 0];
 var g = canvasData.data[idx + 1];
 var b = canvasData.data[idx + 2];
 var gray = .299 * r + .587 * g + .114 * b;
 // assign gray scale value
 canvasData.data[idx + 0] = gray; // Red channel
 canvasData.data[idx + 1] = gray; // Green channel
 canvasData.data[idx + 2] = gray; // Blue channel
 canvasData.data[idx + 3] = 255; // Alpha channel
 // add black border
 if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8)) 
 {
  canvasData.data[idx + 0] = 0;
  canvasData.data[idx + 1] = 0;
  canvasData.data[idx + 2] = 0;
 }
 }
}
return canvasData;
}

4:context.putImageData(canvasData, 0, 0); //处理完像素颜色值之后,记得要这一句将画布重绘

这些个代码就是将图片转化为黑白效果的代码,具体可以实现多少效果就得看你掌握的滤镜算法有多少了。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 #Javascript
js 递归和定时器的实例解析
Feb 03 #Javascript
js实现文本上下来回滚动
Feb 03 #Javascript
jquery代码规范让代码越来越好看
Feb 03 #Javascript
Javascript for in的缺陷总结
Feb 03 #Javascript
canvas绘制七巧板
Feb 03 #Javascript
JS对象是否拥有某属性如何判断
Feb 03 #Javascript
You might like
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
javascript 定义新对象方法
2010/02/20 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python字符串对其居中显示的方法
2015/07/11 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
详解K-means算法在Python中的实现
2017/12/05 Python
用Python实现数据的透视表的方法
2018/11/16 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python csv模块使用方法代码实例
2019/08/29 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
python实现udp聊天窗口
2020/03/31 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
国贸专业个人求职信范文
2014/01/08 职场文书
统计系教授推荐信
2014/02/28 职场文书
工作建议书范文
2014/05/13 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
德劲DE1105机评
2022/04/05 无线电
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL