小程序獲取 canvas 區(qū)域隱含的像素?cái)?shù)據(jù)wx.canvasGetImageData

wx.canvasGetImageData(Object object, Object this)
獲取 canvas 區(qū)域隱含的像素?cái)?shù)據(jù)。

參數(shù)
Object object
屬性    類(lèi)型    默認(rèn)值    必填    說(shuō)明
canvasId    string        是    畫(huà)布標(biāo)識(shí)，傳入 canvas 組件的 canvas-id 屬性。
x    number        是    將要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角橫坐標(biāo)
y    number        是    將要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角縱坐標(biāo)
width    number        是    將要被提取的圖像數(shù)據(jù)矩形區(qū)域的寬度
height    number        是    將要被提取的圖像數(shù)據(jù)矩形區(qū)域的高度
success    function        否    接口調(diào)用成功的回調(diào)函數(shù)
fail    function        否    接口調(diào)用失敗的回調(diào)函數(shù)
complete    function        否    接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
object.success 回調(diào)函數(shù)
參數(shù)
Object res
屬性    類(lèi)型    說(shuō)明
width    number    圖像數(shù)據(jù)矩形的寬度
height    number    圖像數(shù)據(jù)矩形的高度
data    Uint8ClampedArray    圖像像素點(diǎn)數(shù)據(jù)，一維數(shù)組，每四項(xiàng)表示一個(gè)像素點(diǎn)的 rgba
Object this
在自定義組件下，當(dāng)前組件實(shí)例的this，以操作組件內(nèi) canvas 組件

示例代碼

wx.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})