评论

Canvas 2D问题解决,如安卓drawImage不执行、动态高度设置、高度1365(或4096)限制等

开发工具和安卓上drawImage不执行、动态设置canvas高度、高度1365(或4096)限制、模糊。

我的最新版小程序想在绘制时使用自定义字体,需要将旧版canvas升级到2d新版,发现了许多问题,下面记录一下并提供解决思路,仅供参考,欢迎提供新思路。

一、开发工具和安卓上drawImage不执行,绘制出来是空白:

不知道哪里出了问题,反正要么不进image.onload,要么进入就undefined。解决办法就是先在页面生命周期onLoad中使用离屏canvas创建image,再在2d接口需要绘制图片的地方直接使用页面onLoad时创建好的image。

二、动态设置canvas高度:

解决办法就是曲线救国,调用两次绘制流程,第一次仅计算出高度,第二次再绘制内容。

三、高度1365(或4096)限制:

手机端新版canvas 2d高度限制不好解决,我的办法就是计算高度,如果超过限制就提示用户使用电脑端小程序绘制,并保持小程序电脑端依然走老canvas流程,所幸的是老canvas支持电脑端自定义字体。

四、绘制后的内容清晰度不好,模糊:

页面wxml中的style宽高值需要和js代码中的canvas宽高值(未乘宽高比之前)保持一致。



最后一次编辑于  2023-11-23  
点赞 0
收藏
评论

5 个评论

  • Mos
    Mos
    09-27

    电脑端canvasToTempFilePath时需要延时执行,setTimeout中执行。

    09-27
    赞同 1
    回复
  • 送你的独白
    送你的独白
    2023-11-30

    老哥,为什么我用wx.loadFontFace下载的自定义字体在canvas中,模拟器能显示出来,iPhone真机显示不出来啊。。你的能显示出来吗?

    2023-11-30
    赞同
    回复 1
    • Mos
      Mos
      发表于小程序端
      2023-11-30

      能显示,使用canvas 2d后在iOS和安卓上都可以自定义字体

      2023-11-30
      回复
  • 冉羽冉羽
    冉羽冉羽
    2023-11-29

    我现在就是遇到高度超过1365,ios生成的图片就空白了,啊啊啊啊啊啊

    2023-11-29
    赞同
    回复 1
    • Mos
      Mos
      发表于小程序端
      2023-11-30

      一定要超过的话用老版canvas吧

      2023-11-30
      回复
  • Mos
    Mos
    2023-11-24

    canvas隐藏,fixed定位top:99999999999px移到屏幕外,绘制前切勿设置初始宽高为0。

    2023-11-24
    赞同
    回复
  • Mos
    Mos
    2023-11-23

    以上方案有更新,仅供参考。

    2023-11-23
    赞同
    回复 1
    • Mos
      Mos
      2023-11-23
      针对一,有问题,image.onload是异步的,后绘制的相关代码需要在onload里面执行,比如canvasToTempFilePath等。
      2023-11-23
      1
      回复
登录 后发表内容