微信小程序canvas組件官方文檔

微信小程序canvas組件官方文檔
canvas API

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>

官方文檔中對(duì)canvas屬性均有介紹，這里對(duì)于入門簡(jiǎn)要說明一下：

• canvas 為畫布組件名
• style 定義畫布樣式 參考CSS教程 這里定義一個(gè)寬200px，高200px的畫布組件
• canvas-id 設(shè)置該畫布的id（可看做該畫布的名字）
• disable-scroll 類型為Boolean 官方解釋：當(dāng)在 canvas 中移動(dòng)時(shí)且有綁定手勢(shì)事件時(shí)，禁止屏幕滾動(dòng)以及下拉刷新
• 以下類型顧名思義分別為開始觸碰、滑動(dòng)、結(jié)束觸碰動(dòng)作以及觸碰時(shí)被打斷動(dòng)作、長按動(dòng)作和出現(xiàn)錯(cuò)誤時(shí)屬性

壓縮圖片

<!-- wxml中內(nèi)容 -->
<canvas class="myFanvas" style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>
<button bindtap='chooseImage'>選擇圖片繪制到屏幕</button>

//js中data
data:{
  imageW:[],//用于存放選中圖片的寬
  imageH:[],//用于存放選中圖片的高
}

//js文件內(nèi)容
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")//創(chuàng)建畫布上下文
        ctx.drawImage(res.tempFilePaths[0], 0, 0, that.data.imageW[0], that.data.imageH[0],0,0,200,200)//描述圖片到畫布上
        ctx.draw()//繪制畫布
      }
    })
  }

上述代碼簡(jiǎn)介
1.首先在wxml文件中添加一個(gè)canvas-id="myCanvas"的畫布組件和一個(gè)button，點(diǎn)擊該button觸發(fā)js中chooseImage函數(shù)
2.wx.chooseImage()為微信原生API，用于選擇手機(jī)中的photos或者使用相機(jī)拍照
3.在wx.chooseImage()中success（圖片選擇成功后的回調(diào)函數(shù)），創(chuàng)建CanvasContext實(shí)例ctx
4.使用ctx.drawImage()將第一張圖片描述到id為myCanvas的canvas組件，請(qǐng)注意描述的內(nèi)容并不能顯示到canvas上
5.這里res.tempFilePaths[0].width和res.tempFilePaths[0].height為所選圖片的寬高，而200,200為繪制到canvas上的寬高
6.使用ctx.draw()將上述中的所有描述內(nèi)容繪制到畫布上

//js續(xù)
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中內(nèi)容 -->
<image style='width: 200px; height: 200px;' src="{{imgFilePath}}" ></image>

上述代碼簡(jiǎn)介
1.使用wx.canvasToTempFilePath()將畫布中的內(nèi)容導(dǎo)出為圖片，并將該圖片的臨時(shí)地址寫入data中
2.wx.canvasToTempFilePath()中x、y為所截取圖片左上角在canvas上的位置，width、height為圖片右下角在canvas上的位置，destWidth、destHeight為輸出圖片的寬高，上述所有變量賦值單位均為px
3.可以在wxml中添加一個(gè)view組件顯示該圖

將壓縮后的圖片存入手機(jī)

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

上述代碼簡(jiǎn)介
1.添加一個(gè)函數(shù)用于存放圖片到系統(tǒng)相冊(cè)
2.使用wx.saveImageToPhotosAlbum()保存圖片，其中filePath為該圖片臨時(shí)路徑

總結(jié)

1.在canvas中創(chuàng)建一個(gè)canvas組件，不在頁面上顯示該組件思路：將該組件放在wxml最下方，在將該組件向右移出屏幕范圍
示例

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

2.使用wx.chooseImage()選擇系統(tǒng)照片或調(diào)用相機(jī)拍照
3.使用 wx.createCanvasContext()、ctx.drawImage()、draw()將圖片寫入canvas中
4.使用wx.canvasToTempFilePath()將canvas中內(nèi)容導(dǎo)出為圖片，默認(rèn)格式png，也可使用fileType:"jpg"將格式改為jpg，現(xiàn)只支持兩種；已壓縮完成
5.使用wx.saveImageToPhotosAlbum()將導(dǎo)出的圖片存入系統(tǒng)相冊(cè)