使用html2canvas实现浏览器截图

https://www.cnblogs.com/yanweidie/p/5203943.html

 

功能：实现浏览器打印图片并保存到本地

插件：html2canvas

限制：

• 不支持iframe
• 不支持跨域图片
• 不能在浏览器插件中使用
• 部分浏览器上不支持SVG图片
• 不支持Flash
• 不支持IE9及IE9以下浏览器

实例：

      应用jq和html2canvas（下载地址：https://github.com/niklasvh/html2canvas）

     

  /*
    ** 截屏方法
    ** domId 需要截取内容的容器Id
   */
   function domShot(domId) {
      
        //0.5.0-beta4方法
        html2canvas(document.querySelector("#" + domId),{
            allowTaint:true,
            height: $("#" + domId).outerHeight() + 100,
            width:  $("#" + domId).outerWidth() + 100
        }).then(function(canvas) {
            var url = canvas.toDataURL();
            var timestamp = Date.parse(new Date());
               //点击后自动下载至本地
            var triggerDownload = $("<a>").attr("href", url).attr("download",timestamp + ".png").appendTo("body");
            　triggerDownload[0].click();
          　　triggerDownload.remove();
        
        });
    }

 第一个参数是要截图的Dom对象，第二个参数时渲染完成后回调的canvas对象。

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 heigt of the canvas in pixels. If null, renders with full height of the window.
letterRendering	boolean	false	Whether to render each letter seperately. Necessary ifletter-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

问题：使用原码发现截屏不全，动态加载的数据有时候截取不到，参考焰尾迭的方法，将原码修改，可截取完整

方法1：

源码：

    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });

 

修改代码：

   //2016-02-18修改源码,解决BUG 对于部分不能截屏不能全屏添加自定义宽高的参数以支持
    var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
    var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
    return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });

 方法2：

<div>
  <iframe id="previewIframe" src="/static/html/preview.html" frameborder="0"></iframe>
</div>

将需要转化的页面放到preview.html，js如下

var $previewIframe=$('#previewIframe');
html2canvas($previewIframe.contents().find('#previewTabelDetail')[0], {
    onrendered: function(canvas) {
   　　var url = canvas.toDataURL();
  　　 $previewIframe.contents().find('body').append($(<img>").attr("src", url));
   }
});