使用canvas截图或者改变灰度
时间:2022-05-04
本文章向大家介绍使用canvas截图或者改变灰度,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简述
html5新添加的canvas API可以让我们对画布进行开发应用,典型的是可以使用canvas截图或者
手工绘制“迷你图”(即嵌入在文本中的高清小图片)。
实现截图的方法很简单,就是创建一个canvas并用drawImage来获取该时刻视频帧,并使用canvas的
toDataURL转换成data URI。
也可对视频帧或者图片帧数据进行操作,drawImage返回ImageData对象,我们可以对该对象进行相关
处理计算。
在对canvas的事件处理中,我们有时需要判断当前点是否在某条路经或者某个图片上,可以通过event.clientX(Y)
来获取点击点在客户区的坐标,因此需要转换为canvas坐标系中的坐标,并且需要考虑到canvas坐标系的放缩。
因此可以这样实现:
//判断当前点是否已经绘制。
function isInPaint(graphic,e){
var cx = e.clientX,cy = e.clientY;
var r = graphic.canvas.getBoundingClientRect();
var imgData;
cx = (cx - r.left) * (graphic.canvas.width / r.width);
cy = (cy - r.top) * (graphic.canvas.height / r.height);
//取出点击的该像素的数据
//判断当前像素的alpha值是否为0
imgData = graphic.getImageData(cx,cy,1,1);
for(var i=0,len=imgData.length;i<len;i+=4){
if(imgData[i+3] == 0)
return false;
}
return true;
}
//判断点是否在路径上,使用context的原生方法
function isInPath(graphic,e){
var cx = e.clientX,cy = e.clientY;
var r = graphic.canvas.getBoundingClientRect();
var imgData;
cx = (cx - r.left) * (graphic.canvas.width / r.width);
cy = (cy - r.top) * (graphic.canvas.height / r.height);
return graphic.isPointInPath(cx,cy);
}
视频截图的demo:
<div>
<video id="v" controls="controls" autoplay="autoplay" src="a.mp4" width="500" height="300"></video>
</div>
<canvas id="c" width="500" height="300"></canvas>
<div>
<img id="shot" width="500" height="300" >
</div>
<button id="btn">点击截图</button>
<script>
function $(i){return document.getElementById(i)}
var c = $("c"),v = $("v");
var g = c.getContext("2d");
var btn = $("btn"),img = $("shot");
function gray(g){
var imageData,data,avr;
g.drawImage(v,0,0,g.canvas.width, g.canvas.height);
imageData = g.getImageData(0,0, g.canvas.width, g.canvas.height);
data = imageData.data;
//data包含图片像素信息,每个像素按照R、G、B、A 4个字节依次排列。
//其中 data.width 为列数,data.height 为行数。
// 可以使用 imageData_cache = g.createImageData(imgdata)创建缓存
for(var i=0,len=data.length;i<len;i+=4){
avr = (data[i] + data[i+1] + data[i+2]) / 3;
data[i+2] = data[i+1] = data[i] = avr;
}
// 使用putImageData,则对全局透明度globalAlpha以及其他合成处理则
// 没有效果,即参数中的imageData为最终处理值。
g.putImageData(imageData,0,0);
requestAnimationFrame(function(){gray(g)});
}
function shot(){
var imageData,data,avr,canvas,graphic;
canvas = document.createElement("canvas");
canvas.style.cssText = "width:500px;height:300px;"
graphic = canvas.getContext("2d");
graphic.drawImage(v,0,0,graphic.canvas.width, graphic.canvas.height);
img.src = canvas.toDataURL();
canvas = null;
}
window.onload = function(){
v.addEventListener('play', function(){
requestAnimationFrame(function(){gray(g)});
},false);
btn.addEventListener("click",function(){
shot()
},false)
}
</script>
- 教你 Debug 的正确姿势——记一次 CoreMotion 的 Crash
- Linux系统yum命令安装软件时保留(下载)rpm包
- Go语言读写数据库
- 《Android 创建线程源码与OOM分析》
- 微信 Android 视频编码爬过的那些坑
- 少年,这有套《街霸2》AI速成心法,想传授于你……
- 你知道android的MessageQueue.IdleHandler吗?
- 《Android基础:Fragment,看这篇就够了》
- Android 7.0中ContentProvider实现原理
- 《iOS APP 性能检测》
- iOS 11 安全区域适配总结
- Linux下巧用chattr、watch命令的实例
- 【特斯拉组件】iOS高性能PageController
- SUSE Linux系统在线安装软件命令zypper参数详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Studio使用recyclerview实现展开和折叠功能(在之前的微信页面基础之上)
- 解决django 多个APP时 static文件的问题
- Android Studio如何获取SQLite数据并显示到ListView上
- Android自定义短信倒计时view流程分析
- 使用Android studio3.6的java api方式调用opencv
- thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
- php+iframe 实现上传文件功能示例
- php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
- 如何在OpenStack Kolla上部署Tungsten Fabric(附14个常见的配置问题)
- 浮点数的秘密
- 由多线程内存溢出产生的实战分析
- 消失的Java进程-Linux OOM Killer
- Myers‘Diff之贪婪算法
- DiffUtil和它的差量算法
- C语言高效编程与代码优化