js截取网页图片插件之html2canvas

突然想起产品妹纸问我的问题：“手机抽奖页面能不能在页面上保存为图片分享到社交平台”，于是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

与本文相关的文章

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

与本文相关的文章

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

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