引入

前段时间有个需求触及小顺序复原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这个功用)，现阶段越发适宜的处置惩罚方式照样上传到后端来处置惩罚图片花样。