微信小程序图片压缩上传

---

前言

微信小程序图片压缩、预览、删除、上传

---

一、效果

二、使用步骤

1.wxml

代码如下：

<view>
	<view wx:for="{{images}}" class="show-box">
		<image class="show-img" src="{{item}}" bindtap="showImg" data-index="{{index}}"></image>
		<view class="show-del" bindtap="delImg" data-index="{{index}}">删除</view>
	</view>
	<image class="add-img" src="../../images/icon/tupian.png" bindtap="chanceImg" wx:if="{{images.length <= 5}}"></image>
</view>

<!-- 压缩照片canvas -->
<canvas canvas-id='attendCanvasId' class='myCanvas' style="width:{{canv.width}}px; height:{{canv.height}}px;"></canvas>
<!-- 压缩照片canvas结束 -->

2.wxss

代码如下：

/* 图片 */
.add-img{
  width: 150rpx;
  height: 150rpx;
  margin-left:50rpx;
  margin-top: 20rpx;
  font-size: 150rpx;
  color: #999;
  text-align: center;
  line-height: 150rpx;
  display: inline-block;
}
.show-box{
  display: inline-block;
  position: relative;
  margin-left: 50rpx;
  margin-bottom: 20rpx;
  width: 150rpx;
  height: 190rpx;
}
.show-img{
  width: 150rpx;
  height: 150rpx;
  border: 1px solid #999;
  display: inline-block;
  box-sizing: border-box;
}
.show-del{
  width: 150rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 26rpx;
}
.show-del:active{
  color: #93b1ee;
}
/* 图片结束 */

/* 压缩照片canvas */
.myCanvas {
  position: absolute;
  top: -9999rpx;
  left: -9999rpx;
}
/* 压缩照片canvas */

2.js

代码如下：

/**
* 页面的初始数据
*/
data: {
 images: [], //拍照图片
 upImages: [], //上传后图片路径
 window_heigt: '', //屏幕高
 window_width: '', //屏幕宽
 canv: {
   width: '', //canvas宽
   height: '', //canvas高
 },
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
 var that = this;
 wx.getSystemInfo({
   success: function (res) {
     //获取屏幕窗口高度和宽度
     that.data.window_heigt = res.windowHeight
     that.data.window_width = res.windowWidth
   },
 })
},

//拍照或选择图片
chanceImg: function () {
  var that = this;
  wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
    sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
    success: res => {
      that.getCanvasImg(res.tempFilePaths);
    }
  })
},
//压缩并获取图片
getCanvasImg: function (tempFilePaths) {
  var that = this;
  wx.showLoading();
  wx.getImageInfo({
    src: tempFilePaths[0], //图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径,  
    success: res => {
      that.data.canv.width = that.data.window_width;
      that.data.canv.height = that.data.window_width / res.width * res.height;
      that.setData({
        canv: that.data.canv
      })
      const ctx = wx.createCanvasContext('attendCanvasId');
      setTimeout(() => {
        ctx.drawImage(tempFilePaths[0], 0, 0, that.data.canv.width, that.data.canv.height);
        ctx.draw(true, function () {
          wx.canvasToTempFilePath({
            canvasId: 'attendCanvasId',
            success: function (res) {
              wx.hideLoading();
              that.data.images = that.data.images.concat(res.tempFilePath)
              that.setData({
                images: that.data.images
              })
            },
            fail: function (e) {
              that.getCanvasImg(tempFilePaths);
            }
          });
        });
      }, 1000);
    },
    fail: () => {},
    complete: () => {}
  });
},

//预览图片
showImg: function (e) {
  var index = e.currentTarget.dataset.index;
  const images = this.data.images
  wx.previewImage({
    current: images[index], //当前预览的图片
    urls: images, //所有要预览的图片
  })
},
//删除图片
delImg: function (e) {
 var that = this;
 var index = e.currentTarget.dataset.index;
 that.data.images.splice(index, 1);
 that.setData({
   images: that.data.images
 })
},
//提交 递归上传图片
sub: function () {
  var that = this;
  if (that.data.images.length > 0) {
    wx.uploadFile({
      url: url, //接口地址
      filePath: that.data.images[0],
      name: 'file',
      formData: { //HTTP 请求中其他额外的 form data 
      },
      success: function (res1) {
        //图片路径根据返回数据修改
        var data = JSON.parse(res1.data);
        that.data.upImages.push(data.data.imgUrl);
        that.data.images.shift();
        that.sub();
      },
      fail: function (res) {
        // console.log(res);
        wx.hideLoading();
        wx.showModal({
          showCancel: false,
          title: '提示',
          content: '上传图片错误，请稍后再试！'
        })
      }
    });
  } else {
    //这里写提交的ajax请求
    
  }
},

---