Permalink
Browse files

"-moz-linear-gradient parsing"

  • Loading branch information...
1 parent f387267 commit 51b2c01b0c3644f00e1133f20a2e65f0b6efb7d7 André Fiedler committed Mar 6, 2012
Showing with 69 additions and 2 deletions.
  1. +69 −2 src/Generate.js
View
71 src/Generate.js
@@ -15,17 +15,24 @@ _html2canvas.Generate = {};
// -webkit-linear-gradient(left, rgb(206, 219, 233) 0%, rgb(170, 197, 222) 17%, rgb(97, 153, 199) 50%, rgb(58, 132, 195) 51%, rgb(65, 154, 214) 59%, rgb(75, 184, 240) 71%, rgb(58, 139, 194) 84%, rgb(38, 85, 139) 100%)
// -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)))
// -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 183, 161)), color-stop(0.5, rgb(140, 51, 16)), color-stop(0.51, rgb(117, 34, 1)), to(rgb(191, 110, 78)))
-// -moz-linear-gradient(100% 0%, rgb(255, 0, 0), rgb(0, 0, 255), rgb(186, 218, 85), rgba(0, 0, 255, 0.5))
+// -moz-linear-gradient(0% 50%, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0))
+// -moz-linear-gradient(0% 50%, rgb(206, 219, 233) 0%, rgb(170, 197, 222) 17%, rgb(97, 153, 199) 50%, rgb(58, 132, 195) 51%, rgb(65, 154, 214) 59%, rgb(75, 184, 240) 71%, rgb(58, 139, 194) 84%, rgb(38, 85, 139) 100%)
+// -moz-linear-gradient(50% 0%, rgb(240, 183, 161) 0%, rgb(140, 51, 16) 50%, rgb(117, 34, 1) 51%, rgb(191, 110, 78) 100%)
var reGradients = [
/^(-webkit-linear-gradient)\(([a-z\s]+)((?:,\s(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+)\)$/,
- /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))((?:,\s(?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+)\)$/
+ /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))((?:,\s(?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+)\)$/,
+ /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))((?:,\s(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+)\)$/
];
// ["-webkit-linear-gradient(left top, rgb(255, 0, 0), rgb(0, 0, 255), rgb(186, 218, 85), rgba(0, 0, 255, 0.496094))", "-webkit-linear-gradient", "left top", ", rgb(255, 0, 0), rgb(0, 0, 255), rgb(186, 218, 85), rgba(0, 0, 255, 0.496094)"]
// ["-webkit-linear-gradient(left, rgb(206, 219, 233) 0%, rgb(170, 197, 222) 17%, rgb(97, 153, 199) 50%, rgb(58, 132, 195) 51%, rgb(65, 154, 214) 59%, rgb(75, 184, 240) 71%, rgb(58, 139, 194) 84%, rgb(38, 85, 139) 100%)", "-webkit-linear-gradient", "left", ", rgb(206, 219, 233) 0%, rgb(170, 197, 222) 17%, rgb(97, 153, 199) 50%, rgb(58, 132, 195) 51%, rgb(65, 154, 214) 59%, rgb(75, 184, 240) 71%, rgb(58, 139, 194) 84%, rgb(38, 85, 139) 100%"]
// ["-webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)))", "-webkit-gradient", "linear", "0% 0", "0% 100%", ", from(rgb(252, 252, 252)), to(rgb(232, 232, 232))"]
// ["-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 183, 161)), color-stop(0.5, rgb(140, 51, 16)), color-stop(0.51, rgb(117, 34, 1)), to(rgb(191, 110, 78)))", "-webkit-gradient", "linear", "0% 0%, 0% 100%", ", from(rgb(240, 183, 161)), color-stop(0.5, rgb(140, 51, 16)), color-stop(0.51, rgb(117, 34, 1)), to(rgb(191, 110, 78))"]
+// ["-moz-linear-gradient(0%...55, 0), rgb(0, 255, 0))", "-moz-linear-gradient", "0% 50%", ", rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0)"]
+// ["-moz-linear-gradient(0%... rgb(38, 85, 139) 100%)", "-moz-linear-gradient", "0% 50%", ", rgb(206, 219, 233) 0%..., rgb(38, 85, 139) 100%"]
+// ["-moz-linear-gradient(50...rgb(191, 110, 78) 100%)", "-moz-linear-gradient", "50% 0%", ", rgb(240, 183, 161) 0%... rgb(191, 110, 78) 100%"]
+// ["-moz-linear-gradient(0%...55, 0), rgb(0, 255, 0))", "-moz-linear-gradient", "0% 50%", ", rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0)"]
_html2canvas.Generate.parseGradient = function(css, bounds) {
var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
@@ -35,6 +42,8 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
if(m1) break;
}
+ console.log(m1);
+
if(m1) {
switch(m1[1]) {
case '-webkit-linear-gradient':
@@ -132,6 +141,64 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
}
}
break;
+
+ case '-moz-linear-gradient':
+
+ gradient = {
+ type: 'linear',
+ x0: 0,
+ y0: 0,
+ x1: 0,
+ y1: 0,
+ colorStops: []
+ };
+
+ // get coordinates
+ m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
+
+ // m2[1] == 0% -> left
+ // m2[1] == 50% -> center
+ // m2[1] == 100% -> right
+
+ // m2[2] == 0% -> top
+ // m2[2] == 50% -> center
+ // m2[2] == 100% -> bottom
+
+ if(m2){
+ gradient.x0 = (m2[1] * bounds.width) / 100;
+ gradient.y0 = (m2[2] * bounds.height) / 100;
+ gradient.x1 = bounds.width - gradient.x0;
+ gradient.y1 = bounds.height - gradient.y0;
+ }
+
+ if(gradient.x0 === gradient.x1) // center
+ gradient.x0 = gradient.x1 = 0;
+
+ if(gradient.y0 === gradient.y1) // center
+ gradient.y0 = gradient.y1 = 0;
+
+ // get colors and stops
+ m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g);
+ if(m2){
+ m2Len = m2.length;
+ step = 1 / Math.max(m2Len - 1, 1);
+ for(i = 0; i < m2Len; i+=1){
+ m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);
+ if(m3[2]){
+ stop = parseFloat(m3[2]);
+ if(m3[3]){ // percentage
+ stop /= 100;
+ }
+ } else {
+ stop = i * step;
+ }
+ gradient.colorStops.push({
+ color: m3[1],
+ stop: stop
+ });
+ }
+ }
+ break;
}
}

0 comments on commit 51b2c01

Please sign in to comment.