首先,此方法属于微信小程序的canva标签的使用API,必须在wxml内写入canvas标签;
使用过程中,var ctx = wx.createCanvasContext(canvasid) //操作对应id的canvas
ctx.drawImage(imgPath,0,0,width,height) //绘画图片,把图片放进去
ctx.draw(function(){
wx.canvasGetImageData({
canvasId:canvasid //参数,canvas标签的id
x:0, //起始位置,x坐标
y:0,
width:width,
height:height,
success:function(res){
//引入upng,将图片转化成utf-8格式
let pngData = upng.encoded([res.data.buffer].res.width,res.height)
//再转化成base64
let bs64 = wx.arrayBufferToBase64(pngData)
}
})
});
注意:其中upng的引入同时,有一个poke.js要放在同一个文件夹下,wx.canvasGetImageData只能执行一次,循环不会多次执行。该放法建议放在draw的回掉函数中,因为微信小程序的异步执行,如果放在draw后面,会导致得到的是一个空白的图片。