html2生成图片,html2canvas 生成高清图片

html2canvas.js 要改2处代码

第1处代码 line 603

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

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;

});

}

如何使用

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 = "";

$('#share-person-report').html(html);

}

});