canvas实现图像截图展示

最近在做项目的用到了许多canvas的知识点，发现canvas在图片渲染上很有意思

目前在做的就是使用canvas+定时器从后台取数据，然后达到一种播放视频的效果，然后再根据需求在canvas上进行渲染需求效果等

其中一个我觉得比较有意思的就是用canvas截取部分图像后再进行展示

逻辑就是后台会传递一个对角坐标的矩形数据，然后前端需要把对应矩形的图像截取下来再其他地方进行展示

刚开始写的时候我也是一头雾水，好像没有什么特别好的方法直接截取图像

终于，终于.......

我们要进入正题了

我目前的方法还是使用两个canvas，一个用来正常渲染图片，一个就用来放置截取后的图像

先贴代码，再来解释实现过程

首先html结构

<canvas id="clip"></canvas><canvas id="canvas" width=640 height=320></canvas>

然后js

var clip = document.getElementById('clip');var canvas = document.getElementById('canvas');var context_clip = clip.getContext('2d');var context = canvas.getContext('2d');//渲染图像var img = new Image();img.src = 'xxx';img.onload = function(){context.drawImage(img, 0, 0, canvas.width, canvas.height);}//裁剪图像var clipImg = context.getImageData(x, y, w, h)var set = context_clip.putImageData(clipImg, 0, 0, 0, 0, w, h);var imgurl = clip.toDataURL();

说明一下代码，其实我们主要是用到了canvas两个API

getImageDate() 和 putImageData()

我们在渲染好图片后，在图片onload后就可以对我们想截取的图像进行图像数据的获取get

然后把获取到的数据put到我们早已经准备好渲染截图数据的canvas上

最后再使用toDataURL把用于截图的canvas转换成img需要的url我们就可以在其他区域展示截图的数据了

上面的代码使用的代数，并不是真实的数据，大家有时间可以自己试下哈

这个功能在我的项目中其实就是截头像，根据后台数据在定时器不断操控每一帧图片时对人头像的截取

实现这个一方面后台就不需要传人头像，只需要相对坐标就行，对带宽也节省了

这就是主要的内容了

不知道有没有更好的办法，有的话还请留言指教指教哈