小程序上传图片的几种形态

被小程序的上传图片搞了好几天终于拿下了

第一种，直接上传的，基本能完成所有，但是上传原图的话不带压缩，手机的原图都大的可以就基本上要等好久，或者后端等太久带宽不足的时候就502了，上代码

Wxml

<image src="{{img}}" mode="aspectFit"></image>
<button bindtap="previewImage">上传</button>

Js

Page({

  data: {
    img:'/image/error.png',
  },

//上传
  previewImage: function() {
    var that = this;
    wx.chooseImage({
      success (res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          count: 1,
          sizeType: ['original', 'compressed'],//原图，压缩
          sourceType: ['album', 'camera'],//相册，相机
          url: app.globalData.host+'index/xcx/uploadFile', //后端接收地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            'dir': 'portrait', //给后端写数据
          },
          header: {
            msxcx:'msxcx'
         },
          dataType:"json",
          success (res){
            const data= JSON.parse(res.data)
            that.setData({
              img:data.src,
            })
            //do something
          }
        })
      }
    })
  }
})

第二种，绘制画布进行图片压缩，改造了一位大佬的代码，但是缺点就是全部都是png的图，有些上传上去的图比原图还要大，我的191K的图上传上去1.6M，上代码

Wxml

<image src="{{img}}" mode="aspectFit"></image>
<button bindtap='uploadImg' data-number="0">canvas上传</button>
<view style="width: 100%;position: absolute;z-index: -1; left: -10000rpx;top: 0;">
<canvas type="2d" id="canvas" style="width:{{cw}}px;height: {{ch}}px;"></canvas>
</view>

Js

