微信小程序-canvas压缩图片使用入门

2019-05-29 本文已影响0人渺渺兮余木

微信小程序canvas组件官方文档

canvas组件介绍

<canvas style="width: 200px;height: 200px;"
                canvas-id="myCanvas"
                disable-scroll="{{false}}"
                bindtouchstart="startTouch"
                bindtouchmove="moveTouch"
                bindtouchend="endTouch"
                bindtouchcancel="cancelTouch"
                bindlongtap="longTap"
                binderror="canvasBindError"</canvas>

官方文档中对canvas属性均有介绍，这里对于入门简要说明一下：

canvas 为画布组件名
style 定义画布样式参考CSS教程这里定义一个宽200px，高200px的画布组件
canvas-id 设置该画布的id（可看做该画布的名字）
disable-scroll 类型为Boolean 官方解释：当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
以下类型顾名思义分别为开始触碰、滑动、结束触碰动作以及触碰时被打断动作、长按动作和出现错误时属性

压缩图片

<!-- wxml中内容 -->
<canvas class="myFanvas" style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>
<button bindtap='chooseImage'>选择图片绘制到屏幕</button>

//js中data
data:{
  imageW:[],//用于存放选中图片的宽
  imageH:[],//用于存放选中图片的高
}

//js文件内容
chooseImage:function(){
    var that = this
    //选择图片
    wx.chooseImage({
      count:1,//只可选一张图，最高可为9
      success: function(res) {
          wx.getImageInfo({
            src: res.tempFilePaths,
            success(res){
              that.data.imageW.push(res.width)//将图片宽放入data中
              that.data.imageH.push(res.height)//将图片高放入data中
            }
          })
        const ctx = wx.createCanvasContext("myCanvas")//创建画布上下文
        ctx.drawImage(res.tempFilePaths[0], 0, 0, that.data.imageW[0], that.data.imageH[0],0,0,200,200)//描述图片到画布上
        ctx.draw()//绘制画布
      }
    })
  }

上述代码简介
1.首先在wxml文件中添加一个canvas-id="myCanvas"的画布组件和一个button，点击该button触发js中chooseImage函数
2.wx.chooseImage()为微信原生API，用于选择手机中的photos或者使用相机拍照
3.在wx.chooseImage()中success（图片选择成功后的回调函数），创建CanvasContext实例ctx
4.使用ctx.drawImage()将第一张图片描述到id为myCanvas的canvas组件，请注意描述的内容并不能显示到canvas上
5.这里res.tempFilePaths[0].width和res.tempFilePaths[0].height为所选图片的宽高，而200,200为绘制到canvas上的宽高
6.使用ctx.draw()将上述中的所有描述内容绘制到画布上

//js续
showImage:function(){
    var that = this
    wx.canvasToTempFilePath({
      x:0,
      y:0,
      width: 200,
      height: 200,
      destWidth:100,
      destHeight:100,
      canvasId: "myCanvas",
      quality: 1,
      success(res) {
        that.setData({
          imgFilePath: res.tempFilePath
        })
      }
    })
  }

<!-- wxml中内容 -->
<image style='width: 200px; height: 200px;' src="{{imgFilePath}}" ></image>

上述代码简介
1.使用wx.canvasToTempFilePath()将画布中的内容导出为图片，并将该图片的临时地址写入data中
2.wx.canvasToTempFilePath()中x、y为所截取图片左上角在canvas上的位置，width、height为图片右下角在canvas上的位置，destWidth、destHeight为输出图片的宽高，上述所有变量赋值单位均为px
3.可以在wxml中添加一个view组件显示该图

将压缩后的图片存入手机

//js续
saveImage:function(){
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imgFilePath,
      success:function(){
        console.log("保存成功")
      }
    })
  }

上述代码简介
1.添加一个函数用于存放图片到系统相册
2.使用wx.saveImageToPhotosAlbum()保存图片，其中filePath为该图片临时路径

总结

1.在canvas中创建一个canvas组件，不在页面上显示该组件思路：将该组件放在wxml最下方，在将该组件向右移出屏幕范围
示例

.myFanvas{
  position: fixed;
  left: 1110rpx
}

2.使用wx.chooseImage()选择系统照片或调用相机拍照
3.使用 wx.createCanvasContext()、ctx.drawImage()、draw()将图片写入canvas中
4.使用wx.canvasToTempFilePath()将canvas中内容导出为图片，默认格式png，也可使用fileType:"jpg"将格式改为jpg，现只支持两种；已压缩完成
5.使用wx.saveImageToPhotosAlbum()将导出的图片存入系统相册