微信小程序图片压缩

微高兄信小程序图片压缩有三种方法，一种是使用官方提供的接口 wx.compressImage(Object object) ；一种是通过压缩图片的大小，利用canvas重绘来得到压缩图片；最后一种安装第三方图片压缩包。

由于第一种方法网上很多人说压缩不明显或者失效，所以选择使用canvas重绘来实现图片压缩。同时，该种方法可以控制图片的最大尺寸，保持上传图片大小尺寸相差不多。在我们的学生节晚会小程序中，屏幕显示图片会比较美观一致。

1. 通过 wx.chooseImage 接口选择相机图片

2. 通过 wx.getImageInfo 接口获取图片信息（长宽，类型）

3. 计算压缩比例和最终图片的长宽

5. 通过 wx.canvasToTempFilePath 接口将画布内容导出为图片并获取图片路径

wxml 文件

在文件末尾插入 canvas 组件，通过设置left和配隐top值确保图片不会显示在可视范围内。

一定要设置 canvas-id，这是canvas绘图和导出图片必备的属性。

js 文件

设置与页面绑定的数据：canvas的大小，培念厅也是压缩后图片的大小

1. 将画布内容导出为图片时，指定destWidth和destHeight为压缩后图片的大小。这里遇到过玄学bug，不指定的话，有时候图片不会压缩到规定的大小。

canvas元素实际上有两套尺寸，一个是元素本身的大小，还有一个就是元素绘图表明的大小，

设置canvas的width和height属性，卜凯实际上是同时修改了它的元素本身的大小以及元素绘图表面的大小，

默认情况下canvas元素于其绘图表面都是300*150，

[html] view plain copy print?

<style>

canvas{

/*width: 600px*/

/*height: 300px*/

border: 1px solid #000

}

</style>

<吵运canvas id="型碰唤canvas" width="600" height="300">

canvas not supported

</canvas>

<script>

var canvas = document.getElementById('canvas')

var ctx = canvas.getContext('2d')

ctx.font = '30pt Arial'

ctx.fillStyle = 'red'

ctx.fillText('hello Canvas',100,100)

ctx.strokeText('hello Canvas',100,100)

</script>

可以用JS监控屏幕大小，然后调整Canvas的卖迹大小。在代码中加入JS

$(window).resize(resizeCanvas)

 function resizeCanvas() {

        canvas.attr("width", $(window).get(0).innerWidth)

     笑蠢   canvas.attr("height", $(window).get(0).innerHeight)

        context.fillRect(0, 0, canvas.width(), canvas.height())

 }

 resizeCanvas()

就可以了。

<canvas>标签只是图形容器，您必须使用脚本来绘制中升并图形。

---