微信小程序的canvas与图片上传

画canvas：

//这个是选择图片，具体可以看微信的官方文档
wx.chooseImage({  
	count:1, //用户最大可以选择照片张数
	success(res){
        console.log('res',res)  //打印看里面的数据
        let src = res.tempFilePaths[0] //我限制只能上传一张，所以拿的是[0]的路径
        //调用wx.getImageInfo
	}
})

//获取图片信息
wx.getImageInfo({
	src: src ,
	success(res){
		//在这里进行canvas
        let path = res.path //本地图片路径
        let width = res.width //图片的宽
        let height = res.height //图片的高
        ctx.width = width;
        ctx.height = height;
        ctx.drawImage(path, 0, 0, width, height)
        ctx.draw(false, function () {
          setTimeout(function () {
            //调用wx.canvasToTempFilePath
          }, 1000)
        })
	}
})

//导出图片
wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: width,
     height: height,
     destWidth: width,
     destHeight: height,
     fileType: 'jpg', //输出jpg格式，图片会小很多，清晰度也不错
     canvasId: 'myCanvas',//绘制canvas的view的id
     success(res) {
       let tempFilePath = res.tempFilePath
       //上传图片uploads(tempFilePath)
     },
     fail(res) {
       console.log('canvasToTempFilePath fail', res)
     }
   }, this)

//上传图片
uploads(tempFilePath)
    wx.uploadFile({
      url: 'https://www.test.com', //仅为示例，非真实的接口地址
      filePath: tempFilePath,
      name: 'file',
      header: {
        'Content-Type': 'multipart/form-data',
      },
      method: "post",
      success(res) {
        let list = JSON.parse(res.data)
        let imgurlArr = that.data.imgurlArr //data中定义的imgurlArr数组，用来存图片路径
        imgurlArr.push(‘你的图片路径’)
        if (success) {
          that.setData({
            imgurlArr: imgurlArr,
          })
        } else {
        }
      },
      fail() {
      }
    })

//删除图片
del(e){
  let idx = e.currentTarget.dataset.idx
  let imgurlArr = this.data.imgurlArr
  let that = this
  wx.showModal({
    title: '',
    content: '确定删除该图片？',
    success(res) {
      if (res.confirm) {
        imgurlArr.splice(idx, 1)
        that.setData({
          imgurlArr: imgurlArr
        })
      } else if (res.cancel) {
      }
    }
  })
},

<!-- 
	页面
	myCanvas要注意处理，如果你把display设置为none，将会绘图失败：
	opacity:0;position:absolute;left:-{{canvasWidth}}px;top:-{{canvasHeight}}px
 --> 
<view>
  <view class="selbox" >
    <view class="seldetailbox1 recordbox">
      <view>图片上传：</view>
      <view class="recordimgbox">
        <image wx:if="{{imgurlArr.length > 0}}" wx:for="{{imgurlArr}}" wx:key="{{index}}" src="{{imgurlArr[index]}}" data-idx="{{index}}" bindtap="del" class="imgs"><icon type="clear"></icon></image>
        <image src="../../images/add.svg" bindtap="selphoto" class="addpic"></image>
      </view>
    </view>
  </view>
  <view style="opacity:0;position:absolute;left:-{{canvasWidth}}px;top:-{{canvasHeight}}px">
    <canvas canvas-id="myCanvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;"></canvas>
  </view>
</view>