html2canvas.js 要改2处代码

第1处代码 line 603

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
window.html2canvas =  function (nodeList, options) {
     var  index = html2canvasCloneIndex++;
     options = options || {};
     if  (options.logging) {
         window.html2canvas.logging =  true ;
         window.html2canvas.start = Date.now();
     }
 
     options.async =  typeof (options.async) ===  "undefined"  ?  true  : options.async;
     options.allowTaint =  typeof (options.allowTaint) ===  "undefined"  ?  false  : options.allowTaint;
     options.removeContainer =  typeof (options.removeContainer) ===  "undefined"  ?  true  : options.removeContainer;
     options.javascriptEnabled =  typeof (options.javascriptEnabled) ===  "undefined"  ?  false  : options.javascriptEnabled;
     options.imageTimeout =  typeof (options.imageTimeout) ===  "undefined"  ? 10000 : options.imageTimeout;
     options.renderer =  typeof (options.renderer) ===  "function"  ? options.renderer : CanvasRenderer;
     options.strict = !!options.strict;
 
     if  ( typeof (nodeList) ===  "string" ) {
         if  ( typeof (options.proxy) !==  "string" ) {
             return  Promise.reject( "Proxy must be used when rendering url" );
         }
         var  width = options.width !=  null  ? options.width : window.innerWidth;
         var  height = options.height !=  null  ? options.height : window.innerHeight;
         return  loadUrlDocument(absoluteUrl(nodeList), options.proxy, document, width, height, options).then( function (container) {
             return  renderWindow(container.contentWindow.document.documentElement, container, options, width, height);
         });
     }
 
     var  node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
     node.setAttribute(html2canvasNodeAttribute + index, index);
     //return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
    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处 line 633

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function  renderWindow(node, container, options, windowWidth, windowHeight) {
     var  clonedWindow = container.contentWindow;
     var  support =  new  Support(clonedWindow.document);
     var  imageLoader =  new  ImageLoader(options, support);
     var  bounds = getBounds(node);
     var  width = options.type ===  "view"  ? windowWidth : documentWidth(clonedWindow.document);
     var  height = options.type ===  "view"  ? windowHeight : documentHeight(clonedWindow.document);
     var  renderer =  new  options.renderer(width, height, imageLoader, options, document);
     var  parser =  new  NodeParser(node, renderer, support, imageLoader, options);
     return  parser.ready.then( function () {
         log( "Finished rendering" );
         var  canvas;
 
         if  (options.type ===  "view" ) {
             canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
         }  else  if  (node === clonedWindow.document.body || node === clonedWindow.document.documentElement) { // xiaomin modify
             canvas = renderer.canvas;
         }  else  if (options.scale){ // xiaominzh modify
             var  scale = options.scale || 1;
             canvas = crop(renderer.canvas, {width: bounds.width * scale, height:bounds.height * scale, top: bounds.top *scale, left: bounds.left *scale, x: 0, y: 0});
         } else  {
             canvas = crop(renderer.canvas, {width:  options.width !=  null  ? options.width : bounds.width, height: options.height !=  null  ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset});
         }
 
         cleanupContainer(container, options);
         return  canvas;
     });
}


如何使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var  shareContent = $( "#share-person-report" )[0];    //需要截图的包裹的DOM 元素
var  width = shareContent.offsetWidth;  //获取dom 宽度
var  height = shareContent.offsetHeight;  //获取dom 高度
var  canvas = document.createElement( "canvas" );  //创建一个canvas节点
var  scale = 2;  //定义任意放大倍数 支持小数
canvas.width = width * scale;  //定义canvas 宽度 * 缩放
canvas.height = height * scale;  //定义canvas高度 *缩放
canvas.getContext( "2d" ).scale(scale,scale);  //获取context,设置scale
html2canvas($( '#share-person-report' ), {
     allowTaint: true ,
     taintTest: false ,
     useCORS: true ,
     background :  '#fff' ,
     scale:scale,
     width:width,
     height:height,
     canvas:canvas,
     onrendered:  function (cav) {
         var  src = cav.toDataURL();
         var  html =  "<img src='" +src+ "' class='canvas'/>" ;
         $( '#share-person-report' ).html(html);
     }
});