canvas批量绘制图片的时候 部分分辨率下绘制有问题

上面三张为原图分辨率 图1 图2 一起上传时候 分辨率是对的 但是内容都是图2的 如下

但是如果单传或者 传 图2 图3就不会出现这样的问题 按照查询的方法清空 画布也没有效果

下面是部分代码

<canvas  style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:fixed;left:100%;" id="picCanvas" type="2d"></canvas>

压缩图片代码

compressImg(imageList) {

      let _this = this;

      return Promise.all(imageList.map((file, index) => {

        return new Promise((resolve, reject) => {

          //获取原图片信息 canvas压缩实现

          wx.getImageInfo({

            src: file.src || file.path,

            success: function (res) {

              let canvasRatio = 1.1;

              let picWidth = res.width //图片原始宽高

              let picHeight = res.height

              if (file.size < 200 * 1024) {

                // 图片小于200k就不压缩

                resolve({

                  ...file,

                  src: res.path,

                  picWidth: picWidth,

                  picHeight: picHeight

                });

              } else {

                while (picWidth > 600 || picHeight > 600) { // 保证宽高在600以内（这里可以自行配置）

                  picWidth = Math.trunc(res.width / canvasRatio)

                  picHeight = Math.trunc(res.height / canvasRatio)

                  canvasRatio = canvasRatio + 0.1;

                }

                const query = _this.createSelectorQuery()

                query.select('#picCanvas').fields({

                  node: true,

                  size: true

                }).exec((ref) => {

                  try {

                    const canvas = ref[0].node

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

                    let dpr = wx.getSystemInfoSync().pixelRatio

                    //这里是设置css样式的宽高。

                    //属性宽高是css样式宽高的dpr倍，兼容不同机型，避免绘制的内容模糊。

                    _this.setData({

                      canvasWidth: picWidth / dpr,

                      canvasHeight: picHeight / dpr

                    })

                    canvas.width = picWidth

                    canvas.height = picHeight

                    const img = canvas.createImage()

                    img.src = res.path

                    img.onload = () => {

                      ctx.drawImage(img, 0, 0, picWidth, picHeight); //先画出图片

                      //延迟600ms，避免部分机型未绘制出图片内容就执行保存操作，导致最终的图片是块白色画板。

                      setTimeout(() => {

                        wx.canvasToTempFilePath({

                          fileType: "jpg",

                          canvas: canvas,

                          destWidth: picWidth,

                          destHeight: picHeight,

                          success: function (res) {

                            resolve({

                              ...file,

                              src: res.tempFilePath,

                              picWidth: picWidth,

                              picHeight: picHeight

                            });

                          }

                        }, _this)

                      }, 600)

                    }

                  } catch (e) {

                    //异常后的操作

                    console.log(e)

                  }

                })

              }

            }

          })

        })

      }));

    }

求大佬指点或者提供点思路 感谢