引入

前段时间有个需求涉及小程序还原H5当中的图片上传功能。
没有细节考虑好就跟后端的老哥说接口不用改直接前端处理。。。
现在想想真是心疼我自己

现阶段的一些思路。

服务器处理

直接上传流文件到服务器，然后在服务器做base64转换处理。

利用小程序canvasGetImageData方法和upng

• 既然是使用canvas方法，那么首先需要在wxml里添加一个canvas元素

  <canvas canvas-id="mycanvas"></canvas>

  如果不加，页面canvasGetImageData方法无法生成，display:none也不行

• js部分省略获取imgPath过程

  var canvasid='mycanvas'
  var ctx = wx.createCanvasContext(canvasid) //操作对应id的canvas
  
  ctx.drawImage(imgPath,0,0,width,height)//绘画图片，把图片放进去。这里的宽高可以使用wx.getImageInfo获取用户上传图片本来的宽高
  
  ctx.draw(function(){
      wx.canvasGetImageData({
          canvasId:canvasid //参数，canvas标签的id
          x:0,//起始位置，x坐标
          y:0,
          width:width,
          height:height,
          success:function(res){
              //引入upng，将图片转化成utf-8格式
              let pngData = upng.encoded([res.data.buffer].res.width,res.height）//再转化成base64
              let bs64 = wx.arrayBufferToBase64(pngData)
          }
      })
  });

• 必须引入upng组件
• 基础库必须大于1.9.0

通过小程序request资源请求(暂不可用)

• js部分省略获取imgPath过程

wx.request({
  url:imgPath,
  responseType: 'arraybuffer',//最关键的参数，设置返回的数据格式为arraybuffer
  success:res=>{
        let base64 = wx.arrayBufferToBase64(res);//把arraybuffer转成base64
        base64　= 'data:image/jpeg;base64,' + base64　//不加上这串字符，在页面无法显示的哦
        console.log(base64)　//打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢
      }
});

• 基础库必须大于1.9.0

总结

使用upng方法确实能解决问题，但是引入upng组件相对有些庞大(只相对于处理base64这个功能)，现阶段更加合适的处理方式还是上传到后端来处理图片格式。