用canvas给视频图片添加特效
2015-05-26 16:30
375 查看
Canvas制作视频图片特效
1. Canvas介绍
1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能.
具体提供的js函数看http://www.w3school.com.cn/tags/html_ref_canvas.asp
2 简单介绍一下使用:
Var canvas = document.documentElementById(“canvasId”);
Var ctx = canvas.getContext(“2d”);//获取维数对象
ctx.drawImage(img);//img为dom图片对象, 还有其他可选参数 剪切坐标 和 放置到canvas上的坐标
3给图片添加特效
原理: 图片通过drawImage函数 绘制到 canvas 上之后, 用getImageData函数可以获得
图片的imageData对象, imageData里有一个data数组存放的是 此图片的r g b a (三原色 和透明度). 将取出的data数组修改成对应特效数组, 用putImageData函数 重新数据放回canvas上即可.
小demo 代码(将图片设置成灰白效果 原理: 将r g b 设置成rgb平均数):
<!---------------- html --------------------->
<img id=”image1” src=”/img.jpg” />
<canvas id=”can” width=”500” heigth=”300”> </canvas>
<!-- 注意: canvas的宽高只能通过属性设置, 在style中设置没有效果 -->
<!---------------- js --------------------->
Var img = document.documentElementById(“imgage1”);
Var canvas = document.documentElementById(“can”);
Var ctx = canvas.getContext(“2d”);//获取维数对象
ctx.drawImage(img);
Var imgData = ctx.getImageData(0, 0, 500, 300);
For ( var i = 0, len = imgData.data.length, avgRgb; i < len; i += 4) {
avgRgb = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
imgData.data[i] = avgRgb;
imgData.data[i + 1] = avgRgb;
imgData.data[i + 2 ] = avgRgb;
}
ctx.putImageData(imgData, 0, 0);
4 给视频添加特效
原理: 与图片的原理类似,只是要绘制视频每一帧的画面, 视频每播放一帧,就在canvas上绘制一帧画面
小demo 代码 (将视频画面红色调高 原理: 将r g b 中的r 调高)
<!---------------- html --------------------->
<video id=”vid1” src=”/vid1.mp4” autoplay/>
<canvas id=”can” width=”500” heigth=”300”> </canvas>
<!---------------- js --------------------->
Var vid= document.documentElementById(“vid1”);
Var canvas = document.documentElementById(“can”);
Var ctx = canvas.getContext(“2d”);//获取2维对象
function drawVidEffect() {
ctx.drawImage(vid);
Var imgData = ctx.getImageData(0, 0, 500, 300);
For ( var i = 0, len = imgData.data.length, avgRgb; i < len; i += 4) {
imgData.data[i] += 50;
}
ctx.putImageData(imgData, 0, 0);
setTimeout( drawVidEffect, 20 );
}
5 注意
如果视频或者图片所在的域名 跟canvas所在域名不一样 或者 不在服务器上运行 会报错:
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
解决办法:将图片或者视频加上属性crossOrigin但是添加后不能更换src地址
详见:
http://camnpr.com/archives/1117.html http://camnpr.com/TuiJianTools/html5/canvas-cross-domain-images.html
1. Canvas介绍
1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能.
具体提供的js函数看http://www.w3school.com.cn/tags/html_ref_canvas.asp
2 简单介绍一下使用:
Var canvas = document.documentElementById(“canvasId”);
Var ctx = canvas.getContext(“2d”);//获取维数对象
ctx.drawImage(img);//img为dom图片对象, 还有其他可选参数 剪切坐标 和 放置到canvas上的坐标
3给图片添加特效
原理: 图片通过drawImage函数 绘制到 canvas 上之后, 用getImageData函数可以获得
图片的imageData对象, imageData里有一个data数组存放的是 此图片的r g b a (三原色 和透明度). 将取出的data数组修改成对应特效数组, 用putImageData函数 重新数据放回canvas上即可.
小demo 代码(将图片设置成灰白效果 原理: 将r g b 设置成rgb平均数):
<!---------------- html --------------------->
<img id=”image1” src=”/img.jpg” />
<canvas id=”can” width=”500” heigth=”300”> </canvas>
<!-- 注意: canvas的宽高只能通过属性设置, 在style中设置没有效果 -->
<!---------------- js --------------------->
Var img = document.documentElementById(“imgage1”);
Var canvas = document.documentElementById(“can”);
Var ctx = canvas.getContext(“2d”);//获取维数对象
ctx.drawImage(img);
Var imgData = ctx.getImageData(0, 0, 500, 300);
For ( var i = 0, len = imgData.data.length, avgRgb; i < len; i += 4) {
avgRgb = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
imgData.data[i] = avgRgb;
imgData.data[i + 1] = avgRgb;
imgData.data[i + 2 ] = avgRgb;
}
ctx.putImageData(imgData, 0, 0);
4 给视频添加特效
原理: 与图片的原理类似,只是要绘制视频每一帧的画面, 视频每播放一帧,就在canvas上绘制一帧画面
小demo 代码 (将视频画面红色调高 原理: 将r g b 中的r 调高)
<!---------------- html --------------------->
<video id=”vid1” src=”/vid1.mp4” autoplay/>
<canvas id=”can” width=”500” heigth=”300”> </canvas>
<!---------------- js --------------------->
Var vid= document.documentElementById(“vid1”);
Var canvas = document.documentElementById(“can”);
Var ctx = canvas.getContext(“2d”);//获取2维对象
function drawVidEffect() {
ctx.drawImage(vid);
Var imgData = ctx.getImageData(0, 0, 500, 300);
For ( var i = 0, len = imgData.data.length, avgRgb; i < len; i += 4) {
imgData.data[i] += 50;
}
ctx.putImageData(imgData, 0, 0);
setTimeout( drawVidEffect, 20 );
}
5 注意
如果视频或者图片所在的域名 跟canvas所在域名不一样 或者 不在服务器上运行 会报错:
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
解决办法:将图片或者视频加上属性crossOrigin但是添加后不能更换src地址
详见:
http://camnpr.com/archives/1117.html http://camnpr.com/TuiJianTools/html5/canvas-cross-domain-images.html
相关文章推荐
- 用canvas实现图片滤镜效果详解之视频效果
- 用java实现给图片增加图片水印或者文字水印(也支持视频图像帧添加水印)
- 分享一个分享超酷的添加图片悬浮特效jQuery插件 - Adipoli
- hexo博客添加图片,音乐,视频
- [Unity3D][Vuforia][IOS]vuforia在unity3d中添加自己的动态模型,识别自己的图片,添加GUI,播放视频
- 利用CSS3给图片添加旋转背景特效
- Android绘图实例(Bitmmap,Canvas,Pain的使用)&动态的在图片上添加文字(canvas.drawText)
- 用canvas实现图片滤镜效果详解之视频效果
- 用java实现给图片增加图片水印或者文字水印(也支持视频图像帧添加水印)
- javaCV开发详解之4:转流器实现(也可作为本地收流器、推流器,新增添加图片及文字水印,视频图像帧保存),实现rtsp/rtmp/本地文件转发到rtmp流媒体服务器(基于javaCV-FFMPEG)
- canvas中的图片特效:淡入淡出,旋转,扭动
- 解决canvas跨域问题(图片,视频资源跨域)
- iOS window添加视频view或图片view,并有切换根视图控制器的时候注意
- Html5添加canvas图像导出为多种格式图片的jQuery插件教程
- JavaScript+html5 canvas实现图片破碎重组动画特效
- 利用canvas添加图片水印--直接上代码
- 利用面向对象的思路在canvas中为图片添加飘雪效果
- 为canvas添加背景图片
- 用canvas实现图片滤镜效果详解之视频效果
- Hexo博客添加图片、音乐、视频