拿到的base64图片 怎么才能画到canvas上面 T.T
发布于 5 年前 作者 guiyingcui 16407 次浏览 来自 问答

用了各种方法想把从后台拿到的小程序二维码图片保存到手机上面，就是不行

var src = “data:image/png;base64,” + this.data.imageCode;

canvas.drawImage(src, 0, 0, 300, 300)

canvas.draw();

这样能画到canvas，但是把canvas保存成临时文件，再把这临时文件保存到相册的时候就不行，总是空的，但是我再说上面画text的时候，保存是好使的，就是用上面的那种方法画上去的二维码不行T.T

canvas.setFontSize(20)

canvas.fillText(‘asdfasdfasdfasdfas’, 20, 20)

canvas.draw();

这样画上去的text是能出现的

10 回复

canvas真的可以保存base64吗？空格和换行在哪里去掉？？？

我刚真机测试了下，在iPhone下，同样的代码，一次就能直接保存成功，但是模拟器，就要像我刚说的要画两次并且保存两次😂

刚学小程序没俩星期😂，我之前也想可能是没画完的问题，但是不知道怎么加延迟，之后我发现：drawText就可以直接一次就画进去并且保存出来，所以可能不是延迟问题，

而且我的drawText是写在drawImage下面的，在模拟器上面字就是会被图片盖住😂，真机上面就是正常的。感觉这个canvas有点问题😂。

@一个人走   我也是，在web直接返的base64，不知道你解决没有

你绘制完立刻保存的嘛？如果是的话，保存适当加几百毫秒的延迟

模拟器上的canvas可以画base64的图片，但是真机上不行，估计是小程序的一个bug

drawText快啊，绘制个文本，绘制图片肯定效率不如绘制文字啊，形状啊（不过真机可以的话就以真机为准，工具上的canvas和真机上的方式应该不同） setTimeOut   js的延迟方法

我现在是把从内嵌网页的图片用base64传回来，但是转码出来没有图片，直接是黑色的。

恩，我已经把后台逻辑改成返回url了，之前是返回base64。

发现微信提供的api没有能将base64转成图片保存到本地的。

然后又出现一个新的问题，不知道是不是canvas的原因

我已经从服务器把图片用downFile下载下来，并且拿到tampFilePath了，

但是当我往canvas上面画并且保存的时候，第一次就总是保存的是空的图片，然后紧接着再画再保存，保存的图片就有了，每次程序运行都是这样，是我canvas的用法有问题吗？😂

var imgBaseData = ‘你的base64图片’;

const fsm = wx.getFileSystemManager();

const FILE_BASE_NAME = ‘tmp_base64src’;

let pro2 = new Promise((resolve, reject) => {

    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(imgBaseData) || [];

    if (!format) {

        reject(new Error(‘ERROR_BASE64SRC_PARSE’));

    }

    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;

    const buffer = wx.base64ToArrayBuffer(bodyData);

    fsm.writeFile({

        filePath,

        data: buffer,

        encoding: ‘binary’,

        success() {

            resolve(filePath);

        },

        fail() {

            reject(new Error(‘ERROR_BASE64SRC_WRITE’));

        },

    });

});

pro2.then(data =>{

    console.log(data);

    //画图

    canvas.drawImage(data, 0, 0, 300, 300) //data即是图片路径

})

恩 你图片不是从后端读取的嘛 采用wx.downFile的方式读取图片的网络路径，会返回你一个图片的临时路径

回到顶部