小程序解决图片分享裁剪5:4问题

1、解决小程序中分享默认比率5：4导致图片被裁剪；

        为保持图片完整性使用下列方法：

在获取完图片后调用 function cutshareImf(url){} url:为需要处理的图片地址；

wx.js

//传入图片地址
cutShareImg(doctorImg){
    let that=this;
    wx.getImageInfo({
      src: doctorImg,  // 这里填写网络图片路径 
      success: (res) => {
        var data = res
        console.log(res)
        wx.createSelectorQuery()
        .select('#myCanvas') // 在 WXML 中填入的 id
        .fields({ node: true, size: true })
        .exec((res) => {
           // Canvas 对象
           console.log(res)
          const canvas = res[0].node
          // 渲染上下文
          const ctx = canvas.getContext('2d')
          let {width, path, height} = data
          // Canvas 画布的实际绘制宽高
          var widths = height*5/4
          const dpr = wx.getWindowInfo().pixelRatio
          var w = (widths-width)/2
          canvas.width = widths * dpr
          canvas.height = height * dpr
          ctx.scale(dpr, dpr)
          ctx.clearRect(0, 0, widths, height)
          // 图片对象
          const image = canvas.createImage()
          console.log(image)
          image.onload = () => {
            // 将图片绘制到 canvas 上
            ctx.drawImage(image, w, 0)
            wx.canvasToTempFilePath({
                canvas,
                success: res => {
                    // 生成的图片临时文件路径
                    const tempFilePath = res.tempFilePath
                    that.setData({shareimg: tempFilePath})
                },
              })
          }
          image.onerror = (err) => {
                console.log(err)
            }
          image.src= path
          // 生成图片
         
        })
      }
    });
  },

video.wxml

<canvas style="position: absolute; top: -1000px; left: -1000px; width: 640px; height: 640px; background: #000;" type='2d' id="myCanvas"></canvas>

分享时调用shareimg为分享图片的地址

注意：图片过大的时候导致界面画布加载过长导致微信小程序卡死情况；

        可以对下载的图片进行等比缩放使他画布大小变小