From 3032a161b86aa05c4154c1cb9bf5b4089826748f Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Sun, 17 Jul 2011 02:19:26 +0300
Subject: [PATCH] fixed image search for iframes + added default content for
iframes and flash content
---
build/html2canvas.js | 50 ++++++++++++++++++++++++-------------
src/Core.js | 3 ++-
src/Draw.js | 17 ++++++++++---
src/Images.js | 16 ++++++------
src/Traversing.js | 14 ++++++-----
tests/external-content.html | 23 +++++++++++++++++
6 files changed, 89 insertions(+), 34 deletions(-)
create mode 100644 tests/external-content.html
diff --git a/build/html2canvas.js b/build/html2canvas.js
index 4b0a24a..0bf22c4 100644
--- a/build/html2canvas.js
+++ b/build/html2canvas.js
@@ -43,6 +43,7 @@ function html2canvas(el, userOptions) {
ready: function (canvas) {
document.body.appendChild(canvas);
},
+ iframeDefault: "default",
flashCanvasPath: "http://html2canvas.hertzen.com/external/flashcanvas/flashcanvas.js",
renderViewport: false
});
@@ -60,7 +61,7 @@ function html2canvas(el, userOptions) {
this.fontData = [];
this.ignoreElements = "IFRAME|OBJECT|PARAM";
-
+ this.ignoreRe = new RegExp("("+this.ignoreElements+")");
// test how to measure text bounding boxes
this.useRangeBounds = false;
@@ -434,8 +435,8 @@ html2canvas.prototype.newElement = function(el){
/*
- * TODO add support for different border-style's than solid
- */
+ * TODO add support for different border-style's than solid
+ */
var borders = this.getBorderData(el);
this.each(borders,function(borderSide,borderData){
@@ -473,7 +474,18 @@ html2canvas.prototype.newElement = function(el){
});
-
+
+
+ if (this.ignoreRe.test(el.nodeName) && this.opts.iframeDefault != "transparent"){
+ if (this.opts.iframeDefault=="default"){
+ bgcolor = "#efefef";
+ /*
+ * TODO write X over frame
+ */
+ }else{
+ bgcolor = this.opts.iframeDefault;
+ }
+ }
// draw base element bgcolor
this.newRect(
@@ -546,13 +558,15 @@ html2canvas.prototype.getImages = function(el) {
var self = this;
- // TODO remove jQuery dependancy
- this.each($(el).contents(),function(i,element){
- var ignRe = new RegExp("("+this.ignoreElements+")");
- if (!ignRe.test(element.nodeName)){
- self.getImages(element);
- }
- })
+ if (!this.ignoreRe.test(el.nodeName)){
+ // TODO remove jQuery dependancy
+ this.each($(el).contents(),function(i,element){
+ var ignRe = new RegExp("("+this.ignoreElements+")");
+ if (!ignRe.test(element.nodeName)){
+ self.getImages(element);
+ }
+ })
+ }
if (el.nodeType==1 || typeof el.nodeType == "undefined"){
var background_image = this.getCSS(el,'background-image');
@@ -826,8 +840,8 @@ html2canvas.prototype.trim = function(text) {
html2canvas.prototype.parseElement = function(element){
- var _ = this;
- this.each(element.children,function(index,el){
+ var _ = this;
+ this.each(element.children,function(index,el){
_.parsing(el);
});
@@ -838,13 +852,15 @@ html2canvas.prototype.parseElement = function(element){
html2canvas.prototype.parsing = function(el){
-
- var ignRe = new RegExp("("+this.ignoreElements+")");
+
var _ = this;
- if (!ignRe.test(el.nodeName)){
+
+ this.newElement(el);
+
+ if (!this.ignoreRe.test(el.nodeName)){
- this.newElement(el);
+
// TODO remove jQuery dependancy
var contents = $(el).contents();
diff --git a/src/Core.js b/src/Core.js
index dab6770..4536036 100644
--- a/src/Core.js
+++ b/src/Core.js
@@ -13,6 +13,7 @@ function html2canvas(el, userOptions) {
ready: function (canvas) {
document.body.appendChild(canvas);
},
+ iframeDefault: "default",
flashCanvasPath: "http://html2canvas.hertzen.com/external/flashcanvas/flashcanvas.js",
renderViewport: false
});
@@ -30,7 +31,7 @@ function html2canvas(el, userOptions) {
this.fontData = [];
this.ignoreElements = "IFRAME|OBJECT|PARAM";
-
+ this.ignoreRe = new RegExp("("+this.ignoreElements+")");
// test how to measure text bounding boxes
this.useRangeBounds = false;
diff --git a/src/Draw.js b/src/Draw.js
index 505d44a..e021da2 100644
--- a/src/Draw.js
+++ b/src/Draw.js
@@ -18,8 +18,8 @@ html2canvas.prototype.newElement = function(el){
/*
- * TODO add support for different border-style's than solid
- */
+ * TODO add support for different border-style's than solid
+ */
var borders = this.getBorderData(el);
this.each(borders,function(borderSide,borderData){
@@ -57,7 +57,18 @@ html2canvas.prototype.newElement = function(el){
});
-
+
+
+ if (this.ignoreRe.test(el.nodeName) && this.opts.iframeDefault != "transparent"){
+ if (this.opts.iframeDefault=="default"){
+ bgcolor = "#efefef";
+ /*
+ * TODO write X over frame
+ */
+ }else{
+ bgcolor = this.opts.iframeDefault;
+ }
+ }
// draw base element bgcolor
this.newRect(
diff --git a/src/Images.js b/src/Images.js
index d32f741..42f74ae 100644
--- a/src/Images.js
+++ b/src/Images.js
@@ -5,13 +5,15 @@ html2canvas.prototype.getImages = function(el) {
var self = this;
- // TODO remove jQuery dependancy
- this.each($(el).contents(),function(i,element){
- var ignRe = new RegExp("("+this.ignoreElements+")");
- if (!ignRe.test(element.nodeName)){
- self.getImages(element);
- }
- })
+ if (!this.ignoreRe.test(el.nodeName)){
+ // TODO remove jQuery dependancy
+ this.each($(el).contents(),function(i,element){
+ var ignRe = new RegExp("("+this.ignoreElements+")");
+ if (!ignRe.test(element.nodeName)){
+ self.getImages(element);
+ }
+ })
+ }
if (el.nodeType==1 || typeof el.nodeType == "undefined"){
var background_image = this.getCSS(el,'background-image');
diff --git a/src/Traversing.js b/src/Traversing.js
index 983814c..49a93b3 100644
--- a/src/Traversing.js
+++ b/src/Traversing.js
@@ -1,8 +1,8 @@
html2canvas.prototype.parseElement = function(element){
- var _ = this;
- this.each(element.children,function(index,el){
+ var _ = this;
+ this.each(element.children,function(index,el){
_.parsing(el);
});
@@ -13,13 +13,15 @@ html2canvas.prototype.parseElement = function(element){
html2canvas.prototype.parsing = function(el){
-
- var ignRe = new RegExp("("+this.ignoreElements+")");
+
var _ = this;
- if (!ignRe.test(el.nodeName)){
+
+ this.newElement(el);
+
+ if (!this.ignoreRe.test(el.nodeName)){
- this.newElement(el);
+
// TODO remove jQuery dependancy
var contents = $(el).contents();
diff --git a/tests/external-content.html b/tests/external-content.html
new file mode 100644
index 0000000..b6b7a02
--- /dev/null
+++ b/tests/external-content.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>External content tests</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <link href="#" type="text/css" rel="stylesheet">
+
+ <script type="text/javascript" src="../external/jquery-1.6.2.js"></script>
+ <script type="text/javascript" src="../build/html2canvas.js"></script>
+ <script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
+ <script type="text/javascript">
+ $(window).ready(function() {
+ $('body').html2canvas();
+ });
+ </script>
+
+
+ </head>
+ <body>
+ <h1>Iframe</h1>
+ <iframe src="http://www.google.com" style="width:400px;height:300px;border:5px solid black;"></iframe>
+ </body>
+</html>