https://blog.csdn.net/yyjjyysleep/article/details/82796856

wx.getImageInfo({
  src: pics, //请求的网络图片路径
  success: function (res) {
    // console.log('下载网络图片成功', res, res.path, res.width / 375 * 334, res.height / 375 * 210)
    // if (res.width < 334) {
    //   ctx.drawImage(res.path, 0, 0, 334, res.width / 375 * res.height, 15, 190, 334, 210);
    // }
    // var iamgeSize = that.imageSize({ width: res.width, height: res.height }, 334, 210)
    // ctx.drawImage(res.path, 0, 0, res.width / 375 * 334, res.height / 375 * 210, 15, 190, 334, 210);

    var iamgeSize = that.imageSize({ width: res.width, height: res.height }, 334, 210)
    ctx.save();
    that.roundRect(ctx, 15, 190, 334, 210, 0, '', '') // 画边框
    ctx.drawImage(res.path, 15 - (iamgeSize.width - 334) / 2.0, 190, iamgeSize.width, iamgeSize.height)
    ctx.restore();
    ctx.draw()
  },
  fail: function (res) {
    console.log('下载网络图片失败', res)
  }
})


// 图片适配（aspectFill）
  imageSize: function (imageSize, w, h) {
    if (imageSize.width < w) {
      if (imageSize.height < h) {
        var scale1 = imageSize.height / imageSize.width;
        var scale2 = h / imageSize.height;
        if (scale1 > scale2) {
          imageSize.height = imageSize.height / imageSize.width * w;
          imageSize.width = w
        } else {
          imageSize.width = imageSize.width / imageSize.height * h;
          imageSize.height = h
        }
      } else {
        imageSize.height = imageSize.height / imageSize.width * w;
        imageSize.width = w
      }
    }
    else if (imageSize.height < h) {
      if (imageSize.width < w) {
        var scale1 = imageSize.height / imageSize.width;
        var scale2 = h / imageSize.height;
        if (scale1 > scale2) {
          imageSize.height = imageSize.height / imageSize.width * w;
          imageSize.width = w
        } else {
          imageSize.width = imageSize.width / imageSize.height * h;
          imageSize.height = h
        }
      } else {
        imageSize.width = imageSize.width / imageSize.height * h;
        imageSize.height = h
      }
    }
    else {
      var scale1 = imageSize.height / imageSize.width;
      var scale2 = h / imageSize.height;
      if (scale1 > scale2) {
        imageSize.height = imageSize.height / imageSize.width * w;
        imageSize.width = w
      } else {
        imageSize.width = imageSize.width / imageSize.height * h;
        imageSize.height = h
      }
    }
    console.log('改变imageSize', imageSize.width, imageSize.height)
    return imageSize;
  },
  // 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
  roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
    let that = this;
    // 开始绘制
    ctx.beginPath()

    // 绘制左上角圆弧 Math.PI = 180度
    // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

    // 绘制border-top
    // 移动起点位置 x终点、y终点
    ctx.moveTo(x + r, y)
    // 画一条线 x终点、y终点
    ctx.lineTo(x + w - r, y)
    // ctx.lineTo(x + w, y + r)

    // 绘制右上角圆弧
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

    // 绘制border-right
    ctx.lineTo(x + w, y + h - r)
    // ctx.lineTo(x + w - r, y + h)

    // 绘制右下角圆弧
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

    // 绘制border-bottom
    ctx.lineTo(x + r, y + h)
    // ctx.lineTo(x, y + h - r)

    // 绘制左下角圆弧
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

    // 绘制border-left
    ctx.lineTo(x, y + r)
    // ctx.lineTo(x + r, y)

    if (fillColor) {
      // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
      ctx.setFillStyle(fillColor)
      // 对绘画区域填充
      ctx.fill()
    }

    if (strokeColor) {
      // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
      ctx.setStrokeStyle(strokeColor)
      // 画出当前路径的边框
      ctx.stroke()
    }
    // 关闭一个路径
    // ctx.closePath()

    // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore
    ctx.clip()
  },