"小白,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 宽度和高度去掉看一下效果."
"他的默认宽度和高度是 300×150 像素,所以我们对 canvas 进行宽度高度控制的时候最好在 canvas 属性上直接设定宽度和高度."
"这样就没有问题了!在实际使用的时候位图重绘可能有很多需求,你需要根据需求设定对应的绘制参数,我希望你能把 drawImage 参数做不同变化进行测试.主要做下面三个功能的练习"
1,图片裁剪;
2,绘制到 canvas 指定位置,如右下角;
3,如何通过 jQuery 动态更改 canvas 宽度和高度(通过 attr 更改 canvas 属性)后,还能正确重绘图片.
想学 H5 的朋友可以关注老炉,您的关注是我持续更新《小白 HTML5 成长之路》的动力!
来源: http://www.jianshu.com/p/59ee6d73187d