html2canvas使用笔记

lilugirl

发布于 2019-05-26 11:30:40

7600

发布于 2019-05-26 11:30:40

文章被收录于专栏：前端导学

onrendered方法支持图片不支持图片背景

html2canvas(document.body, {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
            }
        });

而使用官方例子

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

则不支持图片，支持图片背景

注意：以http开头的图片不能显示出来

图片不能在canvas中显示出来的原因是因为html2canvas不支持跨域的图片资源，所以canvas中不会显示图片。

如果要调用微信用户头像，则必须先把头像转存到服务器上再调用本地地址

如果需要跨域调用存放在文件服务器中的图片可以利用mg标签的crossOrigin属性，实现跨域操作

同理视频播放的跨域视频播放也可以实用crossOrigin属性https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度