From 958cfdf4eb8cb8393f78b534476dd87dcb422f13 Mon Sep 17 00:00:00 2001 From: The Brain Date: Mon, 12 Sep 2011 11:02:15 +0300 Subject: [PATCH 1/4] Added support for base64 encoded images as sources --- build/html2canvas.js | 40 ++++++++++++++++++++++++++++++---------- tests/background.html | 13 ++++++++++--- 2 files changed, 40 insertions(+), 13 deletions(-) diff --git a/build/html2canvas.js b/build/html2canvas.js index 2060682..49fd0c8 100644 --- a/build/html2canvas.js +++ b/build/html2canvas.js @@ -28,6 +28,16 @@ * THE SOFTWARE. */ +if (typeof Array.prototype.indexOf == "undefined") { + Array.prototype.indexOf = function(elem) { + if (!this.length) return -1; + for (var i = 0, len = this.length; i < len; i++) { + if (this[i] == elem) return i + } + return -1 + } +} + /** * Creates a render of the element el * @constructor @@ -150,7 +160,7 @@ html2canvas.prototype.init = function(){ this.images.push('start'); this.getImages(this.element); - + this.log('Finding images'); // console.log(this.element.ownerDocument); @@ -173,8 +183,7 @@ html2canvas.prototype.init = function(){ */ html2canvas.prototype.start = function(){ - // console.log(this.images); - if (this.images.length == 0 || this.imagesLoaded==this.images.length/2){ + if (this.images.length == 0 || this.imagesLoaded==this.images.length/2){ this.log('Finished loading '+this.imagesLoaded+' images, Started parsing'); this.bodyOverflow = document.getElementsByTagName('body')[0].style.overflow; @@ -294,11 +303,13 @@ html2canvas.prototype.finish = function(){ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ // TODO add support for multi background-images - var background_image = this.getCSS(el,"background-image").split(",")[0]; + var background_image = this.getCSS(el,"background-image"); var background_repeat = this.getCSS(el,"background-repeat").split(",")[0]; - + + if (!background_image.match(/data:image\/.*;base64,/i)) + background_image = this.getCSS(el,"background-image").split(",")[0]; + if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)==false){ - background_image = this.backgroundImageUrl(background_image); var image = this.loadImage(background_image); @@ -439,7 +450,10 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ */ html2canvas.prototype.backgroundImageUrl = function(src){ - if (src.substr(0,5)=='url("'){ + if (src.match(/data:image\/.*;base64,/i)) { + return src + } + if (src.toLowerCase().substr(0,5)=='url("'){ src = src.substr(5); src = src.substr(0,src.length-2); }else{ @@ -610,7 +624,6 @@ html2canvas.prototype.getBorderData = function(el){ html2canvas.prototype.drawBorders = function(el,ctx, bounds,clip){ - var x = bounds.left; var y = bounds.top; var w = bounds.width; @@ -961,7 +974,7 @@ html2canvas.prototype.getImages = function(el) { if (background_image && background_image != "1" && background_image != "none" && background_image.substring(0,7)!="-webkit" && background_image.substring(0,3)!="-o-" && background_image.substring(0,4)!="-moz"){ // TODO add multi image background support - var src = this.backgroundImageUrl(background_image.split(",")[0]); + var src = this.backgroundImageUrl(background_image.match(/data:image\/.*;base64,/i) ? background_image : background_image.split(",")[0]); this.preloadImage(src); } } @@ -991,7 +1004,14 @@ html2canvas.prototype.preloadImage = function(src){ if (this.getIndex(this.images,src)==-1){ - if (this.isSameOrigin(src)){ + if (src.match(/data:image\/.*;base64,/i)) { + var img = new Image(); + img.src = src.replace(/url\(['"]|['"]\)$/img, ''); + this.images.push(src); + this.images.push(img); + this.imagesLoaded++; + this.start(); + } else if(this.isSameOrigin(src)){ this.images.push(src); // console.log('a'+src); var img = new Image(); diff --git a/tests/background.html b/tests/background.html index a77c63f..45b5254 100644 --- a/tests/background.html +++ b/tests/background.html @@ -46,6 +46,11 @@ div{ display:block; } + + .encoded { + background:url("data:image/jpeg;base64,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"); + background-position: center center; + } @@ -87,12 +92,14 @@
-
- +
- + +
+
+
From 180cd382654723d442e211a9c7903e68a952a704 Mon Sep 17 00:00:00 2001 From: The Brain Date: Mon, 12 Sep 2011 11:22:17 +0300 Subject: [PATCH 2/4] Fixed regular expression for chrome --- build/html2canvas.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/build/html2canvas.js b/build/html2canvas.js index 49fd0c8..790163b 100644 --- a/build/html2canvas.js +++ b/build/html2canvas.js @@ -312,7 +312,6 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)==false){ background_image = this.backgroundImageUrl(background_image); var image = this.loadImage(background_image); - var bgp = this.getBackgroundPosition(el,bounds,image), bgy; @@ -1006,7 +1005,7 @@ html2canvas.prototype.preloadImage = function(src){ if (this.getIndex(this.images,src)==-1){ if (src.match(/data:image\/.*;base64,/i)) { var img = new Image(); - img.src = src.replace(/url\(['"]|['"]\)$/img, ''); + img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, ''); this.images.push(src); this.images.push(img); this.imagesLoaded++; From 5ba5ef571c2326f42628a1481f208d86c98da70c Mon Sep 17 00:00:00 2001 From: The Brain Date: Mon, 12 Sep 2011 13:44:39 +0300 Subject: [PATCH 3/4] Added support for background linear gradients on mozilla and webkit --- build/html2canvas.js | 100 ++++++++++++++++++++++++++++++++++-------- tests/background.html | 9 ++++ 2 files changed, 90 insertions(+), 19 deletions(-) diff --git a/build/html2canvas.js b/build/html2canvas.js index 790163b..9bcae9a 100644 --- a/build/html2canvas.js +++ b/build/html2canvas.js @@ -170,7 +170,7 @@ html2canvas.prototype.init = function(){ _.preloadImage(_.getAttr(e,'src')); }); this.images.splice(0,1); - // console.log(this.images); + // console.log(this.images); if (this.images.length == 0){ this.start(); } @@ -297,7 +297,73 @@ html2canvas.prototype.finish = function(){ this.opts.ready(this); } +/* + * This method draws the gradient on a temporary canvas and inserts it in the images stack as a image so the rest of the code will handle it seamlessly + */ +html2canvas.prototype.drawGradient = function(src, bounds) { + var canvas = document.createElement('canvas'), + tmp, p0 = 0,p1 = 0,p2 = 0,p3 = 0, + steps=[]; + + canvas.width = bounds.width; + canvas.height = bounds.height; + var ctx = canvas.getContext('2d'); + function getColors(input) { + var j = -1, color = ''; + while(j++ < input.length) { + var chr = input.charAt(j); + if (chr == ')') { + color += chr; + steps.push(color); + color = ''; + j+=2; + } else { + color += chr; + } + } + } + if (tmp = src.match(/-webkit-linear-gradient\((.*)\)/)) { + var position = tmp[1].split(",", 1)[0]; + getColors(tmp[1].substr(position.length + 2)); + position = position.split(' '); + for (var p = 0; p < position.length; p++) { + switch(position[p]) { + case 'top': p3 = bounds.height; break; + case 'right': p0 = bounds.width; break; + case 'bottom': p1 = bounds.height; break; + case 'left': p2 = bounds.width; break; + } + } + + } else if (tmp = src.match(/-webkit-gradient\(linear, (\d+)% (\d+)\%, (\d+)% (\d+)%, from\((.*)\), to\((.*)\)\)/)) { + p0 = (tmp[1] * bounds.width) / 100; p1 = (tmp[2] * bounds.height) / 100; + p2 = (tmp[3] * bounds.width) / 100; p3 = (tmp[4] * bounds.height) / 100; + steps.push(tmp[5]); + steps.push(tmp[6]); + } else if (tmp = src.match(/-moz-linear-gradient\((\d+)% (\d+)%, (.*)\)/)) { + p0 = (tmp[1] * bounds.width) / 100; p1 = (tmp[2] * bounds.width) / 100; + p2 = bounds.width - p0; p3 = bounds.height - p1; + getColors(tmp[3]) + } else { + return; + } + + var lingrad = ctx.createLinearGradient(p0,p1,p2,p3); + var increment = 1 / (steps.length - 1); + for (var i = 0, len = steps.length; i < len; i++) { + lingrad.addColorStop(increment * i, steps[i]); + } + ctx.fillStyle = lingrad; + // draw shapes + ctx.fillRect(0, 0, bounds.width,bounds.height); + var img = new Image(); + img.src = canvas.toDataURL(); + this.images.push(src); + this.images.push(img); + this.imagesLoaded++; + this.start(); +} html2canvas.prototype.drawBackground = function(el,bounds,ctx){ @@ -306,13 +372,13 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ var background_image = this.getCSS(el,"background-image"); var background_repeat = this.getCSS(el,"background-repeat").split(",")[0]; - if (!background_image.match(/data:image\/.*;base64,/i)) + if (!/data:image\/.*;base64,/i.test(background_image) && !/^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)) { background_image = this.getCSS(el,"background-image").split(",")[0]; + } - if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)==false){ + if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false) { background_image = this.backgroundImageUrl(background_image); var image = this.loadImage(background_image); - var bgp = this.getBackgroundPosition(el,bounds,image), bgy; @@ -449,7 +515,7 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ */ html2canvas.prototype.backgroundImageUrl = function(src){ - if (src.match(/data:image\/.*;base64,/i)) { + if (/data:image\/.*;base64,/i.test(src) || /^(-webkit|-moz|linear-gradient|-o-)/.test(src)) { return src } if (src.toLowerCase().substr(0,5)=='url("'){ @@ -527,9 +593,6 @@ html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){ } - - - html2canvas.prototype.drawbackgroundRepeatY = function(ctx,image,bgp,x,y,w,h){ var height, @@ -800,8 +863,7 @@ html2canvas.prototype.newElement = function(el,parentStack){ bgbounds.height, bgcolor ); - - this.drawBackground(el,bgbounds,ctx); + this.drawBackground(el,bgbounds,ctx); } switch(el.nodeName){ @@ -971,10 +1033,14 @@ html2canvas.prototype.getImages = function(el) { if (el.nodeType==1 || typeof el.nodeType == "undefined"){ var background_image = this.getCSS(el,'background-image'); - if (background_image && background_image != "1" && background_image != "none" && background_image.substring(0,7)!="-webkit" && background_image.substring(0,3)!="-o-" && background_image.substring(0,4)!="-moz"){ - // TODO add multi image background support - var src = this.backgroundImageUrl(background_image.match(/data:image\/.*;base64,/i) ? background_image : background_image.split(",")[0]); - this.preloadImage(src); + if (background_image && background_image != "1" && background_image != "none") { + if (background_image.substring(0,7) == "-webkit" || background_image.substring(0,3) == "-o-" || background_image.substring(0,4) == "-moz") { + this.drawGradient(background_image, this.getBounds(el)) + } else { + // TODO add multi image background support + var src = this.backgroundImageUrl(background_image.match(/data:image\/.*;base64,/i) ? background_image : background_image.split(",")[0]); + this.preloadImage(src); + } } } } @@ -985,7 +1051,7 @@ html2canvas.prototype.getImages = function(el) { */ html2canvas.prototype.loadImage = function(src){ - + var imgIndex = this.getIndex(this.images,src); if (imgIndex!=-1){ return this.images[imgIndex+1]; @@ -995,10 +1061,6 @@ html2canvas.prototype.loadImage = function(src){ } - - - - html2canvas.prototype.preloadImage = function(src){ diff --git a/tests/background.html b/tests/background.html index 45b5254..9ed8014 100644 --- a/tests/background.html +++ b/tests/background.html @@ -51,10 +51,19 @@ background:url("data:image/jpeg;base64,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"); background-position: center center; } + + .linearGradient { + /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 0, 0)), to(rgb(0, 0, 255)));*/ + background: -webkit-linear-gradient(top left, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5)); + background: -moz-linear-gradient(top right, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5)); + } +
+
 
+
From 52150b09cd6e68bf6ab6edcb09ab4090da6f4e00 Mon Sep 17 00:00:00 2001 From: The Brain Date: Tue, 13 Sep 2011 09:59:12 +0300 Subject: [PATCH 4/4] Fixed webkit-gradient regular expr --- build/html2canvas.js | 6 +----- src/Generate.js | 4 ++-- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/build/html2canvas.js b/build/html2canvas.js index 33c94bc..cbffeef 100644 --- a/build/html2canvas.js +++ b/build/html2canvas.js @@ -192,9 +192,7 @@ html2canvas.Generate.Gradient = function(src, bounds) { } } } - if ( tmp = src.match(/-webkit-linear-gradient\((.*)\)/) ) { - position = tmp[1].split( ",", 1 )[0]; getColors( tmp[1].substr( position.length + 2 ) ); position = position.split(' '); @@ -221,8 +219,7 @@ html2canvas.Generate.Gradient = function(src, bounds) { } - } else if (tmp = src.match(/-webkit-gradient\(linear, (\d+)% (\d+)\%, (\d+)% (\d+)%, from\((.*)\), to\((.*)\)\)/)) { - + } else if (tmp = src.match(/-webkit-gradient\(linear, (\d+)[%]{0,1} (\d+)[%]{0,1}, (\d+)[%]{0,1} (\d+)[%]{0,1}, from\((.*)\), to\((.*)\)\)/)) { p0 = (tmp[1] * bounds.width) / 100; p1 = (tmp[2] * bounds.height) / 100; p2 = (tmp[3] * bounds.width) / 100; @@ -232,7 +229,6 @@ html2canvas.Generate.Gradient = function(src, bounds) { steps.push(tmp[6]); } else if (tmp = src.match(/-moz-linear-gradient\((\d+)% (\d+)%, (.*)\)/)) { - p0 = (tmp[1] * bounds.width) / 100; p1 = (tmp[2] * bounds.width) / 100; p2 = bounds.width - p0; diff --git a/src/Generate.js b/src/Generate.js index 4d76d97..3a02c78 100644 --- a/src/Generate.js +++ b/src/Generate.js @@ -67,7 +67,7 @@ html2canvas.Generate.Gradient = function(src, bounds) { } - } else if (tmp = src.match(/-webkit-gradient\(linear, (\d+)% (\d+)\%, (\d+)% (\d+)%, from\((.*)\), to\((.*)\)\)/)) { + } else if (tmp = src.match(/-webkit-gradient\(linear, (\d+)[%]{0,1} (\d+)[%]{0,1}, (\d+)[%]{0,1} (\d+)[%]{0,1}, from\((.*)\), to\((.*)\)\)/)) { p0 = (tmp[1] * bounds.width) / 100; p1 = (tmp[2] * bounds.height) / 100; @@ -77,7 +77,7 @@ html2canvas.Generate.Gradient = function(src, bounds) { steps.push(tmp[5]); steps.push(tmp[6]); - } else if (tmp = src.match(/-moz-linear-gradient\((\d+)% (\d+)%, (.*)\)/)) { + } else if (tmp = src.match(/-moz-linear-gradient\((\d+)[%]{0,1} (\d+)[%]{0,1}, (.*)\)/)) { p0 = (tmp[1] * bounds.width) / 100; p1 = (tmp[2] * bounds.width) / 100;