html2canvas使用笔记

2019-05-26 11:30:40 浏览数 (1)

为什么80%的码农都做不了架构师？>>>

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

代码语言：javascript复制

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

而使用官方例子

代码语言：javascript复制

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

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

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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

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

0 人点赞