Html2canvas通过JS截屏?

所属分类:其他-杂项

 129833  351  查看评论 (18)
分享到微信朋友圈
X
Html2canvas通过JS截屏? ie兼容9

工作原理

Html2canvas加载后将会浏览页面上的所有元素,集合所有页面元素的信息,然后用户就可以通过Html2canvas把整个页面截图下来。

换句话说,Html2canvas不会实际上的截图,而是通过从DOM读取的足够信息去建立一个页面的展示镜像。

这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性,还有很多CSS属性是不会生效的,也就渲染不出来了。


限制

所有的图片都需要在当前域下,这样Html2canvas才能不通过代理去读取到。同样地,如果你的页面上有其他的被跨域内容污染的canvas元素,html2canvas将不能准确渲染下来。

html2canvas不会渲染插件内容:Flash,Java组件,和iframe页面的内容。


所以,用户需要在特定的情况下来使用该插件,便能发挥很大的便利。


使用方法

html2canvas(element, options);


带有回掉函数的:

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas 是最后一个渲染的<canvas> 元素
    }
});

可用参数

NameTypeDefaultDescription
allowTaintbooleanfalseWhether to allow cross-origin images to taint the canvas
backgroundstring#fffCanvas background color, if none is specified in DOM. Set undefined for transparent
heightnumbernullDefine the heigt of the canvas in pixels. If null, renders with full height of the window.
letterRenderingbooleanfalseWhether to render each letter seperately. Necessary ifletter-spacing is used.
loggingbooleanfalseWhether to log events in the console.
proxystringundefinedUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
taintTestbooleantrueWhether to test each image if it taints the canvas before drawing them
timeoutnumber0Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.
widthnumbernullDefine the width of the canvas in pixels. If null, renders with full width of the window.
useCORSbooleanfalseWhether to attempt to load cross-origin images as CORS served, before reverting back to proxy


相关插件-杂项

日历签到领奖品

点击当日可进行签到领取礼物
  杂项
 46654  508

JS文字球状放大效果

纯js实现文字文字放大效果
  杂项
 34974  470

淘宝商品动态生成SKU表格实例

淘宝商户端发布商品时动态生成SKU表格的实例
  杂项
 36108  343

jQuery答题试卷并且评分

jQuery实现的测试答题功能
  杂项
 36254  412

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    盛静银 0
    2020/8/3 14:12:57
    en 这个下载后怎么启动??? 我咋看不出来呢 核心代码哪个文件下啊啊啊啊33333333 我要崩溃了 快来帮帮我这个可怜得孩子吧
        西瓜0
        2020/8/3 14:37:13
        看这个吧,里面有完整的事例。http://www.jq22.com/jquery-info13927
    回复
    柳叶ai涟漪 0
    2020/6/5 13:51:55
    Html2canvas只能基于vue引用吗 回复
    男人不可以穷?? 1
    2019/9/11 8:36:05

    关于图片资源跨域,生成不显示问题?
    服务端资源需要设置 : Access-Control-Allow-Origin
    添加参数:useCORS:true, // 允许跨域  
    图片属性添加 crossorigin="anonymous"

    回复
    诚接小程序修改_更新代工 0
    2019/6/6 15:50:22
    请问有没有大佬晓得 html2canvas 可以截<object>里的内容吗? 回复
    东流水 0
    2017/9/6 13:49:26

    到底引用哪个文件?demo里面引用的js文件根本就不存在

    回复
    话梅大人ME 0
    2017/4/12 14:51:46

     哈喽各位,视频截图截出来是空白啊,有没有什么好方法!

    回复
    yeyefengisme 0
    2016/11/30 17:11:56
    好迷糊有木有~~~~~ 回复
    下垂眼ALI 0
    2016/11/14 23:11:24
    Uncaught (in promise) TypeError: Cannot read property 'document' of undefined(…) 报错是什么原因啊 回复
    南极快没有冰山 0
    2016/10/28 16:10:01
    截图很热闹模糊怎么解决? 回复
    过活 0
    2016/9/6 15:09:00
    截图后 图片怎么不显示。。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复