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.p_w_picpathTimeout = typeof(options.p_w_picpathTimeout) === "undefined" ? 10000 : options.p_w_picpathTimeout; 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 p_w_picpathLoader = 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, p_w_picpathLoader, options, document); var parser = new NodeParser(node, renderer, support, p_w_picpathLoader, 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); } });附件:http://down.51cto.com/data/2366743
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:html2canvas生成高清图片-创新互联
分享链接:http://ybzwz.com/article/ddjcso.html