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

21
build/html2canvas.js
View File

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

4
build/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
src/lineargradientcontainer.js
View File

@ -2,7 +2,10 @@ function LinearGradientContainer(imageData) {
GradientContainer.apply(this, arguments); GradientContainer.apply(this, arguments);
this.type = this.TYPES.LINEAR; this.type = this.TYPES.LINEAR;
imageData.args[0].split(" ").forEach(function(position) { var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
if (hasDirection) {
imageData.args[0].split(" ").reverse().forEach(function(position) {
switch(position) { switch(position) {
case "left": case "left":
this.x0 = 0; this.x0 = 0;
@ -20,10 +23,22 @@ function LinearGradientContainer(imageData) {
this.y0 = 1; this.y0 = 1;
this.y1 = 0; this.y1 = 0;
break; 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); }, this);
} else {
this.y0 = 0;
this.y1 = 1;
}
this.colorStops = imageData.args.slice(1).map(function(colorStop) { this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
var colorStopMatch = colorStop.match(this.stepRegExp); var colorStopMatch = colorStop.match(this.stepRegExp);
return { return {
color: colorStopMatch[1], color: colorStopMatch[1],

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

@ -99,6 +99,19 @@
/* W3C */ /* W3C */
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%); 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> </style>
</head> </head>
@ -110,6 +123,8 @@
<div class="linearGradient4">&nbsp;</div> <div class="linearGradient4">&nbsp;</div>
<div class="linearGradient5">&nbsp;</div> <div class="linearGradient5">&nbsp;</div>
<div class="linearGradient6">&nbsp;</div> <div class="linearGradient6">&nbsp;</div>
<div class="linearGradient7">&nbsp;</div>
<div class="linearGradient8">&nbsp;</div>
</div> </div>
</body> </body>
</html> </html>