html2canvas使用笔记

2019独角兽企业重金招聘Python工程师标准>>>

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属性 ，实现跨域操作

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

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

转载于:https://my.oschina.net/lilugirl2005/blog/1616877