使用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,,);
for(var i=,len=imgData.length;i<len;i+=){
if(imgData[i+] == )
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>
使用canvas截图或者改变灰度的更多相关文章
- webRTC结合canvas截图
直接看代码.css基础弱鸡,将就看吧.慢慢学习 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- 小程序canvas截图组件
最近做一个小程序的过程中,需要用到截图功能,网上搜了一下,发现没有符合要求的,就自己搞了个组件,方便复用. 目前功能很简单,传入宽高和图片路径即可,宽高是为了计算截图的比例,只支持缩放和移动. 实现思 ...
- 使用canvas截图网页为图片并解决跨域空白以及模糊问题
前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...
- Wx-小程序-使用canvas截图保存
1. wxml 页面 使用画布来站位,并给按钮添加绑定事件 <button class='btn btn-theme' bindtap='setSaveImage'>保存图片到本地< ...
- 用canvas实现图片滤镜效果详解之灰度效果
前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...
- 带你从0到1实现canvas的undo和redo功能
不知不觉又到了周末,又到了Fly写文章的日子,今天给大家介绍下一个web中很常见的功能, 就是撤销和复原这样一个功能,对于任何一个画图软件,或者是建模软件.没有撤销和复原.这不是傻了对啊吧,所以本篇文 ...
- Unity5.3——UI之Canvas
原文:http://docs.unity3d.com/Manual/UISystem.html Canvas 所有的UI都应该放在Canvas里面(子层).Canvas是一个带有Canvas组件的Ga ...
- H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作
今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...
- Unity中UGUI之Canvas属性解读版本二
Canvas Render Modes(渲染模式) 1.在screen空间中渲染2.在world空间中渲染 Screen Space-Overlay 在这个渲染模式中,UI元素将在场景的上面.如果场景 ...
随机推荐
- python基础之day1
Python 简介 Python是著名的“龟叔”Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言. Python为我们提供了非常完善的基础代码库,覆盖了 ...
- replace实现正则过滤替换非法字符
html+js结构如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- HTTP协议详解(转)
转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的 ...
- java关于ArrayList中toArray方法的使用
先来看下面这段程序 Collection collect= new ArrayList(); collect.add("小黑"); collect.add("小白 ...
- angularjs provider 供应商服务
今天学习了angularjs的provider的供应商服务,写了个例子(自定义供应商服务,也可使用angularjs内部提供的服务) var starterApp = angular.module(' ...
- Java面试查漏补缺
一.基础 1.&和&&的区别. [概述] &&只能用作逻辑与(and)运算符(具有短路功能):但是&可以作为逻辑与运算符(是“无条件与”,即没有短路的功 ...
- svn相关知识点
1.查找linux操作系统:uname -a 2.svn 安装:yum install -y subversion 3.svn操作命令 a.将文件checkout到本地目录: svn co svn:/ ...
- Hadoop学习笔记—13.分布式集群中节点的动态添加与下架
开篇:在本笔记系列的第一篇中,我们介绍了如何搭建伪分布与分布模式的Hadoop集群.现在,我们来了解一下在一个Hadoop分布式集群中,如何动态(不关机且正在运行的情况下)地添加一个Hadoop节点与 ...
- IEEE754、VAX、IBM浮点型介绍和.NET中互相转换
[题外话] 最近在做C3D文件的解析,好奇怪的是文件中竟然存储了CPU的类型,原本不以为然,结果后来读取一个文件发现浮点数全部读取错误.查了下发现虽然在上世纪80年代就提出了IEEE754要统一浮点数 ...
- 用.NET MVC实现长轮询,与jQuery.AJAX即时双向通信
两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...