html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪

前言：

我们在网页中经常会用到图片展示，通常情况下会给一个固定的宽高来显示这个图片，然而从服务器端上传的图片大小是不确定的，如果直接按默认填充这个框有时候就会特别丑orz。作为一个完(wai)美(mao)主(xie)义(hui)者，让图片们尽可能优美地展现在网页上是一个很愉悦的责任。

今天就给太瘦小图片们伸展伸展或者给XXXL号减减肥吧(～￣▽￣)～

一、canvas绘图API

工欲善其事；必先利其器。

隆重请出主角：canvas绘图函数drawImage()，酱酱酱~

它能做什么：

1. 绘制图像：将加载的图像绘制到canvas上；

2. 绘制画布：将画好的一个canvas画到另一个canvas上；

3. 绘制视频：差不多就是用来视频截图，哇(@ο@) 好厉害。

怎么做(敲黑板：今天只教绘制图像啊，老师没备课)：

1. 获取图片

//1. 可以直接获取DOM元素

var img = document.getElementById("imgId")

//2. 或者新建一个

var img = new Image()

img.src = "imgsrc.jpg"

获取canvas上下文

//1. 获取画布

var canvas = document.getElementById("canvasId")

//2. 获取画布上下文

va