收藏
回答

拿到的base64图片 怎么才能画到canvas上面 T.T

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

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是能出现的

回答关注问题邀请回答
收藏

12 个回答

  • 面瘫男的自我修养
    面瘫男的自我修养
    2018-06-01

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

    2018-06-01
    有用 1
    回复 1
    • 何大小成
      何大小成
      2018-09-10

      你解决了没

      2018-09-10
      回复
  • Liu
    Liu
    2019-01-02

    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即是图片路径

    })


    2019-01-02
    有用
    回复
  • 闫先森
    闫先森
    2018-03-21

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

    2018-03-21
    有用
    回复
  • 二高
    二高
    2018-01-26

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

    2018-01-26
    有用
    回复
  • Sirius。
    Sirius。
    2018-01-10

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

    2018-01-10
    有用
    回复
  • 银色子弹
    银色子弹
    2017-10-25

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

    2017-10-25
    有用
    回复
  • \
    \
    2017-10-25

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


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

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



    2017-10-25
    有用
    回复
  • 银色子弹
    银色子弹
    2017-10-25

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

    2017-10-25
    有用
    回复
  • \
    \
    2017-10-25

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

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


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

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

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

    2017-10-25
    有用
    回复
  • 银色子弹
    银色子弹
    2017-10-25

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

    2017-10-25
    有用
    回复

正在加载...

登录 后发表内容