Page({

  data: {
    img:'/image/error.png',
  },

//上传
  uploadImg(e) {
    var that = this;
    let index = e.currentTarget.dataset.number;
    let uploadFile = ''; //最后处理完，图片上传的图片地址
    wx.chooseImage({
      success(res) {
        //console.log(res)
        const tempFilePaths = res.tempFilePaths[0];
        wx.createSelectorQuery().select('#canvas').fields({node: true,size: true}, function (res) {
          const canvas = res.node;
          const ctx = canvas.getContext('2d');

          //获得原始图片大小
          wx.getImageInfo({
            src: tempFilePaths,
            success(res) {
               console.log('获得原始图片大小',res.width,res.height)
              var originWidth, originHeight;
              originHeight = res.height;
              originWidth = res.width;
             
              //压缩比例
              // 最大尺寸限制
              var maxWidth = 1200,
                maxHeight = 1200;
              // 目标尺寸
              var targetWidth = originWidth,
                targetHeight = originHeight;
              //等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先
              if (originWidth > maxWidth || originHeight > maxHeight) {
                if (originWidth / originHeight > maxWidth / maxHeight) {
                  // 要求宽度*(原生图片比例)=新图片尺寸
                  targetWidth = maxWidth;
                  targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                  targetHeight = maxHeight;
                  targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
              }

                //更新canvas大小
                that.setData({
                  cw: targetWidth,
                  ch: targetHeight
                });
                canvas.width = targetWidth
                canvas.height = targetHeight

                let img = canvas.createImage()
                img.src = tempFilePaths;
                img.width = canvas.width;
                img.height = canvas.height;
                img.onload = e => {
                 
                  ctx.clearRect(0, 0,img.width, img.height);
                  ctx.drawImage(img, 0, 0, img.width, img.height);
                 //console.log(img)
                  setTimeout(() => {
                    wx.canvasToTempFilePath({
                      canvas: canvas,
                      x: 0,
                      y: 0,
                      width: targetWidth,
                      height: targetHeight,
                      destWidth: targetWidth,
                      destHeight: targetHeight,
                      success: (res)　=> {
                       // that.setData({
                        //  img: res.tempFilePath
                       // })
                      //写入图片数组
                      var uploadpic = "uploadPic[" + index + "]";
                     // console.log(res)
                      that.setData({
                        [uploadpic]: res.tempFilePath
                      });
                      uploadFile = res.tempFilePath;

                      //保存到相册
                       wx.saveImageToPhotosAlbum({
                         filePath: res.tempFilePath,
                         success: (res) => {
                           console.log(res)
                         },
                         fail: (err) => {
                           console.error(err)
                         }
                       })
                      
                      //上传到服务器
                      wx.uploadFile({
                        url: app.globalData.host+'index/xcx/uploadFile', 
                        filePath: uploadFile,
                        name: 'file',
                        formData: {
                          'dir': 'portrait',
                        },
                        header: {
                          msxcx:'msxcx'
                       },
                        success(res) {
                          const data= JSON.parse(res.data)
                          that.setData({
                            img:data.src+'/img500',
                          })
                        }
                      })

                        
                     }
                   })
                 },500)
              }
            }
          })
        }).exec()
      }
    })

  }
})

第三种，继承第二种绘制画布，压缩base64 jpeg类型上传base64文件，目前比较省一些，速度还可以当前比较满意，上代码

Wxml

<image src="{{img}}" mode="aspectFit"></image>
<button bindtap='uploadBase' data-number="0">base64上传</button>
<view style="width: 100%;position: absolute;z-index: -1; left: -10000rpx; top: 0;">
<canvas type="2d" id="canvas" style="width:{{cw}}px;height: {{ch}}px;"></canvas>
</view>

Js

Page({

  data: {
    img:'/image/error.png',
  },

//上传
uploadOss(e) {
    var that = this;
    let index = e.currentTarget.dataset.number;
    let uploadFile = ''; //最后处理完，图片上传的图片地址
    wx.chooseImage({
      count: 1,
      sizeType: ['original'], //原图质量好，然后通过canvas压缩，微信压缩的就太糊了
      sourceType: ['album', 'camera'], //来源是相册和相机
      success(res) {
        //console.log(res)
        const tempFilePaths = res.tempFilePaths[0];
        wx.createSelectorQuery().select('#canvas').fields({node: true,size: true}, function (res) {
          const canvas = res.node;
          const ctx = canvas.getContext('2d');

          //获得原始图片大小
          wx.getImageInfo({
            src: tempFilePaths,
            success(res) {
              //console.log('获得原始图片大小',res.width,res.height)
              var originWidth, originHeight;
              originHeight = res.height;
              originWidth = res.width;
             
              //压缩比例
              // 最大尺寸限制
              var maxWidth = 1200,
                maxHeight = 1200;
              // 目标尺寸
              var targetWidth = originWidth,
                targetHeight = originHeight;
              //等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先
              if (originWidth > maxWidth || originHeight > maxHeight) {
                if (originWidth / originHeight > maxWidth / maxHeight) {
                  // 要求宽度*(原生图片比例)=新图片尺寸
                  targetWidth = maxWidth;
                  targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                  targetHeight = maxHeight;
                  targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
              }

                //更新canvas大小
                that.setData({
                  cw: targetWidth,
                  ch: targetHeight
                });

                canvas.width = targetWidth
                canvas.height = targetHeight

                let img = canvas.createImage()
                img.src = tempFilePaths;
                img.width = canvas.width;
                img.height = canvas.height;
            
                img.onload = e => {
                 
                  ctx.clearRect(0, 0,img.width, img.height);
                  ctx.drawImage(img, 0, 0, img.width, img.height);
                  var base64 = canvas.toDataURL("image/jpeg",0.85);//重点，就是他转换的格式和压缩大小，就是这一段找了我一天
                 
                     that.setData({
                          img: base64
                     })
                     //msrequest 这个是我自己写的回调函数，可以直接写wx.request
                     app.msrequest(app.globalData.host+'index/xcx/ossuploadbase64/',{base64:base64},'POST')
                          .then(res => {
                            console.log(res)
                            
                     });
                }
            }
          })
        }).exec()
      }
    })
  }
})