html生成高清图片大小,html2canvas 生成高清图片

超、凢脫俗 2022-10-06 07:50 283阅读 0赞

html2canvas.js 要改2处代码

第1处代码 line 603window.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 633function 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‘), \{