简单的canvas加载图片与视频

最新推荐文章于 2024-09-29 10:59:53 发布

llx18042693031

最新推荐文章于 2024-09-29 10:59:53 发布

阅读量1.6k

点赞数 1

分类专栏： web前端文章标签： canvas 图片视频

本文链接：https://blog.csdn.net/llx18042693031/article/details/51588148

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用canvas加载图片与视频

简单介绍一下用canvas加载图片与视频的方法,并且对图片与视频做一些简单的渲染效果,并不难实现.

canvas加载图片需要的一些参数介绍

图像绘制:

方法	描述
drawImage()	向画布上绘制图像,画布或视频

用法:

直接加载图片:可以填写5个参数,this是指向当前要加载的图片,从画布0,0点开始.需要加载的宽度就是画布的宽高.
ctx.drawImage(this,0,0,canvas.width,canvas.height);

像素操作:

属性	描述
width	返回 ImageData 对象的宽度
height	返回 ImageData 对象的高度
data	返回一个对象，其包含指定的 ImageData 对象的图像数据

方法	描述
createImageData()	创建新的、空白的 ImageData 对象
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上

合成:

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上

其它:

方法	描述
save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()

代码块

首先在body内设定canvas,宽高300,500,有一个红色边框

<canvas id="canvas" width="300" height="500" style="border: 1px solid red;"></canvas>

script中实现加载图片与图片渲染的效果

获取canvas的id,并且返回一个用于在画布上绘图的环境是2d
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

canvas加载图片

var img = new Image();
img.src = 'img/1-16031Q922210-L.jpg';
img.onload = function () {
//设定图片大小
ctx.drawImage(this,0,0,canvas.width,canvas.height);
//获取图片像素
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);

//获取像素的数组
//由于图片的颜色都是由rgb三原色组成,所以通过循环获取图片中每一个像素点的颜色.
var piexls = imgData.data;
for (var i=0;i<piexls.length;i += 4) {
var r = piexls[i];
var g = piexls[i+1];
var b = piexls[i+2];

//对图片做黑白操作
var gray = parseInt((r+g+b)/3);
//将算好的灰色值重新写入数组
piexls[i] = gray;
piexls[i+1] = gray;
piexls[i+2] = gray;

//反色处理
piexls[i] = 255 - r;
piexls[i+1] = 255 - g;
piexls[i+2] = 255 - b;

}
//重新写入图片
ctx.putImageData(imgData,0,0);
}

原图
这里写图片描述
黑白

反色

视频加载

视频加载与图像加载大同小异,所以附上代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <video src="oxford-10秒.mp4" id="myvideo"></video>
        <canvas id="canvas" width="400" height="300" style="border: 1px solid red;"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');
        //获取videoid
        var video = document.getElementById("myvideo");
        video.oncanplay = function() {
            video.play();
            //获取视频每一帧
            function animate() {
                //把当前正在播放的一帧画面绘制到canvas上
                ctx.drawImage(video,0,0,canvas.width,canvas.height);
                //图片处理代码
                var videodata = ctx.getImageData(0,0,canvas.width,canvas.height);
//              console.log(videodata)
                var piexls = videodata.data;
                for (var i=0;i<piexls.length;i += 4) {
                var r = piexls[i];
                var g = piexls[i+1];
                var b = piexls[i+2];
                var gray = parseInt((r+g+b)/3);
                //将算好的灰色值重新写入数组
                piexls[i] = gray;
                piexls[i+1] = gray;
                piexls[i+2] = gray;
    }
                ctx.putImageData(videodata,0,0);
                window.requestAnimationFrame(animate);
            }
            animate();
        }
    </script>

</html>