求助, canvas 与同步异步问题

2019-01-07 18:37:02 +08:00
 willxiang

有个问题请教一下各位:

现在有多个 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 以上的新语法之类的还没法用……

3218 次点击
所在节点    前端开发
3 条回复
shenyu1996
2019-01-07 18:42:30 +08:00
es7 async await
willxiang
2019-01-07 19:57:57 +08:00
@shenyu1996 #1 谢谢回复,用不了 ES7 的 async await
phantomjs 不支持
momocraft
2019-01-07 21:45:01 +08:00
promise / async 都是可以 transpile 的语言特性,如果有心还是可以写 ES>5 然后 babe 给旧平台用。就是提一下。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/524739

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX