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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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
第八节 访问方式 [8]
2006/10/09 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php跨服务器访问方法小结
2015/05/12 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
javascript时间函数大全
2014/06/30 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
求职简历的自我评价
2014/01/31 职场文书
网络工程师职业规划
2014/02/10 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
申报材料格式
2014/12/30 职场文书
中秋节随笔
2015/08/15 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
python unittest单元测试的步骤分析
2021/08/02 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript