收藏
回答

canvas生成几千字长文海报生成很慢?

需求:根据文本内容生成长文海报。

问题:

  1. canvas有没有限制的高度,如:height:10000px(现在就是这样设置)
  2. canvas生成长文海报,在预览模式下生成比较快,但是在线上生成很慢。

代码片段:https://developers.weixin.qq.com/s/20IzsTmK7Fg3

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

2 个回答

  • 九月有清晨
    九月有清晨
    2020-04-28

    经过测试发现最主要的问题是:measureText的性能好像比较低,生成长文时多次调用API,导致生成海报很慢。

    解决方法:把measureText换成下面的方法:

    测试结果:保存的速度提升了。。。。。。奈斯

    最后:感谢大佬们回答问题!膜拜!

    measureText(text, fontSize = 28) {
        text = String(text);
        // var text = text.split('');
        var width = 0;
        // text.forEach(function(item) {
        if (/[a-zA-Z]/.test(text)) {
          width += 7;
        } else if (/[0-9]/.test(text)) {
          width += 5.5;
        } else if (/\./.test(text)) {
          width += 2.7;
        } else if (/-/.test(text)) {
          width += 3.25;
        } else if (/[\u4e00-\u9fa5]/.test(text)) {  //中文匹配
          width += 10;
        } else if (/\(|\)/.test(text)) {
          width += 3.73;
        } else if (/\s/.test(text)) {
          width += 2.5;
        } else if (/%/.test(text)) {
          width += 8;
        } else {
          width += 10;
        }
        // });
        return width * fontSize / 10;
      }
    
    2020-04-28
    有用 1
    回复
  • TNT
    TNT
    2020-04-26

    看了下还好啊https://developers.weixin.qq.com/s/5KJlFTmn7mgO,要不你试试这两个插件?

    1.官方的:https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html

    2.https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013

    2020-04-26
    有用
    回复 3
    • 九月有清晨
      九月有清晨
      2020-04-26
      谢谢大佬回答。调试的时候还好,上线了就很慢,懵逼
      2020-04-26
      回复
    • TNT
      TNT
      2020-04-26回复九月有清晨
      要不照着两个组件写两个页面测试下发个版本?
      2020-04-26
      回复
    • 九月有清晨
      九月有清晨
      2020-04-26回复TNT
      好的,我试一下
      2020-04-26
      回复
登录 后发表内容
问题标签