微信小程序使用wx.canvasGetImageData将图片格式改为base64

首先,此方法属于微信小程序的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后面,会导致得到的是一个空白的图片。


猜你喜欢

转载自blog.csdn.net/qq_34164814/article/details/80315356