Skip to content

Commit a7d3e9c

Browse files
niklasvhniklasvh
committed
Merge branch 'master' of git://github.com/fdn/html2canvas into fdn-master
2 parents a902f92 + f49e147 commit a7d3e9c

4 files changed

Lines changed: 81 additions & 2 deletions

File tree

‎src/Core.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,33 @@ _html2canvas.Util.trimText = (function(isNative){
2020
};
2121
})( String.prototype.trim );
2222

23+
(function() {
24+
25+
// TODO: support all possible length values
26+
var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
27+
var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
28+
_html2canvas.Util.parseTextShadows = function (value) {
29+
if (value === 'none') {
30+
return [];
31+
}
32+
33+
// find multiple shadow declarations
34+
var shadows = value.match(TEXT_SHADOW_PROPERTY),
35+
results = [];
36+
for (var i = 0; i < shadows.length; i++) {
37+
var s = shadows[i].match(TEXT_SHADOW_VALUES);
38+
results.push({
39+
color: s[0],
40+
offsetX: s[1] ? s[1].replace('px', '') : 0,
41+
offsetY: s[2] ? s[2].replace('px', '') : 0,
42+
blur: s[3] ? s[3].replace('px', '') : 0
43+
});
44+
}
45+
return results;
46+
};
47+
})();
48+
49+
2350
_html2canvas.Util.parseBackgroundImage = function (value) {
2451
var whitespace = ' \r\n\t',
2552
method, definition, prefix, prefix_i, block, results = [],

‎src/Parse.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,8 @@ _html2canvas.Parse = function (images, options) {
7979
var align = false,
8080
bold = getCSS(el, "fontWeight"),
8181
family = getCSS(el, "fontFamily"),
82-
size = getCSS(el, "fontSize");
82+
size = getCSS(el, "fontSize"),
83+
shadow = getCSS(el, "textShadow");
8384

8485
switch(parseInt(bold, 10)){
8586
case 401:
@@ -94,6 +95,17 @@ _html2canvas.Parse = function (images, options) {
9495
ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));
9596
ctx.setVariable("textAlign", (align) ? "right" : "left");
9697

98+
if (shadow !== "none") {
99+
var shadows = _html2canvas.Util.parseTextShadows(shadow);
100+
101+
// TODO: support multiple text shadows
102+
// apply the first text shadow
103+
ctx.setVariable("shadowColor", shadows[0].color);
104+
ctx.setVariable("shadowOffsetX", shadows[0].offsetX);
105+
ctx.setVariable("shadowOffsetY", shadows[0].offsetY);
106+
ctx.setVariable("shadowBlur", shadows[0].blur);
107+
}
108+
97109
if (text_decoration !== "none"){
98110
return _html2canvas.Util.Font(family, size, doc);
99111
}

‎tests/qunit/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,17 @@
7070
<div style="padding: 15% 0 3%;"></div>
7171
</div>
7272

73+
<div id="textShadows">
74+
<div style=""></div>
75+
<div style="text-shadow: 1px 1px 1px"></div>
76+
<div style="text-shadow: 2px 2px rgb(2, 2, 2)"></div>
77+
<div style="text-shadow: 3px 3px rgba(2, 2, 2, .2)"></div>
78+
<div style="text-shadow: rgb(2, 2, 2) 4px 4px"></div>
79+
<div style="text-shadow: rgba(2, 2, 2, .2) 5px 5px"></div>
80+
<div style="text-shadow: rgb(2, 2, 2) 6px 6px, #222222 2px 2px"></div>
81+
<div style="text-shadow: 7px 7px rgba(2, 2, 2, .2), #222222 2px 2px"></div>
82+
</div>
83+
7384
<div id="backgroundPosition">
7485
<div style="background-position: 1px 0;"></div>
7586
<div style="background-position: 1em 0;"></div>

‎tests/qunit/unit/css.js‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,36 @@ $(function() {
143143
});
144144

145145
});
146-
});
146+
});
147+
148+
test('text-shadow', function() {
149+
150+
$('#textShadows div').each(function(i, el) {
151+
var index = i+1;
152+
var value = _html2canvas.Util.getCSS(el, 'textShadow'),
153+
shadows = _html2canvas.Util.parseTextShadows(value);
154+
if (i == 0) {
155+
QUnit.equal(shadows.length, 0, 'div #' + index);
156+
} else {
157+
QUnit.equal(shadows.length, (i >= 6 ? 2 : 1), 'div #' + index);
158+
QUnit.equal(shadows[0].offsetX, i, 'div #' + index + ' offsetX');
159+
QUnit.equal(shadows[0].offsetY, i, 'div #' + index + ' offsetY');
160+
if (i < 2) {
161+
QUnit.equal(shadows[0].color, 'rgba(0, 0, 0, 0)', 'div #' + index + ' color');
162+
} else if (i % 2 == 0) {
163+
QUnit.equal(shadows[0].color, 'rgb(2, 2, 2)', 'div #' + index + ' color');
164+
} else {
165+
var opacity = '0.199219';
166+
QUnit.equal(shadows[0].color, 'rgba(2, 2, 2, '+opacity+')', 'div #' + index + ' color');
167+
}
168+
169+
// only testing blur once
170+
if (i == 1) {
171+
QUnit.equal(shadows[0].blur, '1', 'div #' + index + ' blur');
172+
}
173+
}
174+
});
175+
});
147176

148177
test('background-image', function () {
149178

0 commit comments

Comments
 (0)