mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Merge branch 'color-stops' of https://github.com/SunboX/html2canvas.git
This commit is contained in:
Niklas von Hertzen
commit
0d35571bbf
321
src/Generate.js
321
src/Generate.js
@ -3,127 +3,240 @@
|
|||||||
Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
|
Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
|
||||||
http://www.twitter.com/niklasvh
|
http://www.twitter.com/niklasvh
|
||||||
|
|
||||||
|
Contributor(s):
|
||||||
|
Niklas von Hertzen <http://www.twitter.com/niklasvh>
|
||||||
|
André Fiedler <http://www.twitter.com/sonnenkiste>
|
||||||
|
|
||||||
Released under MIT License
|
Released under MIT License
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
(function(){
|
||||||
|
|
||||||
_html2canvas.Generate = {};
|
_html2canvas.Generate = {};
|
||||||
|
|
||||||
|
var reGradients = [
|
||||||
|
/^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
|
||||||
|
/^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
|
||||||
|
/^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)-]+)\)$/,
|
||||||
|
/^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/
|
||||||
|
];
|
||||||
|
|
||||||
|
/*
|
||||||
|
* TODO: Add IE10 vendor prefix (-ms) support
|
||||||
|
* TODO: Add W3C gradient (linear-gradient) support
|
||||||
|
* TODO: Add radial gradient parsing
|
||||||
|
* TODO: Maybe some RegExp optimizations are possible ;o)
|
||||||
|
*/
|
||||||
|
_html2canvas.Generate.parseGradient = function(css, bounds) {
|
||||||
|
var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
|
||||||
|
|
||||||
|
for(i = 0; i < len; i+=1){
|
||||||
|
m1 = css.match(reGradients[i]);
|
||||||
|
if(m1) break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(m1) {
|
||||||
|
switch(m1[1]) {
|
||||||
|
case '-webkit-linear-gradient':
|
||||||
|
case '-o-linear-gradient':
|
||||||
|
|
||||||
|
gradient = {
|
||||||
|
type: 'linear',
|
||||||
|
x0: null,
|
||||||
|
y0: null,
|
||||||
|
x1: null,
|
||||||
|
y1: null,
|
||||||
|
colorStops: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// get coordinates
|
||||||
|
m2 = m1[2].match(/\w+/g);
|
||||||
|
if(m2){
|
||||||
|
m2Len = m2.length;
|
||||||
|
for(i = 0; i < m2Len; i+=1){
|
||||||
|
switch(m2[i]) {
|
||||||
|
case 'top':
|
||||||
|
gradient.y0 = 0;
|
||||||
|
gradient.y1 = bounds.height;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'right':
|
||||||
|
gradient.x0 = bounds.width;
|
||||||
|
gradient.x1 = 0;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'bottom':
|
||||||
|
gradient.y0 = bounds.height;
|
||||||
|
gradient.y1 = 0;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'left':
|
||||||
|
gradient.x0 = 0;
|
||||||
|
gradient.x1 = bounds.width;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(gradient.x0 === null && gradient.x1 === null){ // center
|
||||||
|
gradient.x0 = gradient.x1 = bounds.width / 2;
|
||||||
|
}
|
||||||
|
if(gradient.y0 === null && gradient.y1 === null){ // center
|
||||||
|
gradient.y0 = gradient.y1 = bounds.height / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get colors and stops
|
||||||
|
m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
|
||||||
|
if(m2){
|
||||||
|
m2Len = m2.length;
|
||||||
|
step = 1 / Math.max(m2Len - 1, 1);
|
||||||
|
for(i = 0; i < m2Len; i+=1){
|
||||||
|
m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
|
||||||
|
if(m3[2]){
|
||||||
|
stop = parseFloat(m3[2]);
|
||||||
|
if(m3[3] === '%'){
|
||||||
|
stop /= 100;
|
||||||
|
} else { // px - stupid opera
|
||||||
|
stop /= bounds.width;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
stop = i * step;
|
||||||
|
}
|
||||||
|
gradient.colorStops.push({
|
||||||
|
color: m3[1],
|
||||||
|
stop: stop
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case '-webkit-gradient':
|
||||||
|
|
||||||
|
gradient = {
|
||||||
|
type: m1[2],
|
||||||
|
x0: 0,
|
||||||
|
y0: 0,
|
||||||
|
x1: 0,
|
||||||
|
y1: 0,
|
||||||
|
colorStops: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// get coordinates
|
||||||
|
m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/);
|
||||||
|
if(m2){
|
||||||
|
gradient.x0 = (m2[1] * bounds.width) / 100;
|
||||||
|
gradient.y0 = (m2[2] * bounds.height) / 100;
|
||||||
|
gradient.x1 = (m2[3] * bounds.width) / 100;
|
||||||
|
gradient.y1 = (m2[4] * bounds.height) / 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get colors and stops
|
||||||
|
m2 = m1[4].match(/((?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+/g);
|
||||||
|
if(m2){
|
||||||
|
m2Len = m2.length;
|
||||||
|
for(i = 0; i < m2Len; i+=1){
|
||||||
|
m3 = m2[i].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/);
|
||||||
|
stop = parseFloat(m3[2]);
|
||||||
|
if(m3[1] === 'from') stop = 0.0;
|
||||||
|
if(m3[1] === 'to') stop = 1.0;
|
||||||
|
gradient.colorStops.push({
|
||||||
|
color: m3[3],
|
||||||
|
stop: stop
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case '-moz-linear-gradient':
|
||||||
|
|
||||||
|
gradient = {
|
||||||
|
type: 'linear',
|
||||||
|
x0: 0,
|
||||||
|
y0: 0,
|
||||||
|
x1: 0,
|
||||||
|
y1: 0,
|
||||||
|
colorStops: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// get coordinates
|
||||||
|
m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
|
||||||
|
|
||||||
|
// m2[1] == 0% -> left
|
||||||
|
// m2[1] == 50% -> center
|
||||||
|
// m2[1] == 100% -> right
|
||||||
|
|
||||||
|
// m2[2] == 0% -> top
|
||||||
|
// m2[2] == 50% -> center
|
||||||
|
// m2[2] == 100% -> bottom
|
||||||
|
|
||||||
|
if(m2){
|
||||||
|
gradient.x0 = (m2[1] * bounds.width) / 100;
|
||||||
|
gradient.y0 = (m2[2] * bounds.height) / 100;
|
||||||
|
gradient.x1 = bounds.width - gradient.x0;
|
||||||
|
gradient.y1 = bounds.height - gradient.y0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get colors and stops
|
||||||
|
m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g);
|
||||||
|
if(m2){
|
||||||
|
m2Len = m2.length;
|
||||||
|
step = 1 / Math.max(m2Len - 1, 1);
|
||||||
|
for(i = 0; i < m2Len; i+=1){
|
||||||
|
m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);
|
||||||
|
if(m3[2]){
|
||||||
|
stop = parseFloat(m3[2]);
|
||||||
|
if(m3[3]){ // percentage
|
||||||
|
stop /= 100;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
stop = i * step;
|
||||||
|
}
|
||||||
|
gradient.colorStops.push({
|
||||||
|
color: m3[1],
|
||||||
|
stop: stop
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return gradient;
|
||||||
|
};
|
||||||
|
|
||||||
_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'),
|
||||||
tmp,
|
gradient, lingrad, i, len, img;
|
||||||
p0 = 0,
|
|
||||||
p1 = 0,
|
|
||||||
p2 = 0,
|
|
||||||
p3 = 0,
|
|
||||||
steps = [],
|
|
||||||
position,
|
|
||||||
i,
|
|
||||||
len,
|
|
||||||
lingrad,
|
|
||||||
increment,
|
|
||||||
p,
|
|
||||||
img;
|
|
||||||
|
|
||||||
canvas.width = bounds.width;
|
canvas.width = bounds.width;
|
||||||
canvas.height = bounds.height;
|
canvas.height = bounds.height;
|
||||||
|
|
||||||
|
gradient = _html2canvas.Generate.parseGradient(src, bounds);
|
||||||
function getColors(input) {
|
|
||||||
var j = -1,
|
|
||||||
color = '',
|
|
||||||
chr;
|
|
||||||
while( j++ < input.length ) {
|
|
||||||
chr = input.charAt( j );
|
|
||||||
if (chr === ')') {
|
|
||||||
color += chr;
|
|
||||||
steps.push( color );
|
|
||||||
color = '';
|
|
||||||
j = input.indexOf(",", j) + 1;
|
|
||||||
if (j === 0) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
// while (j++ < input.length && input.charAt( j ) !== ',') {}
|
|
||||||
} else {
|
|
||||||
color += chr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( (tmp = src.match(/-webkit-linear-gradient\((.*)\)/)) !== null ) {
|
|
||||||
|
|
||||||
position = tmp[1].split( ",", 1 )[0];
|
|
||||||
getColors( tmp[1].substr( position.length + 2 ) );
|
|
||||||
position = position.split(' ');
|
|
||||||
|
|
||||||
for ( p = 0, len = position.length; p < len; p+=1 ) {
|
|
||||||
|
|
||||||
switch( position[ p ] ) {
|
|
||||||
case 'top':
|
|
||||||
p3 = bounds.height;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'right':
|
|
||||||
p0 = bounds.width;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'bottom':
|
|
||||||
p1 = bounds.height;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'left':
|
|
||||||
p2 = bounds.width;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
} else if ( (tmp = src.match(/-webkit-gradient\(linear, (\d+)[%]{0,1} (\d+)[%]{0,1}, (\d+)[%]{0,1} (\d+)[%]{0,1}, from\((.*)\), to\((.*)\)\)/)) !== null ) {
|
|
||||||
|
|
||||||
p0 = (tmp[1] * bounds.width) / 100;
|
|
||||||
p1 = (tmp[2] * bounds.height) / 100;
|
|
||||||
p2 = (tmp[3] * bounds.width) / 100;
|
|
||||||
p3 = (tmp[4] * bounds.height) / 100;
|
|
||||||
|
|
||||||
steps.push(tmp[5]);
|
|
||||||
steps.push(tmp[6]);
|
|
||||||
|
|
||||||
} else if ( (tmp = src.match(/-moz-linear-gradient\((\d+)[%]{0,1} (\d+)[%]{0,1}, (.*)\)/)) !== null ) {
|
|
||||||
|
|
||||||
p0 = (tmp[1] * bounds.width) / 100;
|
|
||||||
p1 = (tmp[2] * bounds.width) / 100;
|
|
||||||
p2 = bounds.width - p0;
|
|
||||||
p3 = bounds.height - p1;
|
|
||||||
getColors( tmp[3] );
|
|
||||||
|
|
||||||
} else {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
lingrad = ctx.createLinearGradient( p0, p1, p2, p3 );
|
|
||||||
increment = 1 / (steps.length - 1);
|
|
||||||
|
|
||||||
for (i = 0, len = steps.length; i < len; i+=1) {
|
|
||||||
try {
|
|
||||||
lingrad.addColorStop(increment * i, steps[i]);
|
|
||||||
}
|
|
||||||
catch(e) {
|
|
||||||
h2clog(['failed to add color stop: ', e, '; tried to add: ', steps[i], '; stop: ', i, '; in: ', src]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.fillStyle = lingrad;
|
|
||||||
|
|
||||||
// draw shapes
|
|
||||||
ctx.fillRect(0, 0, bounds.width,bounds.height);
|
|
||||||
|
|
||||||
img = new Image();
|
img = new Image();
|
||||||
img.src = canvas.toDataURL();
|
|
||||||
|
if(gradient && gradient.type === 'linear'){
|
||||||
|
lingrad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
|
||||||
|
|
||||||
|
for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
|
||||||
|
try {
|
||||||
|
lingrad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.fillStyle = lingrad;
|
||||||
|
ctx.fillRect(0, 0, bounds.width, bounds.height);
|
||||||
|
|
||||||
|
img.src = canvas.toDataURL();
|
||||||
|
} else if(gradient && gradient.type === 'radial'){
|
||||||
|
// TODO: implement radial gradient generation
|
||||||
|
h2clog('No radial gradient support implemented');
|
||||||
|
}
|
||||||
|
|
||||||
return img;
|
return img;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
_html2canvas.Generate.ListAlpha = function(number) {
|
_html2canvas.Generate.ListAlpha = function(number) {
|
||||||
@ -160,3 +273,5 @@ _html2canvas.Generate.ListRoman = function(number) {
|
|||||||
return roman;
|
return roman;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
})();
|
||||||
@ -54,6 +54,55 @@
|
|||||||
.linearGradient2 {
|
.linearGradient2 {
|
||||||
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
|
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.linearGradient3 {
|
||||||
|
/* FF 3.6+ */
|
||||||
|
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
/* Chrome,Safari4+ */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
|
||||||
|
/* Chrome 10+, Safari 5.1+ */
|
||||||
|
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
/* IE 10+ */
|
||||||
|
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
/* W3C */
|
||||||
|
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
}
|
||||||
|
|
||||||
|
.linearGradient4 {
|
||||||
|
/* IE9 SVG */
|
||||||
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGJlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzYxOTljNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNhODRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQxOWFkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzRiYjhmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjU1OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||||
|
/* FF 3.6+ */
|
||||||
|
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
/* Chrome, Safari 4+ */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
|
||||||
|
/* Chrome 10+, Safari 5.1+ */
|
||||||
|
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
/* IE10+ */
|
||||||
|
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
/* W3C */
|
||||||
|
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.linearGradient5 {
|
||||||
|
/* IE9 SVG */
|
||||||
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjZlNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||||
|
/* FF 3.6+ */
|
||||||
|
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* Chrome, Safari 4+ */
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
|
||||||
|
/* Chrome 10+, Safari 5.1+ */
|
||||||
|
background: -webkit-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* IE 10+ */
|
||||||
|
background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* W3C */
|
||||||
|
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
@ -61,6 +110,9 @@
|
|||||||
<div class="medium">
|
<div class="medium">
|
||||||
<div class="linearGradient"> </div>
|
<div class="linearGradient"> </div>
|
||||||
<div class="linearGradient2"> </div>
|
<div class="linearGradient2"> </div>
|
||||||
|
<div class="linearGradient3"> </div>
|
||||||
|
<div class="linearGradient4"> </div>
|
||||||
|
<div class="linearGradient5"> </div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -22,7 +22,8 @@
|
|||||||
<script type="text/javascript" src="../../src/renderers/Canvas.js"></script>
|
<script type="text/javascript" src="../../src/renderers/Canvas.js"></script>
|
||||||
|
|
||||||
<script src="unit/css.js"></script>
|
<script src="unit/css.js"></script>
|
||||||
<!-- <script src="unit/utils.js"></script> -->
|
<script src="unit/generate.js"></script>
|
||||||
|
<!-- <script src="unit/utils.js"></script> -->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#borders div {
|
#borders div {
|
||||||
@ -94,7 +95,7 @@
|
|||||||
/* FF 3.6+ */
|
/* FF 3.6+ */
|
||||||
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
/* Chrome,Safari4+ */
|
/* Chrome,Safari4+ */
|
||||||
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
|
background: -webkit-gradient(linear, left center, right center, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
|
||||||
/* Chrome 10+, Safari 5.1+ */
|
/* Chrome 10+, Safari 5.1+ */
|
||||||
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
/* Opera 11.10+ */
|
/* Opera 11.10+ */
|
||||||
@ -110,7 +111,7 @@
|
|||||||
/* FF 3.6+ */
|
/* FF 3.6+ */
|
||||||
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
/* Chrome, Safari 4+ */
|
/* Chrome, Safari 4+ */
|
||||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
|
background: -webkit-gradient(linear, left center, right center, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
|
||||||
/* Chrome 10+, Safari 5.1+ */
|
/* Chrome 10+, Safari 5.1+ */
|
||||||
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
/* Opera 11.10+ */
|
/* Opera 11.10+ */
|
||||||
@ -120,10 +121,25 @@
|
|||||||
/* W3C */
|
/* W3C */
|
||||||
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
}
|
}
|
||||||
|
.linearGradient3 {
|
||||||
|
/* IE9 SVG */
|
||||||
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjZlNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||||
|
/* FF 3.6+ */
|
||||||
|
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* Chrome, Safari 4+ */
|
||||||
|
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* IE 10+ */
|
||||||
|
background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* W3C */
|
||||||
|
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div id="backgroundGradients">
|
<div id="backgroundGradients">
|
||||||
<div class="linearGradientSimple"></div>
|
<div class="linearGradientSimple"></div>
|
||||||
<div class="linearGradientWithStops"></div>
|
<div class="linearGradientWithStops"></div>
|
||||||
|
<div class="linearGradient3"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
|
|||||||
@ -145,53 +145,6 @@ $(function() {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO add backgroundPosition % tests
|
// TODO add backgroundPosition % tests
|
||||||
|
|
||||||
propsToTest['background-gradient'] = ["backgroundImage"];
|
|
||||||
numDivs['background-gradient'] = $('#backgroundGradients div').length;
|
|
||||||
|
|
||||||
test('background-gradient', propsToTest['background-gradient'].length * numDivs['background-gradient'], function() {
|
|
||||||
|
|
||||||
$('#backgroundGradients div').each(function(i, el) {
|
|
||||||
$.each(propsToTest['background-gradient'], function(s, prop) {
|
|
||||||
|
|
||||||
var src, img, canvas, ctx, id, data, len, red, green, blue, overallColor = 0;
|
|
||||||
|
|
||||||
src = _html2canvas.Util.getCSS(el, prop);
|
|
||||||
|
|
||||||
if (!/^(-webkit|-o|-moz|-ms|linear)-/.test( src )) {
|
|
||||||
ok(true);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
img = _html2canvas.Generate.Gradient(src, {
|
|
||||||
width: 50,
|
|
||||||
height: 50
|
|
||||||
});
|
|
||||||
|
|
||||||
canvas = document.createElement('canvas');
|
|
||||||
canvas.width = 50;
|
|
||||||
canvas.height = 50;
|
|
||||||
ctx = canvas.getContext('2d');
|
|
||||||
ctx.drawImage(img, 0, 0);
|
|
||||||
id = ctx.getImageData(0, 0, 50, 50);
|
|
||||||
data = id.data;
|
|
||||||
len = data.length;
|
|
||||||
|
|
||||||
//console.log(img);
|
|
||||||
|
|
||||||
for (var i = 0; i < len; i += 4) {
|
|
||||||
red = data[i]; // red
|
|
||||||
green = data[i + 1]; // green
|
|
||||||
blue = data[i + 2]; // blue
|
|
||||||
// i+3 is alpha (the fourth element)
|
|
||||||
|
|
||||||
overallColor += (red + green + blue) / 3;
|
|
||||||
}
|
|
||||||
overallColor /= (len / 4);
|
|
||||||
|
|
||||||
QUnit.notEqual(overallColor, 255, 'No Background Gradient - CSS was ' + src);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
179
tests/qunit/unit/generate.js
Normal file
179
tests/qunit/unit/generate.js
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
// declare vars (preventing JSHint messages)
|
||||||
|
/* this breaks the testing for IE<9
|
||||||
|
var test = test || function(){},
|
||||||
|
QUnit = QUnit || {},
|
||||||
|
_html2canvas = _html2canvas || {};
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
//module("Generate"); // <- overwrites predefined CSS-module ?
|
||||||
|
$(function() {
|
||||||
|
|
||||||
|
var propsToTest = {},
|
||||||
|
numDivs = {},
|
||||||
|
expected = {};
|
||||||
|
|
||||||
|
propsToTest['Generate.parseGradient'] = ["backgroundImage"];
|
||||||
|
numDivs['Generate.parseGradient'] = $('#backgroundGradients div').length;
|
||||||
|
expected['Generate.parseGradient'] = [
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
x0: 0,
|
||||||
|
y0: 35,
|
||||||
|
x1: 50,
|
||||||
|
y1: 35,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
color: "rgb(255, 0, 0)",
|
||||||
|
stop: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(255, 255, 0)",
|
||||||
|
stop: 0.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(0, 255, 0)",
|
||||||
|
stop: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
x0: 0,
|
||||||
|
y0: 35,
|
||||||
|
x1: 50,
|
||||||
|
y1: 35,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
color: "rgb(206, 219, 233)",
|
||||||
|
stop: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(170, 197, 222)",
|
||||||
|
stop: 0.17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(97, 153, 199)",
|
||||||
|
stop: 0.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(58, 132, 195)",
|
||||||
|
stop: 0.51
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(65, 154, 214)",
|
||||||
|
stop: 0.59
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(75, 184, 240)",
|
||||||
|
stop: 0.71
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(58, 139, 194)",
|
||||||
|
stop: 0.84
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(38, 85, 139)",
|
||||||
|
stop: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "linear",
|
||||||
|
x0: 25,
|
||||||
|
y0: 0,
|
||||||
|
x1: 25,
|
||||||
|
y1: 70,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
color: "rgb(240, 183, 161)",
|
||||||
|
stop: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(140, 51, 16)",
|
||||||
|
stop: 0.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(117, 34, 1)",
|
||||||
|
stop: 0.51
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgb(191, 110, 78)",
|
||||||
|
stop: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
test('Generate.parseGradient', propsToTest['Generate.parseGradient'].length * numDivs['Generate.parseGradient'], function() {
|
||||||
|
|
||||||
|
$('#backgroundGradients div').each(function(i, el) {
|
||||||
|
$.each(propsToTest['Generate.parseGradient'], function(s, prop) {
|
||||||
|
var src, gradient;
|
||||||
|
|
||||||
|
src = _html2canvas.Util.getCSS(el, prop);
|
||||||
|
|
||||||
|
if (/^(-webkit|-o|-moz|-ms|linear)-/.test(src)) {
|
||||||
|
|
||||||
|
gradient = _html2canvas.Generate.parseGradient(src, {
|
||||||
|
width: 50,
|
||||||
|
height: 70
|
||||||
|
});
|
||||||
|
|
||||||
|
//QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient; got: ' + JSON.stringify(gradient));
|
||||||
|
QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient with CSS: ' + src);
|
||||||
|
} else {
|
||||||
|
QUnit.ok(true, 'No CSS Background Gradient support');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
propsToTest['Generate.Gradient'] = ["backgroundImage"];
|
||||||
|
numDivs['Generate.Gradient'] = $('#backgroundGradients div').length;
|
||||||
|
|
||||||
|
test('Generate.Gradient', propsToTest['Generate.Gradient'].length * numDivs['Generate.Gradient'], function() {
|
||||||
|
|
||||||
|
$('#backgroundGradients div').each(function(i, el) {
|
||||||
|
$.each(propsToTest['Generate.Gradient'], function(s, prop) {
|
||||||
|
var src, img, canvas, ctx, id, data, len, red, green, blue, overallColor = 0;
|
||||||
|
|
||||||
|
src = _html2canvas.Util.getCSS(el, prop);
|
||||||
|
|
||||||
|
if (/^(-webkit|-o|-moz|-ms|linear)-/.test(src)) {
|
||||||
|
|
||||||
|
img = _html2canvas.Generate.Gradient(src, {
|
||||||
|
width: 50,
|
||||||
|
height: 50
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas = document.createElement('canvas');
|
||||||
|
canvas.width = 50;
|
||||||
|
canvas.height = 50;
|
||||||
|
ctx = canvas.getContext('2d');
|
||||||
|
ctx.drawImage(img, 0, 0);
|
||||||
|
id = ctx.getImageData(0, 0, 50, 50);
|
||||||
|
data = id.data;
|
||||||
|
len = data.length;
|
||||||
|
|
||||||
|
//console.log(img);
|
||||||
|
|
||||||
|
for (var i = 0; i < len; i += 4) {
|
||||||
|
red = data[i]; // red
|
||||||
|
green = data[i + 1]; // green
|
||||||
|
blue = data[i + 2]; // blue
|
||||||
|
// i+3 is alpha (the fourth element)
|
||||||
|
|
||||||
|
overallColor += (red + green + blue) / 3;
|
||||||
|
}
|
||||||
|
overallColor /= (len / 4);
|
||||||
|
|
||||||
|
QUnit.notEqual(overallColor, 255, 'Background Gradient drawn with CSS: ' + src);
|
||||||
|
} else {
|
||||||
|
QUnit.ok(true, 'No CSS Background Gradient support');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user