最近在开发小程序,需要使用压缩图片,遂做出如下总结。
👇👇👇
1. wxml
首先需要在wxml
文件中写一个<canvas></canvas>
。给一个绝对定位样式,这样会隐藏到页面中。不过我习惯在调试的时候,让其显示出来。等调试ok之后,再将其隐藏起来。
1 | <canvas canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px; position: absolute;left:-1000px;top:-1000px;"></canvas> |
2. javaScript
首先使用
wx.chooseImage()
方法从相册选取一张照片- 可获得该照片的大小,可以用来筛选体积比较大的图片
使用
wx.getImageInfo()
拿到该图片信息,包括:- 图片原始的宽/高
可以通过该原始宽/高来计算该图片在
canvas
的大小。使用
wx.createCanvasContext()
来画图。使用
wx.canvasToTempFilePath()
将canvas
画板转化成最终的压缩后的图片路径
1 | wx.chooseImage({ |
3. 遇到的问题
问题:
在开发过程中,发现一个比较有意思的事情:🤔🤔
在使用wx.chooseImage()
方法时,在success()
回调函数中拿到选择的图片路径,在显示到页面上之后。有的会出现向左偏转90度的问题。而其他都是正常方向显示。
一开始猜测是图片体积大小影响显示方向。在经过若干测试后发现,并不是体积问题。
后来又猜测是图片的尺寸问题,但经过验证后确定,也并不是尺寸影响,😵
解决方法:
在wx.chooseImage()
后,继续使用wx.getImageInfo()
方法。在该方法的success()
回调函数中可以拿到图片的原始尺寸。:
1 | // 来自于微信官网文档 |
我上传的图片都是原始宽度小于原始高度的图片,如960*1920
的照片。在上传该图片后,打印该图片的原始宽高,会发现变成了1920*960
的尺寸。这也就是其“摔倒”的证据。所以可以在wx.getImageInfo()
中判断该图片的宽高。如果他的宽 > 高
,就说明该图片“摔倒了”。需要添加让其转过来的代码。否则不需要操作。
4. 结语
在小程序开发过程中,时常会遇到类似的问题。并且在各大论坛上也找不到相关的解决方法,只能通过自己的小操作来实现业务。
打铁还需自身硬呀~