最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

js截取网页图片插件之html2canvas

JavaScript AZ 1320浏览 0评论

突然想起产品妹纸问我的问题:“手机抽奖页面能不能在页面上保存为图片分享到社交平台”,于是google下js页面截取,还真找到 html2canvas。在github评论还不错,6k多star。

支持主流浏览器:

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Safari 6+

还支持ECS6写法:

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

来看看基础用法吧:
1、方法一,不加参数

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

2、方法二,加参数

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

详细参数使用:

Name Type Default Description
allowTaint boolean false Whether to allow cross-origin images to taint the canvas
background string #fff Canvas background color, if none is specified in DOM. Set undefined for transparent
height number null Define the height of the canvas in pixels. If null, renders with full height of the window.
letterRendering boolean false Whether to render each letter separately. Necessary if letter-spacing is used.
logging boolean false Whether to log events in the console.
proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won’t be loaded.
taintTest boolean true Whether to test each image if it taints the canvas before drawing them
timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.
width number null Define the width of the canvas in pixels. If null, renders with full width of the window.
useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy

官方github下载: https://github.com/niklasvh/html2canvas

转载请注明:TUTERM.COM » js截取网页图片插件之html2canvas

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!