html2canvas 產生高清圖片

標籤：web   html   js   canvas   

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 modifyvar 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,設定scalehtml2canvas($(‘#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);    }});

html2canvas 產生高清圖片