图片压缩小程序疑难问题手账（持续更新）

项目介绍

最近在做一个图片压缩小程序，主要用于对上传的图像进行尺寸缩放，大小压缩，图片可以在小程序本地进行操作，不使用服务器，确保隐私安全。

一.计划

• 设置滑动选择条，用于明确最终图像的大小（KB）并实时显示数值，预计时间4.30
• 设置下拉选择框，用于明确最终图像的尺寸，选项包括一寸，二寸，三寸等，预计时间5.5
  目前4.30，但是上面两项都已经完成了，可以给大家展示一下我的最新界面：
  
• 设置“开始处理按钮”，将图片，滑动条和下拉框的数值都传送给算法模块，预计时间5.12
• 设置新的page页，包含一个处理后图像的显示框和“保存到相册”按钮，预计时间5.19
• 算法模块根据下拉数值进行尺寸裁剪，预计时间5.30
• 根据滑动条数值进行图像压缩6.20
• 算法返回处理后图像6.30
  5.19已完成上述所有，下一步：
• 结果页增加结果图像的尺寸和大小
• 发布小程序，投产！

二.小程序前端

1.如何通过点击图片调用选择器？

将picker写到image外层即可，示例代码如下：

<picker mode="selector" range="{{selectItems}}" bindchange="selectorchange">
  <image class="image1" src="{{src}}" mode="aspectFit" bindload="imginfo"></image>
