From de34441df833c9f111a688aacd24503d862a36a8 Mon Sep 17 00:00:00 2001 From: MoyuScript Date: Mon, 20 Feb 2012 17:16:57 +0200 Subject: [PATCH] add support for selecting single elements to render --- src/Renderer.js | 33 +++- src/plugins/jquery.plugin.html2canvas.js | 3 + tests/origin.html | 186 +++++++++++++++++++++++ 3 files changed, 220 insertions(+), 2 deletions(-) create mode 100644 tests/origin.html diff --git a/src/Renderer.js b/src/Renderer.js index f0dcd57..9b8f627 100644 --- a/src/Renderer.js +++ b/src/Renderer.js @@ -77,6 +77,8 @@ html2canvas.Renderer = function(parseQueue, opts){ i, queueLen, a, + newCanvas, + bounds, storageLen, renderItem, fstyle; @@ -171,6 +173,34 @@ html2canvas.Renderer = function(parseQueue, opts){ html2canvas.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj"); // this.canvasRenderStorage(queue,this.ctx); + queueLen = options.elements.length; + + if (queueLen === 1) { + if (options.elements[ 0 ] instanceof Element && options.elements[ 0 ].nodeName !== "BODY") { + // crop image to the bounds of selected (single) element + bounds = html2canvas.Util.Bounds( options.elements[ 0 ] ); + newCanvas = doc.createElement('canvas'); + newCanvas.width = bounds.width; + newCanvas.height = bounds.height; + ctx = newCanvas.getContext("2d"); + ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height ); + delete canvas; + return newCanvas; + } + } else { + // TODO clip and resize multiple elements + /* + for ( i = 0; i < queueLen; i+=1 ) { + if (options.elements[ i ] instanceof Element) { + + } + + }*/ + } + + + + return canvas; } @@ -384,11 +414,10 @@ html2canvas.Renderer = function(parseQueue, opts){ //}); + return this; }; - - diff --git a/src/plugins/jquery.plugin.html2canvas.js b/src/plugins/jquery.plugin.html2canvas.js index f119438..296f532 100644 --- a/src/plugins/jquery.plugin.html2canvas.js +++ b/src/plugins/jquery.plugin.html2canvas.js @@ -10,6 +10,9 @@ $message = null, timeoutTimer = false, timer = date.getTime(); + options = options || {}; + options.elements = this; + html2canvas.logging = options && options.logging; html2canvas.Preload(this[0], $.extend({ complete: function(images){ diff --git a/tests/origin.html b/tests/origin.html new file mode 100644 index 0000000..ce596ca --- /dev/null +++ b/tests/origin.html @@ -0,0 +1,186 @@ + + + + + + + + + + display/box/float/clear test + + + + +
+
+ toggle +
+
+
    +
  • + the way +
    • +
  • +

    + the world ends +

    +
    +

    + bang + +

    +

    + whimper + +

    +
    +
    • +
  • + i grow old +
    • +
  • + pluot? +
    • +
+
+
+ bar maids, +
+
+

+ sing to me, erbarme dich +

+
+
+

+ This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph indistinguishably (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the parent page. +

+ +