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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
javascript包装对象实例分析
Mar 27 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
js如何打印object对象
Oct 16 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 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
第七节--类的静态成员
2006/11/16 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python面向对象基础入门之设置对象属性
2018/12/11 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Python3 读取Word文件方式
2020/02/13 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
Python try except finally资源回收的实现
2021/01/25 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
中学老师的自我评价
2013/11/07 职场文书
我的求职择业计划书
2014/04/04 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
安全承诺书格式范本
2015/04/28 职场文书
小学安全教育主题班会
2015/08/12 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
详解MySQL的内连接和外连接
2023/05/08 MySQL