mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Enabled list-style-type's for position inside
This commit is contained in:
MoyuScript
parent
708ca39057
commit
42b9e57892
@ -154,6 +154,8 @@ html2canvas.Util.Children = function(el) {
|
|||||||
}
|
}
|
||||||
html2canvas.Generate = {};
|
html2canvas.Generate = {};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
html2canvas.Generate.Gradient = function(src, bounds) {
|
html2canvas.Generate.Gradient = function(src, bounds) {
|
||||||
var canvas = document.createElement('canvas'),
|
var canvas = document.createElement('canvas'),
|
||||||
ctx = canvas.getContext('2d'),
|
ctx = canvas.getContext('2d'),
|
||||||
@ -192,7 +194,9 @@ html2canvas.Generate.Gradient = function(src, bounds) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( tmp = src.match(/-webkit-linear-gradient\((.*)\)/) ) {
|
if ( tmp = src.match(/-webkit-linear-gradient\((.*)\)/) ) {
|
||||||
|
|
||||||
position = tmp[1].split( ",", 1 )[0];
|
position = tmp[1].split( ",", 1 )[0];
|
||||||
getColors( tmp[1].substr( position.length + 2 ) );
|
getColors( tmp[1].substr( position.length + 2 ) );
|
||||||
position = position.split(' ');
|
position = position.split(' ');
|
||||||
@ -220,6 +224,7 @@ html2canvas.Generate.Gradient = function(src, bounds) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
} else if (tmp = src.match(/-webkit-gradient\(linear, (\d+)[%]{0,1} (\d+)[%]{0,1}, (\d+)[%]{0,1} (\d+)[%]{0,1}, from\((.*)\), to\((.*)\)\)/)) {
|
} else if (tmp = src.match(/-webkit-gradient\(linear, (\d+)[%]{0,1} (\d+)[%]{0,1}, (\d+)[%]{0,1} (\d+)[%]{0,1}, from\((.*)\), to\((.*)\)\)/)) {
|
||||||
|
|
||||||
p0 = (tmp[1] * bounds.width) / 100;
|
p0 = (tmp[1] * bounds.width) / 100;
|
||||||
p1 = (tmp[2] * bounds.height) / 100;
|
p1 = (tmp[2] * bounds.height) / 100;
|
||||||
p2 = (tmp[3] * bounds.width) / 100;
|
p2 = (tmp[3] * bounds.width) / 100;
|
||||||
@ -228,7 +233,8 @@ html2canvas.Generate.Gradient = function(src, bounds) {
|
|||||||
steps.push(tmp[5]);
|
steps.push(tmp[5]);
|
||||||
steps.push(tmp[6]);
|
steps.push(tmp[6]);
|
||||||
|
|
||||||
} else if (tmp = src.match(/-moz-linear-gradient\((\d+)% (\d+)%, (.*)\)/)) {
|
} else if (tmp = src.match(/-moz-linear-gradient\((\d+)[%]{0,1} (\d+)[%]{0,1}, (.*)\)/)) {
|
||||||
|
|
||||||
p0 = (tmp[1] * bounds.width) / 100;
|
p0 = (tmp[1] * bounds.width) / 100;
|
||||||
p1 = (tmp[2] * bounds.width) / 100;
|
p1 = (tmp[2] * bounds.width) / 100;
|
||||||
p2 = bounds.width - p0;
|
p2 = bounds.width - p0;
|
||||||
@ -257,6 +263,42 @@ html2canvas.Generate.Gradient = function(src, bounds) {
|
|||||||
return img;
|
return img;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html2canvas.Generate.ListAlpha = function(number) {
|
||||||
|
var tmp = "",
|
||||||
|
modulus;
|
||||||
|
|
||||||
|
do {
|
||||||
|
modulus = number % 26;
|
||||||
|
tmp = String.fromCharCode((modulus) + 64) + tmp;
|
||||||
|
number = number / 26;
|
||||||
|
}while((number*26) > 26);
|
||||||
|
|
||||||
|
return tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
html2canvas.Generate.ListRoman = function(number) {
|
||||||
|
var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
|
||||||
|
decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
|
||||||
|
roman = "",
|
||||||
|
v,
|
||||||
|
len = romanArray.length;
|
||||||
|
|
||||||
|
if (number <= 0 || number >= 4000) {
|
||||||
|
return number;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (v=0; v < len; v+=1) {
|
||||||
|
while (number >= decimal[v]) {
|
||||||
|
number -= decimal[v];
|
||||||
|
roman += romanArray[v];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return roman;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* New function for traversing elements
|
* New function for traversing elements
|
||||||
*/
|
*/
|
||||||
@ -479,7 +521,7 @@ html2canvas.Parse = function (element, images, opts) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function renderText(el, textNode, stack){
|
function renderText(el, textNode, stack) {
|
||||||
var ctx = stack.ctx,
|
var ctx = stack.ctx,
|
||||||
family = getCSS(el, "fontFamily", false),
|
family = getCSS(el, "fontFamily", false),
|
||||||
size = getCSS(el, "fontSize", false),
|
size = getCSS(el, "fontSize", false),
|
||||||
@ -647,6 +689,123 @@ html2canvas.Parse = function (element, images, opts) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function listPosition (element, val) {
|
||||||
|
var boundElement = doc.createElement( "boundelement" ),
|
||||||
|
type,
|
||||||
|
bounds;
|
||||||
|
|
||||||
|
boundElement.style.display = "inline";
|
||||||
|
//boundElement.style.width = "1px";
|
||||||
|
//boundElement.style.height = "1px";
|
||||||
|
|
||||||
|
type = element.style.listStyleType;
|
||||||
|
element.style.listStyleType = "none";
|
||||||
|
|
||||||
|
boundElement.appendChild( doc.createTextNode( val ) );
|
||||||
|
|
||||||
|
|
||||||
|
element.insertBefore(boundElement, element.firstChild);
|
||||||
|
|
||||||
|
|
||||||
|
bounds = html2canvas.Util.Bounds( boundElement );
|
||||||
|
element.removeChild( boundElement );
|
||||||
|
element.style.listStyleType = type;
|
||||||
|
return bounds;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function renderListItem(element, stack, elBounds) {
|
||||||
|
|
||||||
|
|
||||||
|
var position = getCSS(element, "listStylePosition", false),
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
type = getCSS(element, "listStyleType", false),
|
||||||
|
currentIndex,
|
||||||
|
text,
|
||||||
|
listBounds,
|
||||||
|
bold = getCSS(element, "fontWeight");
|
||||||
|
|
||||||
|
if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {
|
||||||
|
|
||||||
|
// TODO remove jQuery dependency
|
||||||
|
currentIndex = $(element).index()+1;
|
||||||
|
|
||||||
|
switch(type){
|
||||||
|
case "decimal":
|
||||||
|
text = currentIndex;
|
||||||
|
break;
|
||||||
|
case "decimal-leading-zero":
|
||||||
|
if (currentIndex.toString().length === 1){
|
||||||
|
text = currentIndex = "0" + currentIndex.toString();
|
||||||
|
}else{
|
||||||
|
text = currentIndex.toString();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "upper-roman":
|
||||||
|
text = html2canvas.Generate.ListRoman( currentIndex );
|
||||||
|
break;
|
||||||
|
case "lower-roman":
|
||||||
|
text = html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();
|
||||||
|
break;
|
||||||
|
case "lower-alpha":
|
||||||
|
text = html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();
|
||||||
|
break;
|
||||||
|
case "upper-alpha":
|
||||||
|
text = html2canvas.Generate.ListAlpha( currentIndex );
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
text += ". ";
|
||||||
|
listBounds = listPosition(element, text);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
switch(bold){
|
||||||
|
case 401:
|
||||||
|
bold = "bold";
|
||||||
|
break;
|
||||||
|
case 400:
|
||||||
|
bold = "normal";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
ctx.setVariable( "fillStyle", getCSS(element, "color", false) );
|
||||||
|
ctx.setVariable( "font", getCSS(element, "fontVariant", false) + " " + bold + " " + getCSS(element, "fontStyle", false) + " " + getCSS(element, "fontFize", false) + " " + getCSS(element, "fontFamily", false) );
|
||||||
|
|
||||||
|
|
||||||
|
if ( position === "inside" ) {
|
||||||
|
ctx.setVariable("textAlign", "left");
|
||||||
|
// this.setFont(stack.ctx, element, false);
|
||||||
|
x = elBounds.left;
|
||||||
|
|
||||||
|
}else{
|
||||||
|
return;
|
||||||
|
/*
|
||||||
|
TODO really need to figure out some more accurate way to try and find the position.
|
||||||
|
as defined in http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position, it does not even have a specified "correct" position, so each browser
|
||||||
|
may display it whatever way it feels like.
|
||||||
|
"The position of the list-item marker adjacent to floats is undefined in CSS 2.1. CSS 2.1 does not specify the precise location of the marker box or its position in the painting order"
|
||||||
|
*/
|
||||||
|
ctx.setVariable("textAlign", "right");
|
||||||
|
// this.setFont(stack.ctx, element, true);
|
||||||
|
x = elBounds.left - 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
y = listBounds.bottom;
|
||||||
|
|
||||||
|
drawText(text, x, y, ctx)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
function loadImage (src){
|
function loadImage (src){
|
||||||
|
|
||||||
@ -1334,7 +1493,7 @@ html2canvas.Parse = function (element, images, opts) {
|
|||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "LI":
|
case "LI":
|
||||||
// this.drawListItem(el,stack,bgbounds);
|
renderListItem(el, stack, bgbounds);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
121
src/Parse.js
121
src/Parse.js
@ -220,7 +220,7 @@ html2canvas.Parse = function (element, images, opts) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function renderText(el, textNode, stack){
|
function renderText(el, textNode, stack) {
|
||||||
var ctx = stack.ctx,
|
var ctx = stack.ctx,
|
||||||
family = getCSS(el, "fontFamily", false),
|
family = getCSS(el, "fontFamily", false),
|
||||||
size = getCSS(el, "fontSize", false),
|
size = getCSS(el, "fontSize", false),
|
||||||
@ -388,6 +388,123 @@ html2canvas.Parse = function (element, images, opts) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function listPosition (element, val) {
|
||||||
|
var boundElement = doc.createElement( "boundelement" ),
|
||||||
|
type,
|
||||||
|
bounds;
|
||||||
|
|
||||||
|
boundElement.style.display = "inline";
|
||||||
|
//boundElement.style.width = "1px";
|
||||||
|
//boundElement.style.height = "1px";
|
||||||
|
|
||||||
|
type = element.style.listStyleType;
|
||||||
|
element.style.listStyleType = "none";
|
||||||
|
|
||||||
|
boundElement.appendChild( doc.createTextNode( val ) );
|
||||||
|
|
||||||
|
|
||||||
|
element.insertBefore(boundElement, element.firstChild);
|
||||||
|
|
||||||
|
|
||||||
|
bounds = html2canvas.Util.Bounds( boundElement );
|
||||||
|
element.removeChild( boundElement );
|
||||||
|
element.style.listStyleType = type;
|
||||||
|
return bounds;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function renderListItem(element, stack, elBounds) {
|
||||||
|
|
||||||
|
|
||||||
|
var position = getCSS(element, "listStylePosition", false),
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
type = getCSS(element, "listStyleType", false),
|
||||||
|
currentIndex,
|
||||||
|
text,
|
||||||
|
listBounds,
|
||||||
|
bold = getCSS(element, "fontWeight");
|
||||||
|
|
||||||
|
if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {
|
||||||
|
|
||||||
|
// TODO remove jQuery dependency
|
||||||
|
currentIndex = $(element).index()+1;
|
||||||
|
|
||||||
|
switch(type){
|
||||||
|
case "decimal":
|
||||||
|
text = currentIndex;
|
||||||
|
break;
|
||||||
|
case "decimal-leading-zero":
|
||||||
|
if (currentIndex.toString().length === 1){
|
||||||
|
text = currentIndex = "0" + currentIndex.toString();
|
||||||
|
}else{
|
||||||
|
text = currentIndex.toString();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "upper-roman":
|
||||||
|
text = html2canvas.Generate.ListRoman( currentIndex );
|
||||||
|
break;
|
||||||
|
case "lower-roman":
|
||||||
|
text = html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();
|
||||||
|
break;
|
||||||
|
case "lower-alpha":
|
||||||
|
text = html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();
|
||||||
|
break;
|
||||||
|
case "upper-alpha":
|
||||||
|
text = html2canvas.Generate.ListAlpha( currentIndex );
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
text += ". ";
|
||||||
|
listBounds = listPosition(element, text);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
switch(bold){
|
||||||
|
case 401:
|
||||||
|
bold = "bold";
|
||||||
|
break;
|
||||||
|
case 400:
|
||||||
|
bold = "normal";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
ctx.setVariable( "fillStyle", getCSS(element, "color", false) );
|
||||||
|
ctx.setVariable( "font", getCSS(element, "fontVariant", false) + " " + bold + " " + getCSS(element, "fontStyle", false) + " " + getCSS(element, "fontFize", false) + " " + getCSS(element, "fontFamily", false) );
|
||||||
|
|
||||||
|
|
||||||
|
if ( position === "inside" ) {
|
||||||
|
ctx.setVariable("textAlign", "left");
|
||||||
|
// this.setFont(stack.ctx, element, false);
|
||||||
|
x = elBounds.left;
|
||||||
|
|
||||||
|
}else{
|
||||||
|
return;
|
||||||
|
/*
|
||||||
|
TODO really need to figure out some more accurate way to try and find the position.
|
||||||
|
as defined in http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position, it does not even have a specified "correct" position, so each browser
|
||||||
|
may display it whatever way it feels like.
|
||||||
|
"The position of the list-item marker adjacent to floats is undefined in CSS 2.1. CSS 2.1 does not specify the precise location of the marker box or its position in the painting order"
|
||||||
|
*/
|
||||||
|
ctx.setVariable("textAlign", "right");
|
||||||
|
// this.setFont(stack.ctx, element, true);
|
||||||
|
x = elBounds.left - 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
y = listBounds.bottom;
|
||||||
|
|
||||||
|
drawText(text, x, y, ctx)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
function loadImage (src){
|
function loadImage (src){
|
||||||
|
|
||||||
@ -1075,7 +1192,7 @@ html2canvas.Parse = function (element, images, opts) {
|
|||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "LI":
|
case "LI":
|
||||||
// this.drawListItem(el,stack,bgbounds);
|
renderListItem(el, stack, bgbounds);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user