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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
js闭包实现按秒计数
Apr 23 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Django框架自定义session处理操作示例
2019/05/27 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
原料仓管员岗位职责
2014/04/12 职场文书
经济贸易系求职信
2014/08/04 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
bose降噪耳机音能消除人声吗
2022/04/19 数码科技