前言
又是好久好久好久没更新了,太懒了
这次记录一下在做mini项目中遇到的一个问题,当时没时间解决,mini结束后还是打算看看这个问题。
问题说明
当时是这样的,微信小程序在上传照片后,会有一定概率旋转,查阅了资料之后,发现是和图片中携带的exif信息中的orientation这个参数有关。
这里有一个关于EXIF 和 Orientation 相关的传送门:
使用 JavaScript 读取 JPEG 文件 EXIF 信息中的 Orientation 值
当时是让想让后端进行解析并旋转的,不过后端说有时候能拿到这个信息,有时候拿不到,这个是可能小程序在上传时设置是否压缩有关,如果压缩了,会将exif信息给删除。
后面由于图片上传到服务器前也需要预览,所以在后端进行旋转是不合适的。
前端旋转的话看了一下,小程序中通过getImageInfo这个接口中可以获得orientation 的信息,喜大普奔,那我们只要知道旋转的角度,再旋转回来即可。
解决方案
小程序 orientation 参数
小程序 orientation 参数情况如下所示:
小程序图片旋转关键代码
图片的旋转处理这里用到了canvas
在wxml文件中添加canvas元素,这里id我就设置的为canvas
1 | <canvas canvas-id="canvas" style="width:{{imageWidth}}px;height:{{imageHeight}}px;position:absolute;top:200%" ></canvas> |
这里具体讲一下旋转180度的情况
1 | wx.getImageInfo({ |
三步走:
1、这里通过translate将原点设置为图像中心
2、通过rotate进行旋转相应的角度,这里rotate是以刚刚设置的原点为中心进行旋转的
3、通过drawImage绘制图片
这样图片就旋转好了吗?
当然还没有,这只是在canvas上完成了旋转,需要将canvas生成图片
【注】由于canvas的绘制(draw())需要一定的时间,所以这里设置了一个定时器,这里设置了2秒,如果没有这个定时器,可能会发生图片并没有绘制结束就转为图片的情况,那图片可能就是空白的。
1 | drawImage:function(path) { |
【注】有关canvas的旋转,你需要了解一下canvas的坐标系的问题,一开始没有先看这方面的内容,想当然了,导致绘制出来的东西是空白的,后面了解了之后发现就是坐标系没弄清楚,导致设定绘制的图片时,坐标系的值弄错了,画到了画布外面,导致空白,这里给一个传送门,大家可以看这篇文章:
canvas 图像旋转与翻转姿势解锁
旋转90度和旋转270度同理,这里不再赘述
贴一下完整代码
当然,可能还有镜像翻转的情况,这里比较懒,就没弄了,也是差不多的。
1 | <view class="container" style=""> |
1 | chooseImage:function(){ |