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

Fix CSS gradients fail to render when non-vendor prefix property is included #388

Browse Source
This commit is contained in:
Niklas von Hertzen 2014-05-18 23:20:45 +03:00
parent 44beaf2989
commit ce1c4c84f5
4 changed files with 91 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
build/html2canvas.js
View File

@ -259,6 +259,8 @@ GradientContainer.prototype.TYPES = {
RADIAL: 2
};
GradientContainer.prototype.angleRegExp = /([+-]?\d*\.?\d+)(deg|grad|rad|turn)/;
function ImageContainer(src, cors) {
this.src = src;
this.image = new Image();
@ -389,28 +391,43 @@ function LinearGradientContainer(imageData) {
GradientContainer.apply(this, arguments);
this.type = this.TYPES.LINEAR;
imageData.args[0].split(" ").forEach(function(position) {
switch(position) {
case "left":
this.x0 = 0;
this.x1 = 1;
break;
case "top":
this.y0 = 0;
this.y1 = 1;
break;
case "right":
this.x0 = 1;
this.x1 = 0;
break;
case "bottom":
this.y0 = 1;
this.y1 = 0;
break;
}
}, this);
var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
this.colorStops = imageData.args.slice(1).map(function(colorStop) {
if (hasDirection) {
imageData.args[0].split(" ").reverse().forEach(function(position) {
switch(position) {
case "left":
this.x0 = 0;
this.x1 = 1;
break;
case "top":
this.y0 = 0;
this.y1 = 1;
break;
case "right":
this.x0 = 1;
this.x1 = 0;
break;
case "bottom":
this.y0 = 1;
this.y1 = 0;
break;
case "to":
var y0 = this.y0;
var x0 = this.x0;
this.y0 = this.y1;
this.x0 = this.x1;
this.x1 = x0;
this.y1 = y0;
break;
}
}, this);
} else {
this.y0 = 0;
this.y1 = 1;
}
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
var colorStopMatch = colorStop.match(this.stepRegExp);
return {
color: colorStopMatch[1],

4
build/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

57
src/lineargradientcontainer.js
View File

@ -2,28 +2,43 @@ function LinearGradientContainer(imageData) {
GradientContainer.apply(this, arguments);
this.type = this.TYPES.LINEAR;
imageData.args[0].split(" ").forEach(function(position) {
switch(position) {
case "left":
this.x0 = 0;
this.x1 = 1;
break;
case "top":
this.y0 = 0;
this.y1 = 1;
break;
case "right":
this.x0 = 1;
this.x1 = 0;
break;
case "bottom":
this.y0 = 1;
this.y1 = 0;
break;
}
}, this);
var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
this.colorStops = imageData.args.slice(1).map(function(colorStop) {
if (hasDirection) {
imageData.args[0].split(" ").reverse().forEach(function(position) {
switch(position) {
case "left":
this.x0 = 0;
this.x1 = 1;
break;
case "top":
this.y0 = 0;
this.y1 = 1;
break;
case "right":
this.x0 = 1;
this.x1 = 0;
break;
case "bottom":
this.y0 = 1;
this.y1 = 0;
break;
case "to":
var y0 = this.y0;
var x0 = this.x0;
this.y0 = this.y1;
this.x0 = this.x1;
this.x1 = x0;
this.y1 = y0;
break;
}
}, this);
} else {
this.y0 = 0;
this.y1 = 1;
}
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
var colorStopMatch = colorStop.match(this.stepRegExp);
return {
color: colorStopMatch[1],

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

@ -99,6 +99,19 @@
/* W3C */
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
}
.linearGradient7 {
background: #cce5f4;
background: -moz-linear-gradient(top, #cce5f4 0%, #00263c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cce5f4), color-stop(100%, #00263c));
background: -webkit-linear-gradient(top, #cce5f4 0%, #00263c 100%);
background: -o-linear-gradient(top, #cce5f4 0%, #00263c 100%);
background: -ms-linear-gradient(top, #cce5f4 0%, #00263c 100%);
background: linear-gradient(to bottom, #cce5f4 0%, #00263c 100%);
}
.linearGradient8 {
background: linear-gradient(to top left, #fff 0%, #00263c 100%);
}
</style>
</head>
@ -110,6 +123,8 @@
<div class="linearGradient4">&nbsp;</div>
<div class="linearGradient5">&nbsp;</div>
<div class="linearGradient6">&nbsp;</div>
<div class="linearGradient7">&nbsp;</div>
<div class="linearGradient8">&nbsp;</div>
</div>
</body>
</html>