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 事件绑定函数代码
Apr 28 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
js实现按座位号抽奖
Apr 05 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
浅谈javascript错误处理
Aug 11 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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中的日期加减方法示例
2014/08/21 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP实现验证码校验功能
2017/11/16 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python与R语言的简要对比
2017/11/14 Python
python实现大转盘抽奖效果
2019/01/22 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
有关打架的检讨书
2014/01/25 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
合作意向书怎么写
2019/06/24 职场文书