V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
willxiang
V2EX  ›  前端开发

求助, canvas 与同步异步问题

  •  
  •   willxiang · 2019-01-07 18:37:02 +08:00 · 3131 次点击
    这是一个创建于 1936 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有个问题请教一下各位:

    现在有多个 canvas,通过设置不同 z-index 属性层叠显示成一幅图, 现在需要把这“一幅图”生成图片保存。

    目前思路是在这多个 canvas 之外套一个 div,然后使用html2canvas把 div 转成一个 canvas,再 toDataURL()得到 base64 生成图片。

    然而在调用的过程中发现它的方法是异步的,虽然有 options 可以设置成同步,但这个参数并不是我想要的那个同步。。。

    示例代码:

    var base64string = "";
    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas)//这里是异步的……
    base64string = canvas.toDataURL();
    });
    
    return base64string;//我的需求是等待上边的方法走完后得到图片 base64 再走这一句然后返回字符串
    
    

    还有就是截图这个操作是用的 phantomjs,所以 ECMA6 以上的新语法之类的还没法用……

    第 1 条附言  ·  2019-01-07 21:37:54 +08:00
    3 条回复    2019-01-07 21:45:01 +08:00
    shenyu1996
        1
    shenyu1996  
       2019-01-07 18:42:30 +08:00 via Android
    es7 async await
    willxiang
        2
    willxiang  
    OP
       2019-01-07 19:57:57 +08:00
    @shenyu1996 #1 谢谢回复,用不了 ES7 的 async await
    phantomjs 不支持
    momocraft
        3
    momocraft  
       2019-01-07 21:45:01 +08:00
    promise / async 都是可以 transpile 的语言特性,如果有心还是可以写 ES>5 然后 babe 给旧平台用。就是提一下。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1714 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 16:58 · PVG 00:58 · LAX 09:58 · JFK 12:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.