前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >html2canvas使用笔记

html2canvas使用笔记

作者头像
lilugirl
发布2019-05-26 11:30:40
7580
发布2019-05-26 11:30:40
举报
文章被收录于专栏:前端导学

为什么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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云点播
面向音视频、图片等媒体,提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档