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

Merge branch 'master' of git://github.com/fdn/html2canvas into fdn-master

Browse Source
This commit is contained in:
Niklas von Hertzen 2013-06-23 19:27:53 +03:00
commit a7d3e9c2a2
4 changed files with 81 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Core.js
View File

@ -20,6 +20,33 @@ _html2canvas.Util.trimText = (function(isNative){
};
})( String.prototype.trim );
(function() {
// TODO: support all possible length values
var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
_html2canvas.Util.parseTextShadows = function (value) {
if (value === 'none') {
return [];
}
// find multiple shadow declarations
var shadows = value.match(TEXT_SHADOW_PROPERTY),
results = [];
for (var i = 0; i < shadows.length; i++) {
var s = shadows[i].match(TEXT_SHADOW_VALUES);
results.push({
color: s[0],
offsetX: s[1] ? s[1].replace('px', '') : 0,
offsetY: s[2] ? s[2].replace('px', '') : 0,
blur: s[3] ? s[3].replace('px', '') : 0
});
}
return results;
};
})();
_html2canvas.Util.parseBackgroundImage = function (value) {
var whitespace = ' \r\n\t',
method, definition, prefix, prefix_i, block, results = [],

14
src/Parse.js
View File

@ -79,7 +79,8 @@ _html2canvas.Parse = function (images, options) {
var align = false,
bold = getCSS(el, "fontWeight"),
family = getCSS(el, "fontFamily"),
size = getCSS(el, "fontSize");
size = getCSS(el, "fontSize"),
shadow = getCSS(el, "textShadow");
switch(parseInt(bold, 10)){
case 401:
@ -94,6 +95,17 @@ _html2canvas.Parse = function (images, options) {
ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));
ctx.setVariable("textAlign", (align) ? "right" : "left");
if (shadow !== "none") {
var shadows = _html2canvas.Util.parseTextShadows(shadow);
// TODO: support multiple text shadows
// apply the first text shadow
ctx.setVariable("shadowColor", shadows[0].color);
ctx.setVariable("shadowOffsetX", shadows[0].offsetX);
ctx.setVariable("shadowOffsetY", shadows[0].offsetY);
ctx.setVariable("shadowBlur", shadows[0].blur);
}
if (text_decoration !== "none"){
return _html2canvas.Util.Font(family, size, doc);
}

11
tests/qunit/index.html
View File

@ -70,6 +70,17 @@
<div style="padding: 15% 0 3%;"></div>
</div>
<div id="textShadows">
<div style=""></div>
<div style="text-shadow: 1px 1px 1px"></div>
<div style="text-shadow: 2px 2px rgb(2, 2, 2)"></div>
<div style="text-shadow: 3px 3px rgba(2, 2, 2, .2)"></div>
<div style="text-shadow: rgb(2, 2, 2) 4px 4px"></div>
<div style="text-shadow: rgba(2, 2, 2, .2) 5px 5px"></div>
<div style="text-shadow: rgb(2, 2, 2) 6px 6px, #222222 2px 2px"></div>
<div style="text-shadow: 7px 7px rgba(2, 2, 2, .2), #222222 2px 2px"></div>
</div>
<div id="backgroundPosition">
<div style="background-position: 1px 0;"></div>
<div style="background-position: 1em 0;"></div>

31
tests/qunit/unit/css.js
View File

@ -143,7 +143,36 @@ $(function() {
});
});
});
});
test('text-shadow', function() {
$('#textShadows div').each(function(i, el) {
var index = i+1;
var value = _html2canvas.Util.getCSS(el, 'textShadow'),
shadows = _html2canvas.Util.parseTextShadows(value);
if (i == 0) {
QUnit.equal(shadows.length, 0, 'div #' + index);
} else {
QUnit.equal(shadows.length, (i >= 6 ? 2 : 1), 'div #' + index);
QUnit.equal(shadows[0].offsetX, i, 'div #' + index + ' offsetX');
QUnit.equal(shadows[0].offsetY, i, 'div #' + index + ' offsetY');
if (i < 2) {
QUnit.equal(shadows[0].color, 'rgba(0, 0, 0, 0)', 'div #' + index + ' color');
} else if (i % 2 == 0) {
QUnit.equal(shadows[0].color, 'rgb(2, 2, 2)', 'div #' + index + ' color');
} else {
var opacity = '0.199219';
QUnit.equal(shadows[0].color, 'rgba(2, 2, 2, '+opacity+')', 'div #' + index + ' color');
}
// only testing blur once
if (i == 1) {
QUnit.equal(shadows[0].blur, '1', 'div #' + index + ' blur');
}
}
});
});
test('background-image', function () {