复习
上一节，我们学习了从视频中获取一帧来绘画，具体操作方法是在视频播放的过程中获取dom，和正常从dom中获取图片没差别。
学习
这节中，我们将要学习如何在利用canvas来切图。
切图还是利用的是drawImage方法，不过这一次我们要注意好了，不然很容易混淆参数。
*传参介绍
drawImage(img,x,y,width,height,x2,y2,width2,height2)
看到一下传了9个参数，千万不要慌，首先我们看一下，这9个参数分别代表什么。
1.img表示我们从某一个渠道获取到的源图。
2.x,y表示源图上开始剪切区域的左上角坐标。源图坐标以图片左上角为原点。
3.width,height表示例要切出来的图片大小。千万记住，是要切出来的图片大小
4.x2,y2表示切出来的图片在canvas中位置的左上角。
5.width2,height2表示切出来的图片绘制到canvas中的大小
下面进行上手练习
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<img src="http://image.iget100.com/%E3%80%90%E9%AB%98%E6%95%88%E5%AD%A6%E4%B9%A0%E4%B9%A6%E5%8D%95%E3%80%91%E6%95%99%E4%BC%9A%E5%AD%A9%E5%AD%90%E4%B8%BB%E5%8A%A8%E5%AD%A6%E4%B9%A0%EF%BC%8C%E6%81%90%E8%BE%85%E7%97%87%E5%AE%B6%E9%95%BF%E4%B8%8D%E5%86%8D%E5%A4%A9%E5%A4%A9%E5%B4%A9%E6%BA%839" width="400" height="400">
<canvas id="mycanvas" width="400" height="400"></canvas>
</html>
<script>
const canvas = document.getElementById('mycanvas')
if (canvas.getContext) {
const ctx = canvas.getContext('2d')
const img = new Image()
img.src = "http://image.iget100.com/%E3%80%90%E9%AB%98%E6%95%88%E5%AD%A6%E4%B9%A0%E4%B9%A6%E5%8D%95%E3%80%91%E6%95%99%E4%BC%9A%E5%AD%A9%E5%AD%90%E4%B8%BB%E5%8A%A8%E5%AD%A6%E4%B9%A0%EF%BC%8C%E6%81%90%E8%BE%85%E7%97%87%E5%AE%B6%E9%95%BF%E4%B8%8D%E5%86%8D%E5%A4%A9%E5%A4%A9%E5%B4%A9%E6%BA%839"
img.onload = function () {
ctx.drawImage(img,320,180,200,200, 120,200,200,200)
}
}
</script>
|
需要注意的是，上图中的图片，原图是1080*1080的，为了方便展示我们才把它用设置成了400。