码迷,mamicode.com
首页 > 其他好文 > 详细

用canvas给视频图片添加特效

时间:2015-05-26 17:57:08      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:

Canvas制作视频图片特效

1. Canvas介绍

1.1Canvashtml5上的一个画布标签,功能有点类似javaswing.可以在canvas上画线条 弧线文字 就是画布的功能.

具体提供的js函数看http://www.w3school.com.cn/tags/html_ref_canvas.asp

 

简单介绍一下使用:

Var canvas = document.documentElementById(“canvasId”);

Var ctx = canvas.getContext(“2d”);//获取维数对象

ctx.drawImage(img);//imgdom图片对象还有其他可选参数 剪切坐标  和 放置到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);

 

给视频添加特效

原理与图片的原理类似,只是要绘制视频每一帧的画面视频每播放一帧,就在canvas上绘制一帧画面

demo 代码 (将视频画面红色调高 原理r g b 中的调高)

<!---------------- 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 );

}

 

注意

如果视频或者图片所在的域名 跟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给视频图片添加特效

标签:

原文地址:http://www.cnblogs.com/lionsblog/p/4530909.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!