《小白H5成长之路47》将外部图片绘制到canvas上
文章图片
“小白，canvas绘制图形功能自己看了么？”
“看了，我自己画了些圆和线条，还绘制了问题，不过感觉没什么实用价值。”
“这些功能对于做图表还是很有用的，了解一下就可以了，我们今天聊聊canvas在web前端应用中最常用的一个功能——重绘外部图片。”
“外部图片直接插入到网页上不行么？为什么要在canvas中重绘呢？”
老朱说：“假如用户上传头像的时候图片格式特别大，我们就可以把头像先在canvas中重绘一下，然后再把重绘好的图片发送到服务器进行保存，这样用户以后使用头像的时候，图片格式就非常小了。从今天开始我们实现一下图片上传的功能，你先创建一个空的html文件，然后插入一个canvas标签。”
文章图片
小白很快便布局好了，说道：“好了，我还用css控制了canvas的宽度和高度！”
老朱看完以后说道：“在javascript中有一个Image类，他是用来对图片进行操作的类，我们可以通过实例化一个Image对象来做一些图片的操作，比如：”
文章图片
“这段代码实例化了一个img图片对象，通过img的路径（src）属性可是设置图片的路径。在canvas中绘制图片用到的是drawImage(img,sx,sy,swidth,sheight,x,y,width,height)方法，这里第一个参数就是图片对象，sx和sy是裁剪的位置，swidth和sheight是要使用的图片对象的宽度和高度，x和y是图片在canvas中的坐标位置，width和height是最终显示的图片的宽和高。它还有一个重载方法是drawImage(img,x,y），这个方法只考虑图片对象和x轴y轴。”
小白有点不明白，说道：“感觉有点晕啊！”
老朱：“没关系，我们通过一个实例看看怎么绘制图片。”
文章图片
文章图片
“我现在使用了三个参数进行绘制，第一个参数是img对象，第二个参数是图片距离canvas左端的距离，第三个参数是图片距离顶端的距离。如果希望图片从左上角开始重绘，我们可以把后两个参数都设置为0。”
文章图片
小白说：“怎样才能让图片跟canvas高度和宽度一致呢？”
老朱：“这里我们就需要使用drawImage(img,sx,sy,swidth,sheight,x,y,width,height)方法了，可以看出sx、sy、x、y都应该取0值。width和height应该跟canvas宽度高度一致。关键是swidth和sheight的值。”
小白：“按照字面意思理解，这里是要使用的图片的高度和宽度，那应该是取图片的原始宽度和高度吧！”
老朱：“恩，是的，要拿到它的原始高度和宽度，可以通过Image对象的width和height属性获取，不过直接取会有问题，你可以先看一下直接取的问题。”
文章图片
文章图片
小白：“为什么取不上呢？”
老朱：“当img的src属性指向对应地址以后，浏览器无法瞬间拿到图片的宽度和高度，我们需要等图片加载完成以后才能获取（除非图片加载过并且在缓存中才能取到），所以保险起见我们需要使用当图片加载完成（onload）的方法。”
文章图片
文章图片
“这样无论是不是首次加载图片，都可以拿到图片原始宽度和高度了，最后我们在onload方法中重绘图片就可以了。”
文章图片
文章图片
小白：“感觉还是不对啊，图片比例有问题！”
老朱：“这正是我们要说的图片重绘很重要的一个问题，通过css控制canvas宽度和高度之后，canvas只是按比例进行了变化，也就是说canvas其实是变形的。现在把canvas的css宽度和高度去掉看一下效果。”
文章图片
【《小白H5成长之路47》将外部图片绘制到canvas上】“他的默认宽度和高度是300×150像素，所以我们对canvas进行宽度高度控制的时候最好在canvas属性上直接设定宽度和高度。”
文章图片
文章图片
“这样就没有问题了！在实际使用的时候位图重绘可能有很多需求，你需要根据需求设定对应的绘制参数，我希望你能把drawImage参数做不同变化进行测试。主要做下面三个功能的练习”
1、图片裁剪；
2、绘制到canvas指定位置，如右下角；
3、如何通过jQuery动态更改canvas宽度和高度（通过attr更改canvas属性）后，还能正确重绘图片。
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！
推荐阅读
- 读完《摆渡人》
- 影爆能量|影爆能量 | 寒战2！真相即将引爆！
- 追梦路上，星光闪烁
- 《人生定位》－虽然很赤裸，但确实有些顿悟
- 《甄嬛传》扮猪吃老虎的淳常在，才是职场最该防着的那号人
- 由唐僧想到佛学
- 深度学习|2. 刘二大人《PyTorch深度学习实践》作业--梯度下降
- 【吐槽三秒~喜欢的书啊~】《尸语故事》
- 《思路决定出路》
- 1.读原文:《班主任工作漫谈》??第一章:P25–P28笑对人生