<view class="text_info">当前选择：{{selector}}</view></picker>```

2.在wx接口函数内得到的结果如何反馈到外层？

这里就涉及到了js里that和this的用法，先在wx函数外定义that：

var that=this

然后在wx函数内部使用：

that.setData({
global:local})

完美解决！

3.如何在radio组件中插入图例？

有时候我们想给单选框的选项加一些图例，方便第一次使用的客户理解。例如我想给选择背景颜色加上颜色示例，具体做法如下：

<radio class="radio_red" value="red" checked="true" >
  <image class="image2" src="/resources/red.png" mode="aspectFit">
  </image>
  <text>红底 </text>
</radio>

效果图：

这样是不是方便理解多了？

三.javascript异步编程

1.promise初体验

说到异步编程就离不开promise，因为异步执行的操作在js里被封装成了promise对象。promise对象包含两个参数resolve和reject，所以我们在构造promise的时候一般采用这样的格式：

new Promise(function (resolve, reject) {
    ...
    reject("");
    resolve("");
})

这里的resolve代表promise对象调用成功后的返回值，reject代表调用失败后的返回值，调用如下：

promise.then().catch().finally()

then后的操作会使用resolve的返回值
catch后的操作会使用reject的返回值
当然这种方法还是略显生涩，如果下一步要做的事还有很多，岂不是都要嵌套进then()里面去了吗？于是就有了

2.总结promise，async，await用法——三板斧

第一板：先定义一个promise的业务子流程
第二板：然后定义一个aysnc的业务主流程，
第三板：在该主流程中，await 前述业务子流程。
例：

// 定义一个异步函数，3秒后才能获取到值(类似操作数据库)
function getSomeThing(){//第一板
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('获取成功')
},3000)
})
}

async function test(){//第二板
let a = await getSomeThing();//第三板
console.log(a)
}
test(); // 3秒后输出：获取成功

四.算法

1.Canvas：画布的尺寸必须大于画布上所绘图片的尺寸，否则绘制出来的图片只能显示部分。

我的canvas定义如下：
wxml：

<canvas id="avatarCanvas" canvasId="avatarCanvas" type="2d"
    style="position: absolute;left:-10000px;top:-10000px;width:1500px;height:2000px"></canvas>

为了确保所绘图片的尺寸的尺寸小于这一尺寸，对图片尺寸进行约束：
js：

		const maxWidth=1500;//设置最大分辨率
        const maxHeight=2000;
        if (dimgW > maxWidth) {
          const ratio = maxWidth / dimgW
          dimgW = maxWidth
          dimgH = dimgH * ratio
      }
      if (dimgH > maxHeight) {
          const ratio = maxHeight / dimgH
          dimgW = dimgW * ratio
          dimgH = maxHeight
      }

2.dpr指设备像素，真实像素*设备像素=显示像素：

为此，使用scale函数对像素进行缩放展示：
js：

const dpr = wx.getSystemInfoSync().pixelRatio*0.1 ;//，影响显示清晰程度
canvas.width=dimgW*dpr;
canvas.height=dimgH*dpr;//指定画布的宽高为目标宽高*dpr，即显示宽高而非实际宽高
ctx.scale(dpr,dpr);//按比例缩放

由于我的小程序里最大使用了六寸的图片，如果按照实际显示手机屏幕根本塞不下，所以我乘以了0.1，只影响在线预览，不影响保存后文件的分辨率。

3.图片压缩完成后使用wx.saveImageToPhotosAlbum保存，报错：unable to fetch

问题出在函数获取不到图片，参考了网上的说法，在wx.saveImageToPhotosAlbum之前增加wx.getImageInfo，确保图片已获取后在进行保存操作。代码如下：
js：

saveButton:function(e){
    var that=this;
    wx.getImageInfo({
      src: that.data.src,
      success: function (res) {
        let path = res.path;
        console.log("getimagepath",path)
        wx.saveImageToPhotosAlbum({
          filePath:path,
          success(res) {
            wx.showToast({
            title: '保存图片成功',
          })
        },
        fail: function (err) {
          console.log(err);
          wx.showToast({
            title: '保存图片失败' ,
          }) }
        })
      }
    })
      },

4.使用getfileinfo对处理后的图片再次获取质量信息

这里网上很多地方讲的不太对，主要是因为微信已经不再提供wx.getfileinfo接口,而是把这个函数放到了文件管理器中，代码如下：
js：

wx.getFileSystemManager().getFileInfo(
        {
          filePath:tempfile,
            success(res)
          {
            let imagesize=Number(res.size/1024);
            console.log("此时临时文件大小为 KB",imagesize)
            resolve(imagesize)
          }
        })

5.getfileinfo与compress之间存在异步执行，而这两个函数在微信小程序里均不支持promise调用

如图：

不支持promise带来什么问题呢？
本次压缩后的图片启动getfileinfo检测质量，还未检测完结果便已进入下一次压缩了，导致循环条件形同虚设。因此解决方案：
1.将getfileinfo用promise包装起来，resolve(res.size)
2.给调用getfileinfo的函数加async修饰
3.调用getfileinfo的时候加await修改
需要注意的一点是：
使用一个标志位来判断是否已完成文件质量检测是不可行的，我曾尝试令：
js：

let isGetinfo=false;//初始化
wx.getFileSystemManager().getFileInfo(
      {
        filePath:tempfile,
          success(res)
        {
          
          isGetinfo=true;//完成后置为true
        imagesize=res.size/1024;
        console.log("缩放后临时文件大小为 KB",imagesize)
        },
        fail(res){
          console.log("fail:",res)
        }
      })
while (isGetinfo==false){}

实际上这种写法完全不可行，令代码陷入了死循环，这说明在进行while循环的时候getfileinfo无法同步执行了，while和getfileinfo都处于同一进程，同一线程内，因此只有上述一条路可走。

6.使用wx.compressImage进行循环压缩

两种方案：
1.quality不变，例如80，但是每次压缩后的图像作为下一次的输入图像，循环压缩。事实证明效果不可行，这可能与jpg压缩算法有关，一个quality对应一个压缩质量。
2.每次输入图像不变，都为原图，quality依次减少。事实证明效果非常奈斯！如下图：

可以看到经过42次压缩后文件质量压缩到了我们想要的大小，且每一次循环都达到了压缩效果，非常奈斯！