Correctly handle named colors in gradients

This commit is contained in:
Niklas von Hertzen 2015-03-29 23:20:17 +03:00
parent 4b80102e77
commit a49c3a2320
4 changed files with 16 additions and 6 deletions

9
dist/html2canvas.js vendored
View File

@ -2440,7 +2440,7 @@ function LinearGradientContainer(imageData) {
}
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
var colorStopMatch = colorStop.replace(/transparent/g, 'rgba(0, 0, 0, 0.0)').match(this.stepRegExp);
var colorStopMatch = colorStop.match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)|\w+)\s*(\d{1,3})?(%|px)?/);
return {
color: new Color(colorStopMatch[1]),
stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
@ -2743,7 +2743,7 @@ NodeContainer.prototype.getValue = function() {
return value.length === 0 ? (this.node.placeholder || "") : value;
};
NodeContainer.prototype.MATRIX_PROPERTY = /(matrix)\((.+)\)/;
NodeContainer.prototype.MATRIX_PROPERTY = /(matrix|matrix3d)\((.+)\)/;
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
NodeContainer.prototype.CLIP = /^rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)$/;
@ -2758,6 +2758,11 @@ function parseMatrix(match) {
return match[2].split(",").map(function(s) {
return parseFloat(s.trim());
});
} else if (match && match[1] === "matrix3d") {
var matrix3d = match[2].split(",").map(function(s) {
return parseFloat(s.trim());
});
return [matrix3d[0], matrix3d[1], matrix3d[4], matrix3d[5], matrix3d[12], matrix3d[13]];
}
}

File diff suppressed because one or more lines are too long

View File

@ -42,7 +42,7 @@ function LinearGradientContainer(imageData) {
}
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
var colorStopMatch = colorStop.replace(/transparent/g, 'rgba(0, 0, 0, 0.0)').match(this.stepRegExp);
var colorStopMatch = colorStop.match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)|\w+)\s*(\d{1,3})?(%|px)?/);
return {
color: new Color(colorStopMatch[1]),
stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null

View File

@ -112,6 +112,10 @@
.linearGradient8 {
background: linear-gradient(to top left, #fff 0%, #00263c 100%);
}
.linearGradient9 {
background: linear-gradient(to top left, white 0%, black 100%);
}
</style>
</head>
@ -125,6 +129,7 @@
<div class="linearGradient6">&nbsp;</div>
<div class="linearGradient7">&nbsp;</div>
<div class="linearGradient8">&nbsp;</div>
<div class="linearGradient9">&nbsp;</div>
</div>
</body>
</html>