mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Correctly handle named colors in gradients

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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) { 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 { return {
color: new Color(colorStopMatch[1]), color: new Color(colorStopMatch[1]),
stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
@ -2743,7 +2743,7 @@ NodeContainer.prototype.getValue = function() {
return value.length === 0 ? (this.node.placeholder || "") : value; 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_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g; NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
NodeContainer.prototype.CLIP = /^rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)$/; 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 match[2].split(",").map(function(s) {
return parseFloat(s.trim()); 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]];
} }
} }

6
dist/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/lineargradientcontainer.js
View File

@ -42,7 +42,7 @@ function LinearGradientContainer(imageData) {
} }
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) { 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 { return {
color: new Color(colorStopMatch[1]), color: new Color(colorStopMatch[1]),
stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null

5
tests/cases/background/linear-gradient.html
View File

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