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 #688 fatal exception on unmatched color stop

Browse Source
This commit is contained in:
Niklas von Hertzen 2015-10-18 16:51:53 +03:00
parent 4b37909f09
commit 46078acf71
5 changed files with 41 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dist/html2canvas.js vendored
View File

@ -2412,6 +2412,8 @@ module.exports = ImageLoader;
var GradientContainer = require('./gradientcontainer'); var GradientContainer = require('./gradientcontainer');
var Color = require('./color'); var Color = require('./color');
var COLOR_STOP_REGEXP = /^(.*)\s*(\d{1,3})?(%|px)?$/;
function LinearGradientContainer(imageData) { function LinearGradientContainer(imageData) {
GradientContainer.apply(this, arguments); GradientContainer.apply(this, arguments);
this.type = this.TYPES.LINEAR; this.type = this.TYPES.LINEAR;
@ -2452,13 +2454,16 @@ function LinearGradientContainer(imageData) {
this.y1 = 1; this.y1 = 1;
} }
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
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)?/); this.colorStops = imageData.args.slice(hasDirection ? 1 : 0)
.map(function(colorStop) { return colorStop.match(COLOR_STOP_REGEXP);})
.filter(function(colorStopMatch) { return !!colorStopMatch;})
.map(function(colorStopMatch) {
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
}; };
}, this); });
if (this.colorStops[0].stop === null) { if (this.colorStops[0].stop === null) {
this.colorStops[0].stop = 0; this.colorStops[0].stop = 0;

2
dist/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
src/lineargradientcontainer.js
View File

@ -1,6 +1,8 @@
var GradientContainer = require('./gradientcontainer'); var GradientContainer = require('./gradientcontainer');
var Color = require('./color'); var Color = require('./color');
var COLOR_STOP_REGEXP = /^(.*)\s*(\d{1,3})?(%|px)?$/;
function LinearGradientContainer(imageData) { function LinearGradientContainer(imageData) {
GradientContainer.apply(this, arguments); GradientContainer.apply(this, arguments);
this.type = this.TYPES.LINEAR; this.type = this.TYPES.LINEAR;
@ -41,13 +43,16 @@ function LinearGradientContainer(imageData) {
this.y1 = 1; this.y1 = 1;
} }
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
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)?/); this.colorStops = imageData.args.slice(hasDirection ? 1 : 0)
.map(function(colorStop) { return colorStop.match(COLOR_STOP_REGEXP);})
.filter(function(colorStopMatch) { return !!colorStopMatch;})
.map(function(colorStopMatch) {
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
}; };
}, this); });
if (this.colorStops[0].stop === null) { if (this.colorStops[0].stop === null) {
this.colorStops[0].stop = 0; this.colorStops[0].stop = 0;

11
tests/mocha/gradients.js
View File

@ -35,6 +35,15 @@ describe("Gradients", function() {
" to(rgb(191, 110, 78))" " to(rgb(191, 110, 78))"
] ]
}, },
{
method: 'linear-gradient',
args: [
"0deg",
" rgb(221, 221, 221)",
" rgb(221, 221, 221) 50%",
" transparent 50%"
]
},
{ {
method: "radial-gradient", method: "radial-gradient",
args: [ args: [
@ -97,7 +106,7 @@ describe("Gradients", function() {
} }
]; ];
$('#backgroundGradients div').each(function(i, node) { [].slice.call(document.querySelectorAll('#backgroundGradients div'), 0).forEach(function(node, i) {
var container = new html2canvas.NodeContainer(node, null); var container = new html2canvas.NodeContainer(node, null);
var value = container.css("backgroundImage"); var value = container.css("backgroundImage");
it(value, function() { it(value, function() {

6
tests/mocha/parsing.html
View File

@ -108,6 +108,11 @@
/* W3C */ /* W3C */
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
} }
.linearGradient4 {
background: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%);
}
.radialGradient { .radialGradient {
background: -moz-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%); background: -moz-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%); background: -webkit-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
@ -156,6 +161,7 @@
<div class="linearGradientSimple"></div> <div class="linearGradientSimple"></div>
<div class="linearGradientWithStops"></div> <div class="linearGradientWithStops"></div>
<div class="linearGradient3"></div> <div class="linearGradient3"></div>
<div class="linearGradient4"></div>
<div class="radialGradient"></div> <div class="radialGradient"></div>
<div class="radialGradient2"></div> <div class="radialGradient2"></div>
<div class="radialGradient3"></div> <div class="radialGradient3"></div>