公告列表
公告列表
收藏
回答

关于画布drawImage的画图问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 Canvas 客户端 2.6.6.26 2.2.3

目前canvas组件中的的方法drawImage中的图片资源只支持图片url的形式，请问能否支持提供base64的形式提供图片资源来画画布？

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

3 个回答

  • 吴奕群
    吴奕群
    2019-02-12

    这个坐等官方出了

    2019-02-12
    有用 1
    回复
  • Smile
    Smile
    2019-02-12

    https://developers.weixin.qq.com/miniprogram/dev/api/api-util.html#wxbase64toarraybufferbase64

    试试这个可以不

    2019-02-12
    有用
    回复 1
    • 哲
      哲
      2019-02-12

      试了一下，这种方式不知道怎么弄，没试成功

      2019-02-12
      赞
      回复
  • 卢霄霄
    卢霄霄
    2019-02-12

    不支持，不过你可以用writeFile存成本地文件了再画上去

    2019-02-12
    有用
    回复 8
    • 哲
      哲
      2019-02-12

      好的，谢谢，这种方式可以，不过这样会产生很多无用的临时文件，还是比较期望官方可以支持用base64

      2019-02-12
      赞
      回复
    • 卢霄霄
      卢霄霄
      2019-02-12回复哲

      嗯，确实支持比较好，不过可以取同一个名字的文件，每次存之前删除

      2019-02-12
      赞
      回复
    • 林上皓
      林上皓
      2019-02-28

      能发个实例代码看下么，我writeFile存储成功了，但是drawImage没用

      2019-02-28
      赞
      回复
    • 卢霄霄
      卢霄霄
      2019-02-28回复林上皓

      这。。暂时没有实例，你可以把你代码贴出来 我帮你看

      2019-02-28
      赞
      回复
    • 林上皓
      林上皓
      2019-02-28回复卢霄霄

      麻烦帮忙看下也没有报错

      var ctx = wx.createContext()
          const fsm = wx.getFileSystemManager();
          var showImgData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAmCAMAAAB01KKfAAAAM1BMVEUAAAArsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvQrsvT+oQevAAAAEHRSTlMA8MBAMIDgYLDQIKBQEHCQI1kaGAAAAMZJREFUOMuNk1kOhDAMQ0tKurCN73/aUVSBEAky7/vJjaskeXL6gOLg0j6hfIkCKrUKwMMqjEqjDGFRg8yieNhmBg0TnLR3acXgveaSVXBHjryniz1XlY4YabrZiB0cse6UnuaJStOcTOOSaVQaGpO85qWTjUmDyqTBEVrZb5ZHgn3waLBanp+z+qcXw4pPaUZEdBf8JxQev/ztmqVpmx5f4SrqbpeyniXDiutyXpTAKEFFuQ+buy+ZgfIsVMuz5NKiW9aWBn+EXyeh0DQcVwAAAABJRU5ErkJggg=="
          const buffer = wx.base64ToArrayBuffer(showImgData);
          const fileName = wx.env.USER_DATA_PATH + '/test.png'
          fsm.writeFileSync(fileName, buffer, 'binary')
          ctx.drawImage(fileName, 10,10, 50, 50)
          ctx.fillText('Hello', 200, 200)
          wx.drawCanvas({
            canvasId: 'canvas',
            actions: ctx.getActions()
          })


      2019-02-28
      赞
      回复
    查看更多(3)
请 登录 后发表内容
相关问题
相关文档