...
...
@@ -0,0 +1,3010 @@
1
+/*
2
+ html2canvas 0.4.1 <http://html2canvas.hertzen.com>
3
+ Copyright (c) 2013 Niklas von Hertzen
4
+
5
+ Released under MIT License
6
+*/
7
+
8
+(function(window, document, undefined){
9
+
10
+//"use strict";
11
+
12
+var _html2canvas = {},
13
+previousElement,
14
+computedCSS,
15
+html2canvas;
16
+
17
+_html2canvas.Util = {};
18
+
19
+_html2canvas.Util.log = function(a) {
20
+ if (_html2canvas.logging && window.console && window.console.log) {
21
+ window.console.log(a);
22
+ }
23
+};
24
+
25
+_html2canvas.Util.trimText = (function(isNative){
26
+ return function(input) {
27
+ return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' );
28
+ };
29
+})(String.prototype.trim);
30
+
31
+_html2canvas.Util.asFloat = function(v) {
32
+ return parseFloat(v);
33
+};
34
+
35
+(function() {
36
+ // TODO: support all possible length values
37
+ var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
38
+ var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
39
+ _html2canvas.Util.parseTextShadows = function (value) {
40
+ if (!value || value === 'none') {
41
+ return [];
42
+ }
43
+
44
+ // find multiple shadow declarations
45
+ var shadows = value.match(TEXT_SHADOW_PROPERTY),
46
+ results = [];
47
+ for (var i = 0; shadows && (i < shadows.length); i++) {
48
+ var s = shadows[i].match(TEXT_SHADOW_VALUES);
49
+ results.push({
50
+ color: s[0],
51
+ offsetX: s[1] ? s[1].replace('px', '') : 0,
52
+ offsetY: s[2] ? s[2].replace('px', '') : 0,
53
+ blur: s[3] ? s[3].replace('px', '') : 0
54
+ });
55
+ }
56
+ return results;
57
+ };
58
+})();
59
+
60
+_html2canvas.Util.parseBackgroundImage = function (value) {
61
+ var whitespace = ' \r\n\t',
62
+ method, definition, prefix, prefix_i, block, results = [],
63
+ c, mode = 0, numParen = 0, quote, args;
64
+
65
+ var appendResult = function(){
66
+ if(method) {
67
+ if(definition.substr( 0, 1 ) === '"') {
68
+ definition = definition.substr( 1, definition.length - 2 );
69
+ }
70
+ if(definition) {
71
+ args.push(definition);
72
+ }
73
+ if(method.substr( 0, 1 ) === '-' &&
74
+ (prefix_i = method.indexOf( '-', 1 ) + 1) > 0) {
75
+ prefix = method.substr( 0, prefix_i);
76
+ method = method.substr( prefix_i );
77
+ }
78
+ results.push({
79
+ prefix: prefix,
80
+ method: method.toLowerCase(),
81
+ value: block,
82
+ args: args
83
+ });
84
+ }
85
+ args = []; //for some odd reason, setting .length = 0 didn't work in safari
86
+ method =
87
+ prefix =
88
+ definition =
89
+ block = '';
90
+ };
91
+
92
+ appendResult();
93
+ for(var i = 0, ii = value.length; i<ii; i++) {
94
+ c = value[i];
95
+ if(mode === 0 && whitespace.indexOf( c ) > -1){
96
+ continue;
97
+ }
98
+ switch(c) {
99
+ case '"':
100
+ if(!quote) {
101
+ quote = c;
102
+ }
103
+ else if(quote === c) {
104
+ quote = null;
105
+ }
106
+ break;
107
+
108
+ case '(':
109
+ if(quote) { break; }
110
+ else if(mode === 0) {
111
+ mode = 1;
112
+ block += c;
113
+ continue;
114
+ } else {
115
+ numParen++;
116
+ }
117
+ break;
118
+
119
+ case ')':
120
+ if(quote) { break; }
121
+ else if(mode === 1) {
122
+ if(numParen === 0) {
123
+ mode = 0;
124
+ block += c;
125
+ appendResult();
126
+ continue;
127
+ } else {
128
+ numParen--;
129
+ }
130
+ }
131
+ break;
132
+
133
+ case ',':
134
+ if(quote) { break; }
135
+ else if(mode === 0) {
136
+ appendResult();
137
+ continue;
138
+ }
139
+ else if (mode === 1) {
140
+ if(numParen === 0 && !method.match(/^url$/i)) {
141
+ args.push(definition);
142
+ definition = '';
143
+ block += c;
144
+ continue;
145
+ }
146
+ }
147
+ break;
148
+ }
149
+
150
+ block += c;
151
+ if(mode === 0) { method += c; }
152
+ else { definition += c; }
153
+ }
154
+ appendResult();
155
+
156
+ return results;
157
+};
158
+
159
+_html2canvas.Util.Bounds = function (element) {
160
+ var clientRect, bounds = {};
161
+
162
+ if (element.getBoundingClientRect){
163
+ clientRect = element.getBoundingClientRect();
164
+
165
+ // TODO add scroll position to bounds, so no scrolling of window necessary
166
+ bounds.top = clientRect.top;
167
+ bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
168
+ bounds.left = clientRect.left;
169
+
170
+ bounds.width = element.offsetWidth;
171
+ bounds.height = element.offsetHeight;
172
+ }
173
+
174
+ return bounds;
175
+};
176
+
177
+// TODO ideally, we'd want everything to go through this function instead of Util.Bounds,
178
+// but would require further work to calculate the correct positions for elements with offsetParents
179
+_html2canvas.Util.OffsetBounds = function (element) {
180
+ var parent = element.offsetParent ? _html2canvas.Util.OffsetBounds(element.offsetParent) : {top: 0, left: 0};
181
+
182
+ return {
183
+ top: element.offsetTop + parent.top,
184
+ bottom: element.offsetTop + element.offsetHeight + parent.top,
185
+ left: element.offsetLeft + parent.left,
186
+ width: element.offsetWidth,
187
+ height: element.offsetHeight
188
+ };
189
+};
190
+
191
+function toPX(element, attribute, value ) {
192
+ var rsLeft = element.runtimeStyle && element.runtimeStyle[attribute],
193
+ left,
194
+ style = element.style;
195
+
196
+ // Check if we are not dealing with pixels, (Opera has issues with this)
197
+ // Ported from jQuery css.js
198
+ // From the awesome hack by Dean Edwards
199
+ // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
200
+
201
+ // If we're not dealing with a regular pixel number
202
+ // but a number that has a weird ending, we need to convert it to pixels
203
+
204
+ if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( value ) && /^-?\d/.test(value) ) {
205
+ // Remember the original values
206
+ left = style.left;
207
+
208
+ // Put in the new values to get a computed value out
209
+ if (rsLeft) {
210
+ element.runtimeStyle.left = element.currentStyle.left;
211
+ }
212
+ style.left = attribute === "fontSize" ? "1em" : (value || 0);
213
+ value = style.pixelLeft + "px";
214
+
215
+ // Revert the changed values
216
+ style.left = left;
217
+ if (rsLeft) {
218
+ element.runtimeStyle.left = rsLeft;
219
+ }
220
+ }
221
+
222
+ if (!/^(thin|medium|thick)$/i.test(value)) {
223
+ return Math.round(parseFloat(value)) + "px";
224
+ }
225
+
226
+ return value;
227
+}
228
+
229
+function asInt(val) {
230
+ return parseInt(val, 10);
231
+}
232
+
233
+function isPercentage(value) {
234
+ return value.toString().indexOf("%") !== -1;
235
+}
236
+
237
+function parseBackgroundSizePosition(value, element, attribute, index) {
238
+ value = (value || '').split(',');
239
+ value = value[index || 0] || value[0] || 'auto';
240
+ value = _html2canvas.Util.trimText(value).split(' ');
241
+ if(attribute === 'backgroundSize' && (value[0] && value[0].match(/^(cover|contain|auto)$/))) {
242
+ return value;
243
+ } else {
244
+ value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
245
+ if(value[1] === undefined) {
246
+ if(attribute === 'backgroundSize') {
247
+ value[1] = 'auto';
248
+ return value;
249
+ } else {
250
+ // IE 9 doesn't return double digit always
251
+ value[1] = value[0];
252
+ }
253
+ }
254
+ value[1] = (value[1].indexOf("%") === -1) ? toPX(element, attribute + "Y", value[1]) : value[1];
255
+ }
256
+ return value;
257
+}
258
+
259
+_html2canvas.Util.getCSS = function (element, attribute, index) {
260
+ if (previousElement !== element) {
261
+ computedCSS = document.defaultView.getComputedStyle(element, null);
262
+ }
263
+
264
+ var value = computedCSS[attribute];
265
+
266
+ if (/^background(Size|Position)$/.test(attribute)) {
267
+ return parseBackgroundSizePosition(value, element, attribute, index);
268
+ } else if (/border(Top|Bottom)(Left|Right)Radius/.test(attribute)) {
269
+ var arr = value.split(" ");
270
+ if (arr.length <= 1) {
271
+ arr[1] = arr[0];
272
+ }
273
+ return arr.map(asInt);
274
+ }
275
+
276
+ return value;
277
+};
278
+
279
+_html2canvas.Util.resizeBounds = function( current_width, current_height, target_width, target_height, stretch_mode ){
280
+ var target_ratio = target_width / target_height,
281
+ current_ratio = current_width / current_height,
282
+ output_width, output_height;
283
+
284
+ if(!stretch_mode || stretch_mode === 'auto') {
285
+ output_width = target_width;
286
+ output_height = target_height;
287
+ } else if(target_ratio < current_ratio ^ stretch_mode === 'contain') {
288
+ output_height = target_height;
289
+ output_width = target_height * current_ratio;
290
+ } else {
291
+ output_width = target_width;
292
+ output_height = target_width / current_ratio;
293
+ }
294
+
295
+ return {
296
+ width: output_width,
297
+ height: output_height
298
+ };
299
+};
300
+
301
+_html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) {
302
+ var backgroundPosition = _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex),
303
+ leftPosition,
304
+ topPosition;
305
+ if (backgroundPosition.length === 1){
306
+ backgroundPosition = [backgroundPosition[0], backgroundPosition[0]];
307
+ }
308
+
309
+ if (isPercentage(backgroundPosition[0])){
310
+ leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100);
311
+ } else {
312
+ leftPosition = parseInt(backgroundPosition[0], 10);
313
+ }
314
+
315
+ if (backgroundPosition[1] === 'auto') {
316
+ topPosition = leftPosition / image.width * image.height;
317
+ } else if (isPercentage(backgroundPosition[1])){
318
+ topPosition = (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100;
319
+ } else {
320
+ topPosition = parseInt(backgroundPosition[1], 10);
321
+ }
322
+
323
+ if (backgroundPosition[0] === 'auto') {
324
+ leftPosition = topPosition / image.height * image.width;
325
+ }
326
+
327
+ return {left: leftPosition, top: topPosition};
328
+};
329
+
330
+_html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) {
331
+ var backgroundSize = _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex), width, height;
332
+
333
+ if (backgroundSize.length === 1) {
334
+ backgroundSize = [backgroundSize[0], backgroundSize[0]];
335
+ }
336
+
337
+ if (isPercentage(backgroundSize[0])) {
338
+ width = bounds.width * parseFloat(backgroundSize[0]) / 100;
339
+ } else if (/contain|cover/.test(backgroundSize[0])) {
340
+ return _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, backgroundSize[0]);
341
+ } else {
342
+ width = parseInt(backgroundSize[0], 10);
343
+ }
344
+
345
+ if (backgroundSize[0] === 'auto' && backgroundSize[1] === 'auto') {
346
+ height = image.height;
347
+ } else if (backgroundSize[1] === 'auto') {
348
+ height = width / image.width * image.height;
349
+ } else if (isPercentage(backgroundSize[1])) {
350
+ height = bounds.height * parseFloat(backgroundSize[1]) / 100;
351
+ } else {
352
+ height = parseInt(backgroundSize[1], 10);
353
+ }
354
+
355
+ if (backgroundSize[0] === 'auto') {
356
+ width = height / image.height * image.width;
357
+ }
358
+
359
+ return {width: width, height: height};
360
+};
361
+
362
+_html2canvas.Util.BackgroundRepeat = function(element, imageIndex) {
363
+ var backgroundRepeat = _html2canvas.Util.getCSS(element, "backgroundRepeat").split(",").map(_html2canvas.Util.trimText);
364
+ return backgroundRepeat[imageIndex] || backgroundRepeat[0];
365
+};
366
+
367
+_html2canvas.Util.Extend = function (options, defaults) {
368
+ for (var key in options) {
369
+ if (options.hasOwnProperty(key)) {
370
+ defaults[key] = options[key];
371
+ }
372
+ }
373
+ return defaults;
374
+};
375
+
376
+
377
+/*
378
+ * Derived from jQuery.contents()
379
+ * Copyright 2010, John Resig
380
+ * Dual licensed under the MIT or GPL Version 2 licenses.
381
+ * http://jquery.org/license
382
+ */
383
+_html2canvas.Util.Children = function( elem ) {
384
+ var children;
385
+ try {
386
+ children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ? elem.contentDocument || elem.contentWindow.document : (function(array) {
387
+ var ret = [];
388
+ if (array !== null) {
389
+ (function(first, second ) {
390
+ var i = first.length,
391
+ j = 0;
392
+
393
+ if (typeof second.length === "number") {
394
+ for (var l = second.length; j < l; j++) {
395
+ first[i++] = second[j];
396
+ }
397
+ } else {
398
+ while (second[j] !== undefined) {
399
+ first[i++] = second[j++];
400
+ }
401
+ }
402
+
403
+ first.length = i;
404
+
405
+ return first;
406
+ })(ret, array);
407
+ }
408
+ return ret;
409
+ })(elem.childNodes);
410
+
411
+ } catch (ex) {
412
+ _html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message);
413
+ children = [];
414
+ }
415
+ return children;
416
+};
417
+
418
+_html2canvas.Util.isTransparent = function(backgroundColor) {
419
+ return (!backgroundColor || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
420
+};
421
+
422
+_html2canvas.Util.Font = (function () {
423
+
424
+ var fontData = {};
425
+
426
+ return function(font, fontSize, doc) {
427
+ if (fontData[font + "-" + fontSize] !== undefined) {
428
+ return fontData[font + "-" + fontSize];
429
+ }
430
+
431
+ var container = doc.createElement('div'),
432
+ img = doc.createElement('img'),
433
+ span = doc.createElement('span'),
434
+ sampleText = 'Hidden Text',
435
+ baseline,
436
+ middle,
437
+ metricsObj;
438
+
439
+ container.style.visibility = "hidden";
440
+ container.style.fontFamily = font;
441
+ container.style.fontSize = fontSize;
442
+ container.style.margin = 0;
443
+ container.style.padding = 0;
444
+
445
+ doc.body.appendChild(container);
446
+
447
+ // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)
448
+ img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=";
449
+ img.width = 1;
450
+ img.height = 1;
451
+
452
+ img.style.margin = 0;
453
+ img.style.padding = 0;
454
+ img.style.verticalAlign = "baseline";
455
+
456
+ span.style.fontFamily = font;
457
+ span.style.fontSize = fontSize;
458
+ span.style.margin = 0;
459
+ span.style.padding = 0;
460
+
461
+ span.appendChild(doc.createTextNode(sampleText));
462
+ container.appendChild(span);
463
+ container.appendChild(img);
464
+ baseline = (img.offsetTop - span.offsetTop) + 1;
465
+
466
+ container.removeChild(span);
467
+ container.appendChild(doc.createTextNode(sampleText));
468
+
469
+ container.style.lineHeight = "normal";
470
+ img.style.verticalAlign = "super";
471
+
472
+ middle = (img.offsetTop-container.offsetTop) + 1;
473
+ metricsObj = {
474
+ baseline: baseline,
475
+ lineWidth: 1,
476
+ middle: middle
477
+ };
478
+
479
+ fontData[font + "-" + fontSize] = metricsObj;
480
+
481
+ doc.body.removeChild(container);
482
+
483
+ return metricsObj;
484
+ };
485
+})();
486
+
487
+(function(){
488
+ var Util = _html2canvas.Util,
489
+ Generate = {};
490
+
491
+ _html2canvas.Generate = Generate;
492
+
493
+ var reGradients = [
494
+ /^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
495
+ /^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
496
+ /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)\-]+)\)$/,
497
+ /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/,
498
+ /^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/,
499
+ /^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z\-]*)([\w\d\.\s,%\(\)]+)\)$/,
500
+ /^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/
501
+ ];
502
+
503
+ /*
504
+ * TODO: Add IE10 vendor prefix (-ms) support
505
+ * TODO: Add W3C gradient (linear-gradient) support
506
+ * TODO: Add old Webkit -webkit-gradient(radial, ...) support
507
+ * TODO: Maybe some RegExp optimizations are possible ;o)
508
+ */
509
+ Generate.parseGradient = function(css, bounds) {
510
+ var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl;
511
+
512
+ for(i = 0; i < len; i+=1){
513
+ m1 = css.match(reGradients[i]);
514
+ if(m1) {
515
+ break;
516
+ }
517
+ }
518
+
519
+ if(m1) {
520
+ switch(m1[1]) {
521
+ case '-webkit-linear-gradient':
522
+ case '-o-linear-gradient':
523
+
524
+ gradient = {
525
+ type: 'linear',
526
+ x0: null,
527
+ y0: null,
528
+ x1: null,
529
+ y1: null,
530
+ colorStops: []
531
+ };
532
+
533
+ // get coordinates
534
+ m2 = m1[2].match(/\w+/g);
535
+ if(m2){
536
+ m2Len = m2.length;
537
+ for(i = 0; i < m2Len; i+=1){
538
+ switch(m2[i]) {
539
+ case 'top':
540
+ gradient.y0 = 0;
541
+ gradient.y1 = bounds.height;
542
+ break;
543
+
544
+ case 'right':
545
+ gradient.x0 = bounds.width;
546
+ gradient.x1 = 0;
547
+ break;
548
+
549
+ case 'bottom':
550
+ gradient.y0 = bounds.height;
551
+ gradient.y1 = 0;
552
+ break;
553
+
554
+ case 'left':
555
+ gradient.x0 = 0;
556
+ gradient.x1 = bounds.width;
557
+ break;
558
+ }
559
+ }
560
+ }
561
+ if(gradient.x0 === null && gradient.x1 === null){ // center
562
+ gradient.x0 = gradient.x1 = bounds.width / 2;
563
+ }
564
+ if(gradient.y0 === null && gradient.y1 === null){ // center
565
+ gradient.y0 = gradient.y1 = bounds.height / 2;
566
+ }
567
+
568
+ // get colors and stops
569
+ 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);
570
+ if(m2){
571
+ m2Len = m2.length;
572
+ step = 1 / Math.max(m2Len - 1, 1);
573
+ for(i = 0; i < m2Len; i+=1){
574
+ 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)?/);
575
+ if(m3[2]){
576
+ stop = parseFloat(m3[2]);
577
+ if(m3[3] === '%'){
578
+ stop /= 100;
579
+ } else { // px - stupid opera
580
+ stop /= bounds.width;
581
+ }
582
+ } else {
583
+ stop = i * step;
584
+ }
585
+ gradient.colorStops.push({
586
+ color: m3[1],
587
+ stop: stop
588
+ });
589
+ }
590
+ }
591
+ break;
592
+
593
+ case '-webkit-gradient':
594
+
595
+ gradient = {
596
+ type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions
597
+ x0: 0,
598
+ y0: 0,
599
+ x1: 0,
600
+ y1: 0,
601
+ colorStops: []
602
+ };
603
+
604
+ // get coordinates
605
+ m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/);
606
+ if(m2){
607
+ gradient.x0 = (m2[1] * bounds.width) / 100;
608
+ gradient.y0 = (m2[2] * bounds.height) / 100;
609
+ gradient.x1 = (m2[3] * bounds.width) / 100;
610
+ gradient.y1 = (m2[4] * bounds.height) / 100;
611
+ }
612
+
613
+ // get colors and stops
614
+ 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);
615
+ if(m2){
616
+ m2Len = m2.length;
617
+ for(i = 0; i < m2Len; i+=1){
618
+ 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\.]+)?\))\)/);
619
+ stop = parseFloat(m3[2]);
620
+ if(m3[1] === 'from') {
621
+ stop = 0.0;
622
+ }
623
+ if(m3[1] === 'to') {
624
+ stop = 1.0;
625
+ }
626
+ gradient.colorStops.push({
627
+ color: m3[3],
628
+ stop: stop
629
+ });
630
+ }
631
+ }
632
+ break;
633
+
634
+ case '-moz-linear-gradient':
635
+
636
+ gradient = {
637
+ type: 'linear',
638
+ x0: 0,
639
+ y0: 0,
640
+ x1: 0,
641
+ y1: 0,
642
+ colorStops: []
643
+ };
644
+
645
+ // get coordinates
646
+ m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
647
+
648
+ // m2[1] == 0% -> left
649
+ // m2[1] == 50% -> center
650
+ // m2[1] == 100% -> right
651
+
652
+ // m2[2] == 0% -> top
653
+ // m2[2] == 50% -> center
654
+ // m2[2] == 100% -> bottom
655
+
656
+ if(m2){
657
+ gradient.x0 = (m2[1] * bounds.width) / 100;
658
+ gradient.y0 = (m2[2] * bounds.height) / 100;
659
+ gradient.x1 = bounds.width - gradient.x0;
660
+ gradient.y1 = bounds.height - gradient.y0;
661
+ }
662
+
663
+ // get colors and stops
664
+ 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);
665
+ if(m2){
666
+ m2Len = m2.length;
667
+ step = 1 / Math.max(m2Len - 1, 1);
668
+ for(i = 0; i < m2Len; i+=1){
669
+ m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);
670
+ if(m3[2]){
671
+ stop = parseFloat(m3[2]);
672
+ if(m3[3]){ // percentage
673
+ stop /= 100;
674
+ }
675
+ } else {
676
+ stop = i * step;
677
+ }
678
+ gradient.colorStops.push({
679
+ color: m3[1],
680
+ stop: stop
681
+ });
682
+ }
683
+ }
684
+ break;
685
+
686
+ case '-webkit-radial-gradient':
687
+ case '-moz-radial-gradient':
688
+ case '-o-radial-gradient':
689
+
690
+ gradient = {
691
+ type: 'circle',
692
+ x0: 0,
693
+ y0: 0,
694
+ x1: bounds.width,
695
+ y1: bounds.height,
696
+ cx: 0,
697
+ cy: 0,
698
+ rx: 0,
699
+ ry: 0,
700
+ colorStops: []
701
+ };
702
+
703
+ // center
704
+ m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
705
+ if(m2){
706
+ gradient.cx = (m2[1] * bounds.width) / 100;
707
+ gradient.cy = (m2[2] * bounds.height) / 100;
708
+ }
709
+
710
+ // size
711
+ m2 = m1[3].match(/\w+/);
712
+ m3 = m1[4].match(/[a-z\-]*/);
713
+ if(m2 && m3){
714
+ switch(m3[0]){
715
+ case 'farthest-corner':
716
+ case 'cover': // is equivalent to farthest-corner
717
+ case '': // mozilla removes "cover" from definition :(
718
+ tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
719
+ tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
720
+ br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
721
+ bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
722
+ gradient.rx = gradient.ry = Math.max(tl, tr, br, bl);
723
+ break;
724
+ case 'closest-corner':
725
+ tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
726
+ tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
727
+ br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
728
+ bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
729
+ gradient.rx = gradient.ry = Math.min(tl, tr, br, bl);
730
+ break;
731
+ case 'farthest-side':
732
+ if(m2[0] === 'circle'){
733
+ gradient.rx = gradient.ry = Math.max(
734
+ gradient.cx,
735
+ gradient.cy,
736
+ gradient.x1 - gradient.cx,
737
+ gradient.y1 - gradient.cy
738
+ );
739
+ } else { // ellipse
740
+
741
+ gradient.type = m2[0];
742
+
743
+ gradient.rx = Math.max(
744
+ gradient.cx,
745
+ gradient.x1 - gradient.cx
746
+ );
747
+ gradient.ry = Math.max(
748
+ gradient.cy,
749
+ gradient.y1 - gradient.cy
750
+ );
751
+ }
752
+ break;
753
+ case 'closest-side':
754
+ case 'contain': // is equivalent to closest-side
755
+ if(m2[0] === 'circle'){
756
+ gradient.rx = gradient.ry = Math.min(
757
+ gradient.cx,
758
+ gradient.cy,
759
+ gradient.x1 - gradient.cx,
760
+ gradient.y1 - gradient.cy
761
+ );
762
+ } else { // ellipse
763
+
764
+ gradient.type = m2[0];
765
+
766
+ gradient.rx = Math.min(
767
+ gradient.cx,
768
+ gradient.x1 - gradient.cx
769
+ );
770
+ gradient.ry = Math.min(
771
+ gradient.cy,
772
+ gradient.y1 - gradient.cy
773
+ );
774
+ }
775
+ break;
776
+
777
+ // TODO: add support for "30px 40px" sizes (webkit only)
778
+ }
779
+ }
780
+
781
+ // color stops
782
+ m2 = m1[5].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
783
+ if(m2){
784
+ m2Len = m2.length;
785
+ step = 1 / Math.max(m2Len - 1, 1);
786
+ for(i = 0; i < m2Len; i+=1){
787
+ 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)?/);
788
+ if(m3[2]){
789
+ stop = parseFloat(m3[2]);
790
+ if(m3[3] === '%'){
791
+ stop /= 100;
792
+ } else { // px - stupid opera
793
+ stop /= bounds.width;
794
+ }
795
+ } else {
796
+ stop = i * step;
797
+ }
798
+ gradient.colorStops.push({
799
+ color: m3[1],
800
+ stop: stop
801
+ });
802
+ }
803
+ }
804
+ break;
805
+ }
806
+ }
807
+
808
+ return gradient;
809
+ };
810
+
811
+ function addScrollStops(grad) {
812
+ return function(colorStop) {
813
+ try {
814
+ grad.addColorStop(colorStop.stop, colorStop.color);
815
+ }
816
+ catch(e) {
817
+ Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]);
818
+ }
819
+ };
820
+ }
821
+
822
+ Generate.Gradient = function(src, bounds) {
823
+ if(bounds.width === 0 || bounds.height === 0) {
824
+ return;
825
+ }
826
+
827
+ var canvas = document.createElement('canvas'),
828
+ ctx = canvas.getContext('2d'),
829
+ gradient, grad;
830
+
831
+ canvas.width = bounds.width;
832
+ canvas.height = bounds.height;
833
+
834
+ // TODO: add support for multi defined background gradients
835
+ gradient = _html2canvas.Generate.parseGradient(src, bounds);
836
+
837
+ if(gradient) {
838
+ switch(gradient.type) {
839
+ case 'linear':
840
+ grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
841
+ gradient.colorStops.forEach(addScrollStops(grad));
842
+ ctx.fillStyle = grad;
843
+ ctx.fillRect(0, 0, bounds.width, bounds.height);
844
+ break;
845
+
846
+ case 'circle':
847
+ grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
848
+ gradient.colorStops.forEach(addScrollStops(grad));
849
+ ctx.fillStyle = grad;
850
+ ctx.fillRect(0, 0, bounds.width, bounds.height);
851
+ break;
852
+
853
+ case 'ellipse':
854
+ var canvasRadial = document.createElement('canvas'),
855
+ ctxRadial = canvasRadial.getContext('2d'),
856
+ ri = Math.max(gradient.rx, gradient.ry),
857
+ di = ri * 2;
858
+
859
+ canvasRadial.width = canvasRadial.height = di;
860
+
861
+ grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);
862
+ gradient.colorStops.forEach(addScrollStops(grad));
863
+
864
+ ctxRadial.fillStyle = grad;
865
+ ctxRadial.fillRect(0, 0, di, di);
866
+
867
+ ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 1].color;
868
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
869
+ ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
870
+ break;
871
+ }
872
+ }
873
+
874
+ return canvas;
875
+ };
876
+
877
+ Generate.ListAlpha = function(number) {
878
+ var tmp = "",
879
+ modulus;
880
+
881
+ do {
882
+ modulus = number % 26;
883
+ tmp = String.fromCharCode((modulus) + 64) + tmp;
884
+ number = number / 26;
885
+ }while((number*26) > 26);
886
+
887
+ return tmp;
888
+ };
889
+
890
+ Generate.ListRoman = function(number) {
891
+ var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
892
+ decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
893
+ roman = "",
894
+ v,
895
+ len = romanArray.length;
896
+
897
+ if (number <= 0 || number >= 4000) {
898
+ return number;
899
+ }
900
+
901
+ for (v=0; v < len; v+=1) {
902
+ while (number >= decimal[v]) {
903
+ number -= decimal[v];
904
+ roman += romanArray[v];
905
+ }
906
+ }
907
+
908
+ return roman;
909
+ };
910
+})();
911
+function h2cRenderContext(width, height) {
912
+ var storage = [];
913
+ return {
914
+ storage: storage,
915
+ width: width,
916
+ height: height,
917
+ clip: function() {
918
+ storage.push({
919
+ type: "function",
920
+ name: "clip",
921
+ 'arguments': arguments
922
+ });
923
+ },
924
+ translate: function() {
925
+ storage.push({
926
+ type: "function",
927
+ name: "translate",
928
+ 'arguments': arguments
929
+ });
930
+ },
931
+ fill: function() {
932
+ storage.push({
933
+ type: "function",
934
+ name: "fill",
935
+ 'arguments': arguments
936
+ });
937
+ },
938
+ save: function() {
939
+ storage.push({
940
+ type: "function",
941
+ name: "save",
942
+ 'arguments': arguments
943
+ });
944
+ },
945
+ restore: function() {
946
+ storage.push({
947
+ type: "function",
948
+ name: "restore",
949
+ 'arguments': arguments
950
+ });
951
+ },
952
+ fillRect: function () {
953
+ storage.push({
954
+ type: "function",
955
+ name: "fillRect",
956
+ 'arguments': arguments
957
+ });
958
+ },
959
+ createPattern: function() {
960
+ storage.push({
961
+ type: "function",
962
+ name: "createPattern",
963
+ 'arguments': arguments
964
+ });
965
+ },
966
+ drawShape: function() {
967
+
968
+ var shape = [];
969
+
970
+ storage.push({
971
+ type: "function",
972
+ name: "drawShape",
973
+ 'arguments': shape
974
+ });
975
+
976
+ return {
977
+ moveTo: function() {
978
+ shape.push({
979
+ name: "moveTo",
980
+ 'arguments': arguments
981
+ });
982
+ },
983
+ lineTo: function() {
984
+ shape.push({
985
+ name: "lineTo",
986
+ 'arguments': arguments
987
+ });
988
+ },
989
+ arcTo: function() {
990
+ shape.push({
991
+ name: "arcTo",
992
+ 'arguments': arguments
993
+ });
994
+ },
995
+ bezierCurveTo: function() {
996
+ shape.push({
997
+ name: "bezierCurveTo",
998
+ 'arguments': arguments
999
+ });
1000
+ },
1001
+ quadraticCurveTo: function() {
1002
+ shape.push({
1003
+ name: "quadraticCurveTo",
1004
+ 'arguments': arguments
1005
+ });
1006
+ }
1007
+ };
1008
+
1009
+ },
1010
+ drawImage: function () {
1011
+ storage.push({
1012
+ type: "function",
1013
+ name: "drawImage",
1014
+ 'arguments': arguments
1015
+ });
1016
+ },
1017
+ fillText: function () {
1018
+ storage.push({
1019
+ type: "function",
1020
+ name: "fillText",
1021
+ 'arguments': arguments
1022
+ });
1023
+ },
1024
+ setVariable: function (variable, value) {
1025
+ storage.push({
1026
+ type: "variable",
1027
+ name: variable,
1028
+ 'arguments': value
1029
+ });
1030
+ return value;
1031
+ }
1032
+ };
1033
+}
1034
+_html2canvas.Parse = function (images, options, cb) {
1035
+ window.scroll(0,0);
1036
+
1037
+ var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
1038
+ numDraws = 0,
1039
+ doc = element.ownerDocument,
1040
+ Util = _html2canvas.Util,
1041
+ support = Util.Support(options, doc),
1042
+ ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
1043
+ body = doc.body,
1044
+ getCSS = Util.getCSS,
1045
+ pseudoHide = "___html2canvas___pseudoelement",
1046
+ hidePseudoElementsStyles = doc.createElement('style');
1047
+
1048
+ hidePseudoElementsStyles.innerHTML = '.' + pseudoHide +
1049
+ '-parent:before { content: "" !important; display: none !important; }' +
1050
+ '.' + pseudoHide + '-parent:after { content: "" !important; display: none !important; }';
1051
+
1052
+ body.appendChild(hidePseudoElementsStyles);
1053
+
1054
+ images = images || {};
1055
+
1056
+ init();
1057
+
1058
+ function init() {
1059
+ var background = getCSS(document.documentElement, "backgroundColor"),
1060
+ transparentBackground = (Util.isTransparent(background) && element === document.body),
1061
+ stack = renderElement(element, null, false, transparentBackground);
1062
+
1063
+ // create pseudo elements in a single pass to prevent synchronous layouts
1064
+ addPseudoElements(element);
1065
+
1066
+ parseChildren(element, stack, function() {
1067
+ if (transparentBackground) {
1068
+ background = stack.backgroundColor;
1069
+ }
1070
+
1071
+ removePseudoElements();
1072
+
1073
+ Util.log('Done parsing, moving to Render.');
1074
+
1075
+ cb({
1076
+ backgroundColor: background,
1077
+ stack: stack
1078
+ });
1079
+ });
1080
+ }
1081
+
1082
+ // Given a root element, find all pseudo elements below, create elements mocking pseudo element styles
1083
+ // so we can process them as normal elements, and hide the original pseudo elements so they don't interfere
1084
+ // with layout.
1085
+ function addPseudoElements(el) {
1086
+ // These are done in discrete steps to prevent a relayout loop caused by addClass() invalidating
1087
+ // layouts & getPseudoElement calling getComputedStyle.
1088
+ var jobs = [], classes = [];
1089
+ getPseudoElementClasses();
1090
+ findPseudoElements(el);
1091
+ runJobs();
1092
+
1093
+ function getPseudoElementClasses(){
1094
+ var findPsuedoEls = /:before|:after/;
1095
+ var sheets = document.styleSheets;
1096
+ for (var i = 0, j = sheets.length; i < j; i++) {
1097
+ try {
1098
+ var rules = sheets[i].cssRules;
1099
+ for (var k = 0, l = rules.length; k < l; k++) {
1100
+ if(findPsuedoEls.test(rules[k].selectorText)) {
1101
+ classes.push(rules[k].selectorText);
1102
+ }
1103
+ }
1104
+ }
1105
+ catch(e) { // will throw security exception for style sheets loaded from external domains
1106
+ }
1107
+ }
1108
+
1109
+ // Trim off the :after and :before (or ::after and ::before)
1110
+ for (i = 0, j = classes.length; i < j; i++) {
1111
+ classes[i] = classes[i].match(/(^[^:]*)/)[1];
1112
+ }
1113
+ }
1114
+
1115
+ // Using the list of elements we know how pseudo el styles, create fake pseudo elements.
1116
+ function findPseudoElements(el) {
1117
+ var els = document.querySelectorAll(classes.join(','));
1118
+ for(var i = 0, j = els.length; i < j; i++) {
1119
+ createPseudoElements(els[i]);
1120
+ }
1121
+ }
1122
+
1123
+ // Create pseudo elements & add them to a job queue.
1124
+ function createPseudoElements(el) {
1125
+ var before = getPseudoElement(el, ':before'),
1126
+ after = getPseudoElement(el, ':after');
1127
+
1128
+ if(before) {
1129
+ jobs.push({type: 'before', pseudo: before, el: el});
1130
+ }
1131
+
1132
+ if (after) {
1133
+ jobs.push({type: 'after', pseudo: after, el: el});
1134
+ }
1135
+ }
1136
+
1137
+ // Adds a class to the pseudo's parent to prevent the original before/after from messing
1138
+ // with layouts.
1139
+ // Execute the inserts & addClass() calls in a batch to prevent relayouts.
1140
+ function runJobs() {
1141
+ // Add Class
1142
+ jobs.forEach(function(job){
1143
+ addClass(job.el, pseudoHide + "-parent");
1144
+ });
1145
+
1146
+ // Insert el
1147
+ jobs.forEach(function(job){
1148
+ if(job.type === 'before'){
1149
+ job.el.insertBefore(job.pseudo, job.el.firstChild);
1150
+ } else {
1151
+ job.el.appendChild(job.pseudo);
1152
+ }
1153
+ });
1154
+ }
1155
+ }
1156
+
1157
+
1158
+
1159
+ // Delete our fake pseudo elements from the DOM. This will remove those actual elements
1160
+ // and the classes on their parents that hide the actual pseudo elements.
1161
+ // Note that NodeLists are 'live' collections so you can't use a for loop here. They are
1162
+ // actually deleted from the NodeList after each iteration.
1163
+ function removePseudoElements(){
1164
+ // delete pseudo elements
1165
+ body.removeChild(hidePseudoElementsStyles);
1166
+ var pseudos = document.getElementsByClassName(pseudoHide + "-element");
1167
+ while (pseudos.length) {
1168
+ pseudos[0].parentNode.removeChild(pseudos[0]);
1169
+ }
1170
+
1171
+ // Remove pseudo hiding classes
1172
+ var parents = document.getElementsByClassName(pseudoHide + "-parent");
1173
+ while(parents.length) {
1174
+ removeClass(parents[0], pseudoHide + "-parent");
1175
+ }
1176
+ }
1177
+
1178
+ function addClass (el, className) {
1179
+ if (el.classList) {
1180
+ el.classList.add(className);
1181
+ } else {
1182
+ el.className = el.className + " " + className;
1183
+ }
1184
+ }
1185
+
1186
+ function removeClass (el, className) {
1187
+ if (el.classList) {
1188
+ el.classList.remove(className);
1189
+ } else {
1190
+ el.className = el.className.replace(className, "").trim();
1191
+ }
1192
+ }
1193
+
1194
+ function hasClass (el, className) {
1195
+ return el.className.indexOf(className) > -1;
1196
+ }
1197
+
1198
+ // Note that this doesn't work in < IE8, but we don't support that anyhow
1199
+ function nodeListToArray (nodeList) {
1200
+ return Array.prototype.slice.call(nodeList);
1201
+ }
1202
+
1203
+ function documentWidth () {
1204
+ return Math.max(
1205
+ Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
1206
+ Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
1207
+ Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
1208
+ );
1209
+ }
1210
+
1211
+ function documentHeight () {
1212
+ return Math.max(
1213
+ Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
1214
+ Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
1215
+ Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
1216
+ );
1217
+ }
1218
+
1219
+ function getCSSInt(element, attribute) {
1220
+ var val = parseInt(getCSS(element, attribute), 10);
1221
+ return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html
1222
+ }
1223
+
1224
+ function renderRect (ctx, x, y, w, h, bgcolor) {
1225
+ if (bgcolor !== "transparent"){
1226
+ ctx.setVariable("fillStyle", bgcolor);
1227
+ ctx.fillRect(x, y, w, h);
1228
+ numDraws+=1;
1229
+ }
1230
+ }
1231
+
1232
+ function capitalize(m, p1, p2) {
1233
+ if (m.length > 0) {
1234
+ return p1 + p2.toUpperCase();
1235
+ }
1236
+ }
1237
+
1238
+ function textTransform (text, transform) {
1239
+ switch(transform){
1240
+ case "lowercase":
1241
+ return text.toLowerCase();
1242
+ case "capitalize":
1243
+ return text.replace( /(^|\s|:|-|\(|\))([a-z])/g, capitalize);
1244
+ case "uppercase":
1245
+ return text.toUpperCase();
1246
+ default:
1247
+ return text;
1248
+ }
1249
+ }
1250
+
1251
+ function noLetterSpacing(letter_spacing) {
1252
+ return (/^(normal|none|0px)$/.test(letter_spacing));
1253
+ }
1254
+
1255
+ function drawText(currentText, x, y, ctx){
1256
+ if (currentText !== null && Util.trimText(currentText).length > 0) {
1257
+ ctx.fillText(currentText, x, y);
1258
+ numDraws+=1;
1259
+ }
1260
+ }
1261
+
1262
+ function setTextVariables(ctx, el, text_decoration, color) {
1263
+ var align = false,
1264
+ bold = getCSS(el, "fontWeight"),
1265
+ family = getCSS(el, "fontFamily"),
1266
+ size = getCSS(el, "fontSize"),
1267
+ shadows = Util.parseTextShadows(getCSS(el, "textShadow"));
1268
+
1269
+ switch(parseInt(bold, 10)){
1270
+ case 401:
1271
+ bold = "bold";
1272
+ break;
1273
+ case 400:
1274
+ bold = "normal";
1275
+ break;
1276
+ }
1277
+
1278
+ ctx.setVariable("fillStyle", color);
1279
+ ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));
1280
+ ctx.setVariable("textAlign", (align) ? "right" : "left");
1281
+
1282
+ if (shadows.length) {
1283
+ // TODO: support multiple text shadows
1284
+ // apply the first text shadow
1285
+ ctx.setVariable("shadowColor", shadows[0].color);
1286
+ ctx.setVariable("shadowOffsetX", shadows[0].offsetX);
1287
+ ctx.setVariable("shadowOffsetY", shadows[0].offsetY);
1288
+ ctx.setVariable("shadowBlur", shadows[0].blur);
1289
+ }
1290
+
1291
+ if (text_decoration !== "none"){
1292
+ return Util.Font(family, size, doc);
1293
+ }
1294
+ }
1295
+
1296
+ function renderTextDecoration(ctx, text_decoration, bounds, metrics, color) {
1297
+ switch(text_decoration) {
1298
+ case "underline":
1299
+ // Draws a line at the baseline of the font
1300
+ // TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
1301
+ renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color);
1302
+ break;
1303
+ case "overline":
1304
+ renderRect(ctx, bounds.left, Math.round(bounds.top), bounds.width, 1, color);
1305
+ break;
1306
+ case "line-through":
1307
+ // TODO try and find exact position for line-through
1308
+ renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color);
1309
+ break;
1310
+ }
1311
+ }
1312
+
1313
+ function getTextBounds(state, text, textDecoration, isLast, transform) {
1314
+ var bounds;
1315
+ if (support.rangeBounds && !transform) {
1316
+ if (textDecoration !== "none" || Util.trimText(text).length !== 0) {
1317
+ bounds = textRangeBounds(text, state.node, state.textOffset);
1318
+ }
1319
+ state.textOffset += text.length;
1320
+ } else if (state.node && typeof state.node.nodeValue === "string" ){
1321
+ var newTextNode = (isLast) ? state.node.splitText(text.length) : null;
1322
+ bounds = textWrapperBounds(state.node, transform);
1323
+ state.node = newTextNode;
1324
+ }
1325
+ return bounds;
1326
+ }
1327
+
1328
+ function textRangeBounds(text, textNode, textOffset) {
1329
+ var range = doc.createRange();
1330
+ range.setStart(textNode, textOffset);
1331
+ range.setEnd(textNode, textOffset + text.length);
1332
+ return range.getBoundingClientRect();
1333
+ }
1334
+
1335
+ function textWrapperBounds(oldTextNode, transform) {
1336
+ var parent = oldTextNode.parentNode,
1337
+ wrapElement = doc.createElement('wrapper'),
1338
+ backupText = oldTextNode.cloneNode(true);
1339
+
1340
+ wrapElement.appendChild(oldTextNode.cloneNode(true));
1341
+ parent.replaceChild(wrapElement, oldTextNode);
1342
+
1343
+ var bounds = transform ? Util.OffsetBounds(wrapElement) : Util.Bounds(wrapElement);
1344
+ parent.replaceChild(backupText, wrapElement);
1345
+ return bounds;
1346
+ }
1347
+
1348
+ function renderText(el, textNode, stack) {
1349
+ var ctx = stack.ctx,
1350
+ color = getCSS(el, "color"),
1351
+ textDecoration = getCSS(el, "textDecoration"),
1352
+ textAlign = getCSS(el, "textAlign"),
1353
+ metrics,
1354
+ textList,
1355
+ state = {
1356
+ node: textNode,
1357
+ textOffset: 0
1358
+ };
1359
+
1360
+ if (Util.trimText(textNode.nodeValue).length > 0) {
1361
+ textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
1362
+ textAlign = textAlign.replace(["-webkit-auto"],["auto"]);
1363
+
1364
+ textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ?
1365
+ textNode.nodeValue.split(/(\b| )/)
1366
+ : textNode.nodeValue.split("");
1367
+
1368
+ metrics = setTextVariables(ctx, el, textDecoration, color);
1369
+
1370
+ if (options.chinese) {
1371
+ textList.forEach(function(word, index) {
1372
+ if (/.*[\u4E00-\u9FA5].*$/.test(word)) {
1373
+ word = word.split("");
1374
+ word.unshift(index, 1);
1375
+ textList.splice.apply(textList, word);
1376
+ }
1377
+ });
1378
+ }
1379
+
1380
+ textList.forEach(function(text, index) {
1381
+ var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix);
1382
+ if (bounds) {
1383
+ drawText(text, bounds.left, bounds.bottom, ctx);
1384
+ renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
1385
+ }
1386
+ });
1387
+ }
1388
+ }
1389
+
1390
+ function listPosition (element, val) {
1391
+ var boundElement = doc.createElement( "boundelement" ),
1392
+ originalType,
1393
+ bounds;
1394
+
1395
+ boundElement.style.display = "inline";
1396
+
1397
+ originalType = element.style.listStyleType;
1398
+ element.style.listStyleType = "none";
1399
+
1400
+ boundElement.appendChild(doc.createTextNode(val));
1401
+
1402
+ element.insertBefore(boundElement, element.firstChild);
1403
+
1404
+ bounds = Util.Bounds(boundElement);
1405
+ element.removeChild(boundElement);
1406
+ element.style.listStyleType = originalType;
1407
+ return bounds;
1408
+ }
1409
+
1410
+ function elementIndex(el) {
1411
+ var i = -1,
1412
+ count = 1,
1413
+ childs = el.parentNode.childNodes;
1414
+
1415
+ if (el.parentNode) {
1416
+ while(childs[++i] !== el) {
1417
+ if (childs[i].nodeType === 1) {
1418
+ count++;
1419
+ }
1420
+ }
1421
+ return count;
1422
+ } else {
1423
+ return -1;
1424
+ }
1425
+ }
1426
+
1427
+ function listItemText(element, type) {
1428
+ var currentIndex = elementIndex(element), text;
1429
+ switch(type){
1430
+ case "decimal":
1431
+ text = currentIndex;
1432
+ break;
1433
+ case "decimal-leading-zero":
1434
+ text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString();
1435
+ break;
1436
+ case "upper-roman":
1437
+ text = _html2canvas.Generate.ListRoman( currentIndex );
1438
+ break;
1439
+ case "lower-roman":
1440
+ text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();
1441
+ break;
1442
+ case "lower-alpha":
1443
+ text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();
1444
+ break;
1445
+ case "upper-alpha":
1446
+ text = _html2canvas.Generate.ListAlpha( currentIndex );
1447
+ break;
1448
+ }
1449
+
1450
+ return text + ". ";
1451
+ }
1452
+
1453
+ function renderListItem(element, stack, elBounds) {
1454
+ var x,
1455
+ text,
1456
+ ctx = stack.ctx,
1457
+ type = getCSS(element, "listStyleType"),
1458
+ listBounds;
1459
+
1460
+ if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {
1461
+ text = listItemText(element, type);
1462
+ listBounds = listPosition(element, text);
1463
+ setTextVariables(ctx, element, "none", getCSS(element, "color"));
1464
+
1465
+ if (getCSS(element, "listStylePosition") === "inside") {
1466
+ ctx.setVariable("textAlign", "left");
1467
+ x = elBounds.left;
1468
+ } else {
1469
+ return;
1470
+ }
1471
+
1472
+ drawText(text, x, listBounds.bottom, ctx);
1473
+ }
1474
+ }
1475
+
1476
+ function loadImage (src){
1477
+ var img = images[src];
1478
+ return (img && img.succeeded === true) ? img.img : false;
1479
+ }
1480
+
1481
+ function clipBounds(src, dst){
1482
+ var x = Math.max(src.left, dst.left),
1483
+ y = Math.max(src.top, dst.top),
1484
+ x2 = Math.min((src.left + src.width), (dst.left + dst.width)),
1485
+ y2 = Math.min((src.top + src.height), (dst.top + dst.height));
1486
+
1487
+ return {
1488
+ left:x,
1489
+ top:y,
1490
+ width:x2-x,
1491
+ height:y2-y
1492
+ };
1493
+ }
1494
+
1495
+ function setZ(element, stack, parentStack){
1496
+ var newContext,
1497
+ isPositioned = stack.cssPosition !== 'static',
1498
+ zIndex = isPositioned ? getCSS(element, 'zIndex') : 'auto',
1499
+ opacity = getCSS(element, 'opacity'),
1500
+ isFloated = getCSS(element, 'cssFloat') !== 'none';
1501
+
1502
+ // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
1503
+ // When a new stacking context should be created:
1504
+ // the root element (HTML),
1505
+ // positioned (absolutely or relatively) with a z-index value other than "auto",
1506
+ // elements with an opacity value less than 1. (See the specification for opacity),
1507
+ // on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)
1508
+
1509
+ stack.zIndex = newContext = h2czContext(zIndex);
1510
+ newContext.isPositioned = isPositioned;
1511
+ newContext.isFloated = isFloated;
1512
+ newContext.opacity = opacity;
1513
+ newContext.ownStacking = (zIndex !== 'auto' || opacity < 1);
1514
+ newContext.depth = parentStack ? (parentStack.zIndex.depth + 1) : 0;
1515
+
1516
+ if (parentStack) {
1517
+ parentStack.zIndex.children.push(stack);
1518
+ }
1519
+ }
1520
+
1521
+ function h2czContext(zindex) {
1522
+ return {
1523
+ depth: 0,
1524
+ zindex: zindex,
1525
+ children: []
1526
+ };
1527
+ }
1528
+
1529
+ function renderImage(ctx, element, image, bounds, borders) {
1530
+
1531
+ var paddingLeft = getCSSInt(element, 'paddingLeft'),
1532
+ paddingTop = getCSSInt(element, 'paddingTop'),
1533
+ paddingRight = getCSSInt(element, 'paddingRight'),
1534
+ paddingBottom = getCSSInt(element, 'paddingBottom');
1535
+
1536
+ drawImage(
1537
+ ctx,
1538
+ image,
1539
+ 0, //sx
1540
+ 0, //sy
1541
+ image.width, //sw
1542
+ image.height, //sh
1543
+ bounds.left + paddingLeft + borders[3].width, //dx
1544
+ bounds.top + paddingTop + borders[0].width, // dy
1545
+ bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw
1546
+ bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh
1547
+ );
1548
+ }
1549
+
1550
+ function getBorderData(element) {
1551
+ return ["Top", "Right", "Bottom", "Left"].map(function(side) {
1552
+ return {
1553
+ width: getCSSInt(element, 'border' + side + 'Width'),
1554
+ color: getCSS(element, 'border' + side + 'Color')
1555
+ };
1556
+ });
1557
+ }
1558
+
1559
+ function getBorderRadiusData(element) {
1560
+ return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {
1561
+ return getCSS(element, 'border' + side + 'Radius');
1562
+ });
1563
+ }
1564
+
1565
+ function getCurvePoints(x, y, r1, r2) {
1566
+ var kappa = 4 * ((Math.sqrt(2) - 1) / 3);
1567
+ var ox = (r1) * kappa, // control point offset horizontal
1568
+ oy = (r2) * kappa, // control point offset vertical
1569
+ xm = x + r1, // x-middle
1570
+ ym = y + r2; // y-middle
1571
+ return {
1572
+ topLeft: bezierCurve({
1573
+ x:x,
1574
+ y:ym
1575
+ }, {
1576
+ x:x,
1577
+ y:ym - oy
1578
+ }, {
1579
+ x:xm - ox,
1580
+ y:y
1581
+ }, {
1582
+ x:xm,
1583
+ y:y
1584
+ }),
1585
+ topRight: bezierCurve({
1586
+ x:x,
1587
+ y:y
1588
+ }, {
1589
+ x:x + ox,
1590
+ y:y
1591
+ }, {
1592
+ x:xm,
1593
+ y:ym - oy
1594
+ }, {
1595
+ x:xm,
1596
+ y:ym
1597
+ }),
1598
+ bottomRight: bezierCurve({
1599
+ x:xm,
1600
+ y:y
1601
+ }, {
1602
+ x:xm,
1603
+ y:y + oy
1604
+ }, {
1605
+ x:x + ox,
1606
+ y:ym
1607
+ }, {
1608
+ x:x,
1609
+ y:ym
1610
+ }),
1611
+ bottomLeft: bezierCurve({
1612
+ x:xm,
1613
+ y:ym
1614
+ }, {
1615
+ x:xm - ox,
1616
+ y:ym
1617
+ }, {
1618
+ x:x,
1619
+ y:y + oy
1620
+ }, {
1621
+ x:x,
1622
+ y:y
1623
+ })
1624
+ };
1625
+ }
1626
+
1627
+ function bezierCurve(start, startControl, endControl, end) {
1628
+
1629
+ var lerp = function (a, b, t) {
1630
+ return {
1631
+ x:a.x + (b.x - a.x) * t,
1632
+ y:a.y + (b.y - a.y) * t
1633
+ };
1634
+ };
1635
+
1636
+ return {
1637
+ start: start,
1638
+ startControl: startControl,
1639
+ endControl: endControl,
1640
+ end: end,
1641
+ subdivide: function(t) {
1642
+ var ab = lerp(start, startControl, t),
1643
+ bc = lerp(startControl, endControl, t),
1644
+ cd = lerp(endControl, end, t),
1645
+ abbc = lerp(ab, bc, t),
1646
+ bccd = lerp(bc, cd, t),
1647
+ dest = lerp(abbc, bccd, t);
1648
+ return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];
1649
+ },
1650
+ curveTo: function(borderArgs) {
1651
+ borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);
1652
+ },
1653
+ curveToReversed: function(borderArgs) {
1654
+ borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);
1655
+ }
1656
+ };
1657
+ }
1658
+
1659
+ function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {
1660
+ if (radius1[0] > 0 || radius1[1] > 0) {
1661
+ borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);
1662
+ corner1[0].curveTo(borderArgs);
1663
+ corner1[1].curveTo(borderArgs);
1664
+ } else {
1665
+ borderArgs.push(["line", x, y]);
1666
+ }
1667
+
1668
+ if (radius2[0] > 0 || radius2[1] > 0) {
1669
+ borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);
1670
+ }
1671
+ }
1672
+
1673
+ function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {
1674
+ var borderArgs = [];
1675
+
1676
+ if (radius1[0] > 0 || radius1[1] > 0) {
1677
+ borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);
1678
+ outer1[1].curveTo(borderArgs);
1679
+ } else {
1680
+ borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);
1681
+ }
1682
+
1683
+ if (radius2[0] > 0 || radius2[1] > 0) {
1684
+ borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);
1685
+ outer2[0].curveTo(borderArgs);
1686
+ borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);
1687
+ inner2[0].curveToReversed(borderArgs);
1688
+ } else {
1689
+ borderArgs.push([ "line", borderData.c2[0], borderData.c2[1]]);
1690
+ borderArgs.push([ "line", borderData.c3[0], borderData.c3[1]]);
1691
+ }
1692
+
1693
+ if (radius1[0] > 0 || radius1[1] > 0) {
1694
+ borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);
1695
+ inner1[1].curveToReversed(borderArgs);
1696
+ } else {
1697
+ borderArgs.push([ "line", borderData.c4[0], borderData.c4[1]]);
1698
+ }
1699
+
1700
+ return borderArgs;
1701
+ }
1702
+
1703
+ function calculateCurvePoints(bounds, borderRadius, borders) {
1704
+
1705
+ var x = bounds.left,
1706
+ y = bounds.top,
1707
+ width = bounds.width,
1708
+ height = bounds.height,
1709
+
1710
+ tlh = borderRadius[0][0],
1711
+ tlv = borderRadius[0][1],
1712
+ trh = borderRadius[1][0],
1713
+ trv = borderRadius[1][1],
1714
+ brh = borderRadius[2][0],
1715
+ brv = borderRadius[2][1],
1716
+ blh = borderRadius[3][0],
1717
+ blv = borderRadius[3][1],
1718
+
1719
+ topWidth = width - trh,
1720
+ rightHeight = height - brv,
1721
+ bottomWidth = width - brh,
1722
+ leftHeight = height - blv;
1723
+
1724
+ return {
1725
+ topLeftOuter: getCurvePoints(
1726
+ x,
1727
+ y,
1728
+ tlh,
1729
+ tlv
1730
+ ).topLeft.subdivide(0.5),
1731
+
1732
+ topLeftInner: getCurvePoints(
1733
+ x + borders[3].width,
1734
+ y + borders[0].width,
1735
+ Math.max(0, tlh - borders[3].width),
1736
+ Math.max(0, tlv - borders[0].width)
1737
+ ).topLeft.subdivide(0.5),
1738
+
1739
+ topRightOuter: getCurvePoints(
1740
+ x + topWidth,
1741
+ y,
1742
+ trh,
1743
+ trv
1744
+ ).topRight.subdivide(0.5),
1745
+
1746
+ topRightInner: getCurvePoints(
1747
+ x + Math.min(topWidth, width + borders[3].width),
1748
+ y + borders[0].width,
1749
+ (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width,
1750
+ trv - borders[0].width
1751
+ ).topRight.subdivide(0.5),
1752
+
1753
+ bottomRightOuter: getCurvePoints(
1754
+ x + bottomWidth,
1755
+ y + rightHeight,
1756
+ brh,
1757
+ brv
1758
+ ).bottomRight.subdivide(0.5),
1759
+
1760
+ bottomRightInner: getCurvePoints(
1761
+ x + Math.min(bottomWidth, width + borders[3].width),
1762
+ y + Math.min(rightHeight, height + borders[0].width),
1763
+ Math.max(0, brh - borders[1].width),
1764
+ Math.max(0, brv - borders[2].width)
1765
+ ).bottomRight.subdivide(0.5),
1766
+
1767
+ bottomLeftOuter: getCurvePoints(
1768
+ x,
1769
+ y + leftHeight,
1770
+ blh,
1771
+ blv
1772
+ ).bottomLeft.subdivide(0.5),
1773
+
1774
+ bottomLeftInner: getCurvePoints(
1775
+ x + borders[3].width,
1776
+ y + leftHeight,
1777
+ Math.max(0, blh - borders[3].width),
1778
+ Math.max(0, blv - borders[2].width)
1779
+ ).bottomLeft.subdivide(0.5)
1780
+ };
1781
+ }
1782
+
1783
+ function getBorderClip(element, borderPoints, borders, radius, bounds) {
1784
+ var backgroundClip = getCSS(element, 'backgroundClip'),
1785
+ borderArgs = [];
1786
+
1787
+ switch(backgroundClip) {
1788
+ case "content-box":
1789
+ case "padding-box":
1790
+ parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);
1791
+ parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);
1792
+ parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);
1793
+ parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);
1794
+ break;
1795
+
1796
+ default:
1797
+ parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);
1798
+ parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);
1799
+ parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);
1800
+ parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);
1801
+ break;
1802
+ }
1803
+
1804
+ return borderArgs;
1805
+ }
1806
+
1807
+ function parseBorders(element, bounds, borders){
1808
+ var x = bounds.left,
1809
+ y = bounds.top,
1810
+ width = bounds.width,
1811
+ height = bounds.height,
1812
+ borderSide,
1813
+ bx,
1814
+ by,
1815
+ bw,
1816
+ bh,
1817
+ borderArgs,
1818
+ // http://www.w3.org/TR/css3-background/#the-border-radius
1819
+ borderRadius = getBorderRadiusData(element),
1820
+ borderPoints = calculateCurvePoints(bounds, borderRadius, borders),
1821
+ borderData = {
1822
+ clip: getBorderClip(element, borderPoints, borders, borderRadius, bounds),
1823
+ borders: []
1824
+ };
1825
+
1826
+ for (borderSide = 0; borderSide < 4; borderSide++) {
1827
+
1828
+ if (borders[borderSide].width > 0) {
1829
+ bx = x;
1830
+ by = y;
1831
+ bw = width;
1832
+ bh = height - (borders[2].width);
1833
+
1834
+ switch(borderSide) {
1835
+ case 0:
1836
+ // top border
1837
+ bh = borders[0].width;
1838
+
1839
+ borderArgs = drawSide({
1840
+ c1: [bx, by],
1841
+ c2: [bx + bw, by],
1842
+ c3: [bx + bw - borders[1].width, by + bh],
1843
+ c4: [bx + borders[3].width, by + bh]
1844
+ }, borderRadius[0], borderRadius[1],
1845
+ borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);
1846
+ break;
1847
+ case 1:
1848
+ // right border
1849
+ bx = x + width - (borders[1].width);
1850
+ bw = borders[1].width;
1851
+
1852
+ borderArgs = drawSide({
1853
+ c1: [bx + bw, by],
1854
+ c2: [bx + bw, by + bh + borders[2].width],
1855
+ c3: [bx, by + bh],
1856
+ c4: [bx, by + borders[0].width]
1857
+ }, borderRadius[1], borderRadius[2],
1858
+ borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);
1859
+ break;
1860
+ case 2:
1861
+ // bottom border
1862
+ by = (by + height) - (borders[2].width);
1863
+ bh = borders[2].width;
1864
+
1865
+ borderArgs = drawSide({
1866
+ c1: [bx + bw, by + bh],
1867
+ c2: [bx, by + bh],
1868
+ c3: [bx + borders[3].width, by],
1869
+ c4: [bx + bw - borders[3].width, by]
1870
+ }, borderRadius[2], borderRadius[3],
1871
+ borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);
1872
+ break;
1873
+ case 3:
1874
+ // left border
1875
+ bw = borders[3].width;
1876
+
1877
+ borderArgs = drawSide({
1878
+ c1: [bx, by + bh + borders[2].width],
1879
+ c2: [bx, by],
1880
+ c3: [bx + bw, by + borders[0].width],
1881
+ c4: [bx + bw, by + bh]
1882
+ }, borderRadius[3], borderRadius[0],
1883
+ borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);
1884
+ break;
1885
+ }
1886
+
1887
+ borderData.borders.push({
1888
+ args: borderArgs,
1889
+ color: borders[borderSide].color
1890
+ });
1891
+
1892
+ }
1893
+ }
1894
+
1895
+ return borderData;
1896
+ }
1897
+
1898
+ function createShape(ctx, args) {
1899
+ var shape = ctx.drawShape();
1900
+ args.forEach(function(border, index) {
1901
+ shape[(index === 0) ? "moveTo" : border[0] + "To" ].apply(null, border.slice(1));
1902
+ });
1903
+ return shape;
1904
+ }
1905
+
1906
+ function renderBorders(ctx, borderArgs, color) {
1907
+ if (color !== "transparent") {
1908
+ ctx.setVariable( "fillStyle", color);
1909
+ createShape(ctx, borderArgs);
1910
+ ctx.fill();
1911
+ numDraws+=1;
1912
+ }
1913
+ }
1914
+
1915
+ function renderFormValue (el, bounds, stack){
1916
+
1917
+ var valueWrap = doc.createElement('valuewrap'),
1918
+ cssPropertyArray = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],
1919
+ textValue,
1920
+ textNode;
1921
+
1922
+ cssPropertyArray.forEach(function(property) {
1923
+ try {
1924
+ valueWrap.style[property] = getCSS(el, property);
1925
+ } catch(e) {
1926
+ // Older IE has issues with "border"
1927
+ Util.log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
1928
+ }
1929
+ });
1930
+
1931
+ valueWrap.style.borderColor = "black";
1932
+ valueWrap.style.borderStyle = "solid";
1933
+ valueWrap.style.display = "block";
1934
+ valueWrap.style.position = "absolute";
1935
+
1936
+ if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === "SELECT"){
1937
+ valueWrap.style.lineHeight = getCSS(el, "height");
1938
+ }
1939
+
1940
+ valueWrap.style.top = bounds.top + "px";
1941
+ valueWrap.style.left = bounds.left + "px";
1942
+
1943
+ textValue = (el.nodeName === "SELECT") ? (el.options[el.selectedIndex] || 0).text : el.value;
1944
+ if(!textValue) {
1945
+ textValue = el.placeholder;
1946
+ }
1947
+
1948
+ textNode = doc.createTextNode(textValue);
1949
+
1950
+ valueWrap.appendChild(textNode);
1951
+ body.appendChild(valueWrap);
1952
+
1953
+ renderText(el, textNode, stack);
1954
+ body.removeChild(valueWrap);
1955
+ }
1956
+
1957
+ function drawImage (ctx) {
1958
+ ctx.drawImage.apply(ctx, Array.prototype.slice.call(arguments, 1));
1959
+ numDraws+=1;
1960
+ }
1961
+
1962
+ function getPseudoElement(el, which) {
1963
+ var elStyle = window.getComputedStyle(el, which);
1964
+ var parentStyle = window.getComputedStyle(el);
1965
+ // If no content attribute is present, the pseudo element is hidden,
1966
+ // or the parent has a content property equal to the content on the pseudo element,
1967
+ // move along.
1968
+ if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" ||
1969
+ elStyle.display === "none" || parentStyle.content === elStyle.content) {
1970
+ return;
1971
+ }
1972
+ var content = elStyle.content + '';
1973
+
1974
+ // Strip inner quotes
1975
+ if(content[0] === "'" || content[0] === "\"") {
1976
+ content = content.replace(/(^['"])|(['"]$)/g, '');
1977
+ }
1978
+
1979
+ var isImage = content.substr( 0, 3 ) === 'url',
1980
+ elps = document.createElement( isImage ? 'img' : 'span' );
1981
+
1982
+ elps.className = pseudoHide + "-element ";
1983
+
1984
+ Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) {
1985
+ // Prevent assigning of read only CSS Rules, ex. length, parentRule
1986
+ try {
1987
+ elps.style[prop] = elStyle[prop];
1988
+ } catch (e) {
1989
+ Util.log(['Tried to assign readonly property ', prop, 'Error:', e]);
1990
+ }
1991
+ });
1992
+
1993
+ if(isImage) {
1994
+ elps.src = Util.parseBackgroundImage(content)[0].args[0];
1995
+ } else {
1996
+ elps.innerHTML = content;
1997
+ }
1998
+ return elps;
1999
+ }
2000
+
2001
+ function indexedProperty(property) {
2002
+ return (isNaN(window.parseInt(property, 10)));
2003
+ }
2004
+
2005
+ function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) {
2006
+ var offsetX = Math.round(bounds.left + backgroundPosition.left),
2007
+ offsetY = Math.round(bounds.top + backgroundPosition.top);
2008
+
2009
+ ctx.createPattern(image);
2010
+ ctx.translate(offsetX, offsetY);
2011
+ ctx.fill();
2012
+ ctx.translate(-offsetX, -offsetY);
2013
+ }
2014
+
2015
+ function backgroundRepeatShape(ctx, image, backgroundPosition, bounds, left, top, width, height) {
2016
+ var args = [];
2017
+ args.push(["line", Math.round(left), Math.round(top)]);
2018
+ args.push(["line", Math.round(left + width), Math.round(top)]);
2019
+ args.push(["line", Math.round(left + width), Math.round(height + top)]);
2020
+ args.push(["line", Math.round(left), Math.round(height + top)]);
2021
+ createShape(ctx, args);
2022
+ ctx.save();
2023
+ ctx.clip();
2024
+ renderBackgroundRepeat(ctx, image, backgroundPosition, bounds);
2025
+ ctx.restore();
2026
+ }
2027
+
2028
+ function renderBackgroundColor(ctx, backgroundBounds, bgcolor) {
2029
+ renderRect(
2030
+ ctx,
2031
+ backgroundBounds.left,
2032
+ backgroundBounds.top,
2033
+ backgroundBounds.width,
2034
+ backgroundBounds.height,
2035
+ bgcolor
2036
+ );
2037
+ }
2038
+
2039
+ function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {
2040
+ var backgroundSize = Util.BackgroundSize(el, bounds, image, imageIndex),
2041
+ backgroundPosition = Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),
2042
+ backgroundRepeat = Util.BackgroundRepeat(el, imageIndex);
2043
+
2044
+ image = resizeImage(image, backgroundSize);
2045
+
2046
+ switch (backgroundRepeat) {
2047
+ case "repeat-x":
2048
+ case "repeat no-repeat":
2049
+ backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
2050
+ bounds.left, bounds.top + backgroundPosition.top, 99999, image.height);
2051
+ break;
2052
+ case "repeat-y":
2053
+ case "no-repeat repeat":
2054
+ backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
2055
+ bounds.left + backgroundPosition.left, bounds.top, image.width, 99999);
2056
+ break;
2057
+ case "no-repeat":
2058
+ backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
2059
+ bounds.left + backgroundPosition.left, bounds.top + backgroundPosition.top, image.width, image.height);
2060
+ break;
2061
+ default:
2062
+ renderBackgroundRepeat(ctx, image, backgroundPosition, {
2063
+ top: bounds.top,
2064
+ left: bounds.left,
2065
+ width: image.width,
2066
+ height: image.height
2067
+ });
2068
+ break;
2069
+ }
2070
+ }
2071
+
2072
+ function renderBackgroundImage(element, bounds, ctx) {
2073
+ var backgroundImage = getCSS(element, "backgroundImage"),
2074
+ backgroundImages = Util.parseBackgroundImage(backgroundImage),
2075
+ image,
2076
+ imageIndex = backgroundImages.length;
2077
+
2078
+ while(imageIndex--) {
2079
+ backgroundImage = backgroundImages[imageIndex];
2080
+
2081
+ if (!backgroundImage.args || backgroundImage.args.length === 0) {
2082
+ continue;
2083
+ }
2084
+
2085
+ var key = backgroundImage.method === 'url' ?
2086
+ backgroundImage.args[0] :
2087
+ backgroundImage.value;
2088
+
2089
+ image = loadImage(key);
2090
+
2091
+ // TODO add support for background-origin
2092
+ if (image) {
2093
+ renderBackgroundRepeating(element, bounds, ctx, image, imageIndex);
2094
+ } else {
2095
+ Util.log("html2canvas: Error loading background:", backgroundImage);
2096
+ }
2097
+ }
2098
+ }
2099
+
2100
+ function resizeImage(image, bounds) {
2101
+ if(image.width === bounds.width && image.height === bounds.height) {
2102
+ return image;
2103
+ }
2104
+
2105
+ var ctx, canvas = doc.createElement('canvas');
2106
+ canvas.width = bounds.width;
2107
+ canvas.height = bounds.height;
2108
+ ctx = canvas.getContext("2d");
2109
+ drawImage(ctx, image, 0, 0, image.width, image.height, 0, 0, bounds.width, bounds.height );
2110
+ return canvas;
2111
+ }
2112
+
2113
+ function setOpacity(ctx, element, parentStack) {
2114
+ return ctx.setVariable("globalAlpha", getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1));
2115
+ }
2116
+
2117
+ function removePx(str) {
2118
+ return str.replace("px", "");
2119
+ }
2120
+
2121
+ function getTransform(element, parentStack) {
2122
+ var transformRegExp = /(matrix)\((.+)\)/;
2123
+ var transform = getCSS(element, "transform") || getCSS(element, "-webkit-transform") || getCSS(element, "-moz-transform") || getCSS(element, "-ms-transform") || getCSS(element, "-o-transform");
2124
+ var transformOrigin = getCSS(element, "transform-origin") || getCSS(element, "-webkit-transform-origin") || getCSS(element, "-moz-transform-origin") || getCSS(element, "-ms-transform-origin") || getCSS(element, "-o-transform-origin") || "0px 0px";
2125
+
2126
+ transformOrigin = transformOrigin.split(" ").map(removePx).map(Util.asFloat);
2127
+
2128
+ var matrix;
2129
+ if (transform && transform !== "none") {
2130
+ var match = transform.match(transformRegExp);
2131
+ if (match) {
2132
+ switch(match[1]) {
2133
+ case "matrix":
2134
+ matrix = match[2].split(",").map(Util.trimText).map(Util.asFloat);
2135
+ break;
2136
+ }
2137
+ }
2138
+ }
2139
+
2140
+ return {
2141
+ origin: transformOrigin,
2142
+ matrix: matrix
2143
+ };
2144
+ }
2145
+
2146
+ function createStack(element, parentStack, bounds, transform) {
2147
+ var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height),
2148
+ stack = {
2149
+ ctx: ctx,
2150
+ opacity: setOpacity(ctx, element, parentStack),
2151
+ cssPosition: getCSS(element, "position"),
2152
+ borders: getBorderData(element),
2153
+ transform: transform,
2154
+ clip: (parentStack && parentStack.clip) ? Util.Extend( {}, parentStack.clip ) : null
2155
+ };
2156
+
2157
+ setZ(element, stack, parentStack);
2158
+
2159
+ // TODO correct overflow for absolute content residing under a static position
2160
+ if (options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(element, "overflow")) === true && /(BODY)/i.test(element.nodeName) === false){
2161
+ stack.clip = (stack.clip) ? clipBounds(stack.clip, bounds) : bounds;
2162
+ }
2163
+
2164
+ return stack;
2165
+ }
2166
+
2167
+ function getBackgroundBounds(borders, bounds, clip) {
2168
+ var backgroundBounds = {
2169
+ left: bounds.left + borders[3].width,
2170
+ top: bounds.top + borders[0].width,
2171
+ width: bounds.width - (borders[1].width + borders[3].width),
2172
+ height: bounds.height - (borders[0].width + borders[2].width)
2173
+ };
2174
+
2175
+ if (clip) {
2176
+ backgroundBounds = clipBounds(backgroundBounds, clip);
2177
+ }
2178
+
2179
+ return backgroundBounds;
2180
+ }
2181
+
2182
+ function getBounds(element, transform) {
2183
+ var bounds = (transform.matrix) ? Util.OffsetBounds(element) : Util.Bounds(element);
2184
+ transform.origin[0] += bounds.left;
2185
+ transform.origin[1] += bounds.top;
2186
+ return bounds;
2187
+ }
2188
+
2189
+ function renderElement(element, parentStack, ignoreBackground) {
2190
+ var transform = getTransform(element, parentStack),
2191
+ bounds = getBounds(element, transform),
2192
+ image,
2193
+ stack = createStack(element, parentStack, bounds, transform),
2194
+ borders = stack.borders,
2195
+ ctx = stack.ctx,
2196
+ backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip),
2197
+ borderData = parseBorders(element, bounds, borders),
2198
+ backgroundColor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor");
2199
+
2200
+
2201
+ createShape(ctx, borderData.clip);
2202
+
2203
+ ctx.save();
2204
+ ctx.clip();
2205
+
2206
+ if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) {
2207
+ renderBackgroundColor(ctx, bounds, backgroundColor);
2208
+ renderBackgroundImage(element, backgroundBounds, ctx);
2209
+ } else if (ignoreBackground) {
2210
+ stack.backgroundColor = backgroundColor;
2211
+ }
2212
+
2213
+ ctx.restore();
2214
+
2215
+ borderData.borders.forEach(function(border) {
2216
+ renderBorders(ctx, border.args, border.color);
2217
+ });
2218
+
2219
+ switch(element.nodeName){
2220
+ case "IMG":
2221
+ if ((image = loadImage(element.getAttribute('src')))) {
2222
+ renderImage(ctx, element, image, bounds, borders);
2223
+ } else {
2224
+ Util.log("html2canvas: Error loading <img>:" + element.getAttribute('src'));
2225
+ }
2226
+ break;
2227
+ case "INPUT":
2228
+ // TODO add all relevant type's, i.e. HTML5 new stuff
2229
+ // todo add support for placeholder attribute for browsers which support it
2230
+ if (/^(text|url|email|submit|button|reset)$/.test(element.type) && (element.value || element.placeholder || "").length > 0){
2231
+ renderFormValue(element, bounds, stack);
2232
+ }
2233
+ break;
2234
+ case "TEXTAREA":
2235
+ if ((element.value || element.placeholder || "").length > 0){
2236
+ renderFormValue(element, bounds, stack);
2237
+ }
2238
+ break;
2239
+ case "SELECT":
2240
+ if ((element.options||element.placeholder || "").length > 0){
2241
+ renderFormValue(element, bounds, stack);
2242
+ }
2243
+ break;
2244
+ case "LI":
2245
+ renderListItem(element, stack, backgroundBounds);
2246
+ break;
2247
+ case "CANVAS":
2248
+ renderImage(ctx, element, element, bounds, borders);
2249
+ break;
2250
+ }
2251
+
2252
+ return stack;
2253
+ }
2254
+
2255
+ function isElementVisible(element) {
2256
+ return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));
2257
+ }
2258
+
2259
+ function parseElement (element, stack, cb) {
2260
+ if (!cb) {
2261
+ cb = function(){};
2262
+ }
2263
+ if (isElementVisible(element)) {
2264
+ stack = renderElement(element, stack, false) || stack;
2265
+ if (!ignoreElementsRegExp.test(element.nodeName)) {
2266
+ return parseChildren(element, stack, cb);
2267
+ }
2268
+ }
2269
+ cb();
2270
+ }
2271
+
2272
+ function parseChildren(element, stack, cb) {
2273
+ var children = Util.Children(element);
2274
+ // After all nodes have processed, finished() will call the cb.
2275
+ // We add one and kick it off so this will still work when children.length === 0.
2276
+ // Note that unless async is true, this will happen synchronously, just will callbacks.
2277
+ var jobs = children.length + 1;
2278
+ finished();
2279
+
2280
+ if (options.async) {
2281
+ children.forEach(function(node) {
2282
+ // Don't block the page from rendering
2283
+ setTimeout(function(){ parseNode(node); }, 0);
2284
+ });
2285
+ } else {
2286
+ children.forEach(parseNode);
2287
+ }
2288
+
2289
+ function parseNode(node) {
2290
+ if (node.nodeType === node.ELEMENT_NODE) {
2291
+ parseElement(node, stack, finished);
2292
+ } else if (node.nodeType === node.TEXT_NODE) {
2293
+ renderText(element, node, stack);
2294
+ finished();
2295
+ } else {
2296
+ finished();
2297
+ }
2298
+ }
2299
+ function finished(el) {
2300
+ if (--jobs <= 0){
2301
+ Util.log("finished rendering " + children.length + " children.");
2302
+ cb();
2303
+ }
2304
+ }
2305
+ }
2306
+};
2307
+_html2canvas.Preload = function( options ) {
2308
+
2309
+ var images = {
2310
+ numLoaded: 0, // also failed are counted here
2311
+ numFailed: 0,
2312
+ numTotal: 0,
2313
+ cleanupDone: false
2314
+ },
2315
+ pageOrigin,
2316
+ Util = _html2canvas.Util,
2317
+ methods,
2318
+ i,
2319
+ count = 0,
2320
+ element = options.elements[0] || document.body,
2321
+ doc = element.ownerDocument,
2322
+ domImages = element.getElementsByTagName('img'), // Fetch images of the present element only
2323
+ imgLen = domImages.length,
2324
+ link = doc.createElement("a"),
2325
+ supportCORS = (function( img ){
2326
+ return (img.crossOrigin !== undefined);
2327
+ })(new Image()),
2328
+ timeoutTimer;
2329
+
2330
+ link.href = window.location.href;
2331
+ pageOrigin = link.protocol + link.host;
2332
+
2333
+ function isSameOrigin(url){
2334
+ link.href = url;
2335
+ link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/
2336
+ var origin = link.protocol + link.host;
2337
+ return (origin === pageOrigin);
2338
+ }
2339
+
2340
+ function start(){
2341
+ Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
2342
+ if (!images.firstRun && images.numLoaded >= images.numTotal){
2343
+ Util.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
2344
+
2345
+ if (typeof options.complete === "function"){
2346
+ options.complete(images);
2347
+ }
2348
+
2349
+ }
2350
+ }
2351
+
2352
+ // TODO modify proxy to serve images with CORS enabled, where available
2353
+ function proxyGetImage(url, img, imageObj){
2354
+ var callback_name,
2355
+ scriptUrl = options.proxy,
2356
+ script;
2357
+
2358
+ link.href = url;
2359
+ url = link.href; // work around for pages with base href="" set - WARNING: this may change the url
2360
+
2361
+ callback_name = 'html2canvas_' + (count++);
2362
+ imageObj.callbackname = callback_name;
2363
+
2364
+ if (scriptUrl.indexOf("?") > -1) {
2365
+ scriptUrl += "&";
2366
+ } else {
2367
+ scriptUrl += "?";
2368
+ }
2369
+ scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
2370
+ script = doc.createElement("script");
2371
+
2372
+ window[callback_name] = function(a){
2373
+ if (a.substring(0,6) === "error:"){
2374
+ imageObj.succeeded = false;
2375
+ images.numLoaded++;
2376
+ images.numFailed++;
2377
+ start();
2378
+ } else {
2379
+ setImageLoadHandlers(img, imageObj);
2380
+ img.src = a;
2381
+ }
2382
+ window[callback_name] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
2383
+ try {
2384
+ delete window[callback_name]; // for all browser that support this
2385
+ } catch(ex) {}
2386
+ script.parentNode.removeChild(script);
2387
+ script = null;
2388
+ delete imageObj.script;
2389
+ delete imageObj.callbackname;
2390
+ };
2391
+
2392
+ script.setAttribute("type", "text/javascript");
2393
+ script.setAttribute("src", scriptUrl);
2394
+ imageObj.script = script;
2395
+ window.document.body.appendChild(script);
2396
+
2397
+ }
2398
+
2399
+ function loadPseudoElement(element, type) {
2400
+ var style = window.getComputedStyle(element, type),
2401
+ content = style.content;
2402
+ if (content.substr(0, 3) === 'url') {
2403
+ methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]);
2404
+ }
2405
+ loadBackgroundImages(style.backgroundImage, element);
2406
+ }
2407
+
2408
+ function loadPseudoElementImages(element) {
2409
+ loadPseudoElement(element, ":before");
2410
+ loadPseudoElement(element, ":after");
2411
+ }
2412
+
2413
+ function loadGradientImage(backgroundImage, bounds) {
2414
+ var img = _html2canvas.Generate.Gradient(backgroundImage, bounds);
2415
+
2416
+ if (img !== undefined){
2417
+ images[backgroundImage] = {
2418
+ img: img,
2419
+ succeeded: true
2420
+ };
2421
+ images.numTotal++;
2422
+ images.numLoaded++;
2423
+ start();
2424
+ }
2425
+ }
2426
+
2427
+ function invalidBackgrounds(background_image) {
2428
+ return (background_image && background_image.method && background_image.args && background_image.args.length > 0 );
2429
+ }
2430
+
2431
+ function loadBackgroundImages(background_image, el) {
2432
+ var bounds;
2433
+
2434
+ _html2canvas.Util.parseBackgroundImage(background_image).filter(invalidBackgrounds).forEach(function(background_image) {
2435
+ if (background_image.method === 'url') {
2436
+ methods.loadImage(background_image.args[0]);
2437
+ } else if(background_image.method.match(/\-?gradient$/)) {
2438
+ if(bounds === undefined) {
2439
+ bounds = _html2canvas.Util.Bounds(el);
2440
+ }
2441
+ loadGradientImage(background_image.value, bounds);
2442
+ }
2443
+ });
2444
+ }
2445
+
2446
+ function getImages (el) {
2447
+ var elNodeType = false;
2448
+
2449
+ // Firefox fails with permission denied on pages with iframes
2450
+ try {
2451
+ Util.Children(el).forEach(getImages);
2452
+ }
2453
+ catch( e ) {}
2454
+
2455
+ try {
2456
+ elNodeType = el.nodeType;
2457
+ } catch (ex) {
2458
+ elNodeType = false;
2459
+ Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
2460
+ }
2461
+
2462
+ if (elNodeType === 1 || elNodeType === undefined) {
2463
+ loadPseudoElementImages(el);
2464
+ try {
2465
+ loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el);
2466
+ } catch(e) {
2467
+ Util.log("html2canvas: failed to get background-image - Exception: " + e.message);
2468
+ }
2469
+ loadBackgroundImages(el);
2470
+ }
2471
+ }
2472
+
2473
+ function setImageLoadHandlers(img, imageObj) {
2474
+ img.onload = function() {
2475
+ if ( imageObj.timer !== undefined ) {
2476
+ // CORS succeeded
2477
+ window.clearTimeout( imageObj.timer );
2478
+ }
2479
+
2480
+ images.numLoaded++;
2481
+ imageObj.succeeded = true;
2482
+ img.onerror = img.onload = null;
2483
+ start();
2484
+ };
2485
+ img.onerror = function() {
2486
+ if (img.crossOrigin === "anonymous") {
2487
+ // CORS failed
2488
+ window.clearTimeout( imageObj.timer );
2489
+
2490
+ // let's try with proxy instead
2491
+ if ( options.proxy ) {
2492
+ var src = img.src;
2493
+ img = new Image();
2494
+ imageObj.img = img;
2495
+ img.src = src;
2496
+
2497
+ proxyGetImage( img.src, img, imageObj );
2498
+ return;
2499
+ }
2500
+ }
2501
+
2502
+ images.numLoaded++;
2503
+ images.numFailed++;
2504
+ imageObj.succeeded = false;
2505
+ img.onerror = img.onload = null;
2506
+ start();
2507
+ };
2508
+ }
2509
+
2510
+ methods = {
2511
+ loadImage: function( src ) {
2512
+ var img, imageObj;
2513
+ if ( src && images[src] === undefined ) {
2514
+ img = new Image();
2515
+ if ( src.match(/data:image\/.*;base64,/i) ) {
2516
+ img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
2517
+ imageObj = images[src] = {
2518
+ img: img
2519
+ };
2520
+ images.numTotal++;
2521
+ setImageLoadHandlers(img, imageObj);
2522
+ } else if ( isSameOrigin( src ) || options.allowTaint === true ) {
2523
+ imageObj = images[src] = {
2524
+ img: img
2525
+ };
2526
+ images.numTotal++;
2527
+ setImageLoadHandlers(img, imageObj);
2528
+ img.src = src;
2529
+ } else if ( supportCORS && !options.allowTaint && options.useCORS ) {
2530
+ // attempt to load with CORS
2531
+
2532
+ img.crossOrigin = "anonymous";
2533
+ imageObj = images[src] = {
2534
+ img: img
2535
+ };
2536
+ images.numTotal++;
2537
+ setImageLoadHandlers(img, imageObj);
2538
+ img.src = src;
2539
+ } else if ( options.proxy ) {
2540
+ imageObj = images[src] = {
2541
+ img: img
2542
+ };
2543
+ images.numTotal++;
2544
+ proxyGetImage( src, img, imageObj );
2545
+ }
2546
+ }
2547
+
2548
+ },
2549
+ cleanupDOM: function(cause) {
2550
+ var img, src;
2551
+ if (!images.cleanupDone) {
2552
+ if (cause && typeof cause === "string") {
2553
+ Util.log("html2canvas: Cleanup because: " + cause);
2554
+ } else {
2555
+ Util.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
2556
+ }
2557
+
2558
+ for (src in images) {
2559
+ if (images.hasOwnProperty(src)) {
2560
+ img = images[src];
2561
+ if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
2562
+ // cancel proxy image request
2563
+ window[img.callbackname] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
2564
+ try {
2565
+ delete window[img.callbackname]; // for all browser that support this
2566
+ } catch(ex) {}
2567
+ if (img.script && img.script.parentNode) {
2568
+ img.script.setAttribute("src", "about:blank"); // try to cancel running request
2569
+ img.script.parentNode.removeChild(img.script);
2570
+ }
2571
+ images.numLoaded++;
2572
+ images.numFailed++;
2573
+ Util.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
2574
+ }
2575
+ }
2576
+ }
2577
+
2578
+ // cancel any pending requests
2579
+ if(window.stop !== undefined) {
2580
+ window.stop();
2581
+ } else if(document.execCommand !== undefined) {
2582
+ document.execCommand("Stop", false);
2583
+ }
2584
+ if (document.close !== undefined) {
2585
+ document.close();
2586
+ }
2587
+ images.cleanupDone = true;
2588
+ if (!(cause && typeof cause === "string")) {
2589
+ start();
2590
+ }
2591
+ }
2592
+ },
2593
+
2594
+ renderingDone: function() {
2595
+ if (timeoutTimer) {
2596
+ window.clearTimeout(timeoutTimer);
2597
+ }
2598
+ }
2599
+ };
2600
+
2601
+ if (options.timeout > 0) {
2602
+ timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
2603
+ }
2604
+
2605
+ Util.log('html2canvas: Preload starts: finding background-images');
2606
+ images.firstRun = true;
2607
+
2608
+ getImages(element);
2609
+
2610
+ Util.log('html2canvas: Preload: Finding images');
2611
+ // load <img> images
2612
+ for (i = 0; i < imgLen; i+=1){
2613
+ methods.loadImage( domImages[i].getAttribute( "src" ) );
2614
+ }
2615
+
2616
+ images.firstRun = false;
2617
+ Util.log('html2canvas: Preload: Done.');
2618
+ if (images.numTotal === images.numLoaded) {
2619
+ start();
2620
+ }
2621
+
2622
+ return methods;
2623
+};
2624
+
2625
+_html2canvas.Renderer = function(parseQueue, options){
2626
+ function sortZindex(a, b) {
2627
+ if (a === 'children') {
2628
+ return -1;
2629
+ } else if (b === 'children') {
2630
+ return 1;
2631
+ } else {
2632
+ return a - b;
2633
+ }
2634
+ }
2635
+
2636
+ // http://www.w3.org/TR/CSS21/zindex.html
2637
+ function createRenderQueue(parseQueue) {
2638
+ var queue = [],
2639
+ rootContext;
2640
+
2641
+ rootContext = (function buildStackingContext(rootNode) {
2642
+ var rootContext = {};
2643
+ function insert(context, node, specialParent) {
2644
+ var zi = (node.zIndex.zindex === 'auto') ? 0 : Number(node.zIndex.zindex),
2645
+ contextForChildren = context, // the stacking context for children
2646
+ isPositioned = node.zIndex.isPositioned,
2647
+ isFloated = node.zIndex.isFloated,
2648
+ stub = {node: node},
2649
+ childrenDest = specialParent; // where children without z-index should be pushed into
2650
+
2651
+ if (node.zIndex.ownStacking) {
2652
+ contextForChildren = stub.context = {
2653
+ children: [{node:node, children: []}]
2654
+ };
2655
+ childrenDest = undefined;
2656
+ } else if (isPositioned || isFloated) {
2657
+ childrenDest = stub.children = [];
2658
+ }
2659
+
2660
+ if (zi === 0 && specialParent) {
2661
+ specialParent.push(stub);
2662
+ } else {
2663
+ if (!context[zi]) { context[zi] = []; }
2664
+ context[zi].push(stub);
2665
+ }
2666
+
2667
+ node.zIndex.children.forEach(function(childNode) {
2668
+ insert(contextForChildren, childNode, childrenDest);
2669
+ });
2670
+ }
2671
+ insert(rootContext, rootNode);
2672
+ return rootContext;
2673
+ })(parseQueue);
2674
+
2675
+ function sortZ(context) {
2676
+ Object.keys(context).sort(sortZindex).forEach(function(zi) {
2677
+ var nonPositioned = [],
2678
+ floated = [],
2679
+ positioned = [],
2680
+ list = [];
2681
+
2682
+ // positioned after static
2683
+ context[zi].forEach(function(v) {
2684
+ if (v.node.zIndex.isPositioned || v.node.zIndex.opacity < 1) {
2685
+ // http://www.w3.org/TR/css3-color/#transparency
2686
+ // non-positioned element with opactiy < 1 should be stacked as if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
2687
+ positioned.push(v);
2688
+ } else if (v.node.zIndex.isFloated) {
2689
+ floated.push(v);
2690
+ } else {
2691
+ nonPositioned.push(v);
2692
+ }
2693
+ });
2694
+
2695
+ (function walk(arr) {
2696
+ arr.forEach(function(v) {
2697
+ list.push(v);
2698
+ if (v.children) { walk(v.children); }
2699
+ });
2700
+ })(nonPositioned.concat(floated, positioned));
2701
+
2702
+ list.forEach(function(v) {
2703
+ if (v.context) {
2704
+ sortZ(v.context);
2705
+ } else {
2706
+ queue.push(v.node);
2707
+ }
2708
+ });
2709
+ });
2710
+ }
2711
+
2712
+ sortZ(rootContext);
2713
+
2714
+ return queue;
2715
+ }
2716
+
2717
+ function getRenderer(rendererName) {
2718
+ var renderer;
2719
+
2720
+ if (typeof options.renderer === "string" && _html2canvas.Renderer[rendererName] !== undefined) {
2721
+ renderer = _html2canvas.Renderer[rendererName](options);
2722
+ } else if (typeof rendererName === "function") {
2723
+ renderer = rendererName(options);
2724
+ } else {
2725
+ throw new Error("Unknown renderer");
2726
+ }
2727
+
2728
+ if ( typeof renderer !== "function" ) {
2729
+ throw new Error("Invalid renderer defined");
2730
+ }
2731
+ return renderer;
2732
+ }
2733
+
2734
+ return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas);
2735
+};
2736
+
2737
+_html2canvas.Util.Support = function (options, doc) {
2738
+
2739
+ function supportSVGRendering() {
2740
+ var img = new Image(),
2741
+ canvas = doc.createElement("canvas"),
2742
+ ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d");
2743
+ if (ctx === false) {
2744
+ return false;
2745
+ }
2746
+ canvas.width = canvas.height = 10;
2747
+ img.src = [
2748
+ "data:image/svg+xml,",
2749
+ "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>",
2750
+ "<foreignObject width='10' height='10'>",
2751
+ "<div xmlns='http://www.w3.org/1999/xhtml' style='width:10;height:10;'>",
2752
+ "sup",
2753
+ "</div>",
2754
+ "</foreignObject>",
2755
+ "</svg>"
2756
+ ].join("");
2757
+ try {
2758
+ ctx.drawImage(img, 0, 0);
2759
+ canvas.toDataURL();
2760
+ } catch(e) {
2761
+ return false;
2762
+ }
2763
+ _html2canvas.Util.log('html2canvas: Parse: SVG powered rendering available');
2764
+ return true;
2765
+ }
2766
+
2767
+ // Test whether we can use ranges to measure bounding boxes
2768
+ // Opera doesn't provide valid bounds.height/bottom even though it supports the method.
2769
+
2770
+ function supportRangeBounds() {
2771
+ var r, testElement, rangeBounds, rangeHeight, support = false;
2772
+
2773
+ if (doc.createRange) {
2774
+ r = doc.createRange();
2775
+ if (r.getBoundingClientRect) {
2776
+ testElement = doc.createElement('boundtest');
2777
+ testElement.style.height = "123px";
2778
+ testElement.style.display = "block";
2779
+ doc.body.appendChild(testElement);
2780
+
2781
+ r.selectNode(testElement);
2782
+ rangeBounds = r.getBoundingClientRect();
2783
+ rangeHeight = rangeBounds.height;
2784
+
2785
+ if (rangeHeight === 123) {
2786
+ support = true;
2787
+ }
2788
+ doc.body.removeChild(testElement);
2789
+ }
2790
+ }
2791
+
2792
+ return support;
2793
+ }
2794
+
2795
+ return {
2796
+ rangeBounds: supportRangeBounds(),
2797
+ svgRendering: options.svgRendering && supportSVGRendering()
2798
+ };
2799
+};
2800
+window.html2canvas = function(elements, opts) {
2801
+ elements = (elements.length) ? elements : [elements];
2802
+ var queue,
2803
+ canvas,
2804
+ options = {
2805
+ // general
2806
+ logging: false,
2807
+ elements: elements,
2808
+ background: "#fff",
2809
+
2810
+ // preload options
2811
+ proxy: null,
2812
+ timeout: 0, // no timeout
2813
+ useCORS: false, // try to load images as CORS (where available), before falling back to proxy
2814
+ allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true
2815
+
2816
+ // parse options
2817
+ svgRendering: false, // use svg powered rendering where available (FF11+)
2818
+ ignoreElements: "IFRAME|OBJECT|PARAM",
2819
+ useOverflow: true,
2820
+ letterRendering: false,
2821
+ chinese: false,
2822
+ async: false, // If true, parsing will not block, but if the user scrolls during parse the image can get weird
2823
+
2824
+ // render options
2825
+ width: null,
2826
+ height: null,
2827
+ taintTest: true, // do a taint test with all images before applying to canvas
2828
+ renderer: "Canvas"
2829
+ };
2830
+
2831
+ options = _html2canvas.Util.Extend(opts, options);
2832
+
2833
+ _html2canvas.logging = options.logging;
2834
+ options.complete = function( images ) {
2835
+
2836
+ if (typeof options.onpreloaded === "function") {
2837
+ if ( options.onpreloaded( images ) === false ) {
2838
+ return;
2839
+ }
2840
+ }
2841
+ _html2canvas.Parse( images, options, function(queue) {
2842
+ if (typeof options.onparsed === "function") {
2843
+ if ( options.onparsed( queue ) === false ) {
2844
+ return;
2845
+ }
2846
+ }
2847
+
2848
+ canvas = _html2canvas.Renderer( queue, options );
2849
+
2850
+ if (typeof options.onrendered === "function") {
2851
+ options.onrendered( canvas );
2852
+ }
2853
+ });
2854
+ };
2855
+
2856
+ // for pages without images, we still want this to be async, i.e. return methods before executing
2857
+ window.setTimeout( function(){
2858
+ _html2canvas.Preload( options );
2859
+ }, 0 );
2860
+
2861
+ return {
2862
+ render: function( queue, opts ) {
2863
+ return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );
2864
+ },
2865
+ parse: function( images, opts ) {
2866
+ return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );
2867
+ },
2868
+ preload: function( opts ) {
2869
+ return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );
2870
+ },
2871
+ log: _html2canvas.Util.log
2872
+ };
2873
+};
2874
+
2875
+window.html2canvas.log = _html2canvas.Util.log; // for renderers
2876
+window.html2canvas.Renderer = {
2877
+ Canvas: undefined // We are assuming this will be used
2878
+};
2879
+_html2canvas.Renderer.Canvas = function(options) {
2880
+ options = options || {};
2881
+
2882
+ var doc = document,
2883
+ safeImages = [],
2884
+ testCanvas = document.createElement("canvas"),
2885
+ testctx = testCanvas.getContext("2d"),
2886
+ Util = _html2canvas.Util,
2887
+ canvas = options.canvas || doc.createElement('canvas');
2888
+
2889
+ function createShape(ctx, args) {
2890
+ ctx.beginPath();
2891
+ args.forEach(function(arg) {
2892
+ ctx[arg.name].apply(ctx, arg['arguments']);
2893
+ });
2894
+ ctx.closePath();
2895
+ }
2896
+
2897
+ function safeImage(item) {
2898
+ if (safeImages.indexOf(item['arguments'][0].src) === -1) {
2899
+ testctx.drawImage(item['arguments'][0], 0, 0);
2900
+ try {
2901
+ testctx.getImageData(0, 0, 1, 1);
2902
+ } catch(e) {
2903
+ testCanvas = doc.createElement("canvas");
2904
+ testctx = testCanvas.getContext("2d");
2905
+ return false;
2906
+ }
2907
+ safeImages.push(item['arguments'][0].src);
2908
+ }
2909
+ return true;
2910
+ }
2911
+
2912
+ function renderItem(ctx, item) {
2913
+ switch(item.type){
2914
+ case "variable":
2915
+ ctx[item.name] = item['arguments'];
2916
+ break;
2917
+ case "function":
2918
+ switch(item.name) {
2919
+ case "createPattern":
2920
+ if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) {
2921
+ try {
2922
+ ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat");
2923
+ } catch(e) {
2924
+ Util.log("html2canvas: Renderer: Error creating pattern", e.message);
2925
+ }
2926
+ }
2927
+ break;
2928
+ case "drawShape":
2929
+ createShape(ctx, item['arguments']);
2930
+ break;
2931
+ case "drawImage":
2932
+ if (item['arguments'][8] > 0 && item['arguments'][7] > 0) {
2933
+ if (!options.taintTest || (options.taintTest && safeImage(item))) {
2934
+ ctx.drawImage.apply( ctx, item['arguments'] );
2935
+ }
2936
+ }
2937
+ break;
2938
+ default:
2939
+ ctx[item.name].apply(ctx, item['arguments']);
2940
+ }
2941
+ break;
2942
+ }
2943
+ }
2944
+
2945
+ return function(parsedData, options, document, queue, _html2canvas) {
2946
+ var ctx = canvas.getContext("2d"),
2947
+ newCanvas,
2948
+ bounds,
2949
+ fstyle,
2950
+ zStack = parsedData.stack;
2951
+
2952
+ canvas.width = canvas.style.width = options.width || zStack.ctx.width;
2953
+ canvas.height = canvas.style.height = options.height || zStack.ctx.height;
2954
+
2955
+ fstyle = ctx.fillStyle;
2956
+ ctx.fillStyle = (Util.isTransparent(parsedData.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
2957
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
2958
+ ctx.fillStyle = fstyle;
2959
+ queue.forEach(function(storageContext) {
2960
+ // set common settings for canvas
2961
+ ctx.textBaseline = "bottom";
2962
+ ctx.save();
2963
+
2964
+ if (storageContext.transform.matrix) {
2965
+ ctx.translate(storageContext.transform.origin[0], storageContext.transform.origin[1]);
2966
+ ctx.transform.apply(ctx, storageContext.transform.matrix);
2967
+ ctx.translate(-storageContext.transform.origin[0], -storageContext.transform.origin[1]);
2968
+ }
2969
+
2970
+ if (storageContext.clip){
2971
+ ctx.beginPath();
2972
+ ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
2973
+ ctx.clip();
2974
+ }
2975
+
2976
+ if (storageContext.ctx.storage) {
2977
+ storageContext.ctx.storage.forEach(function(item) {
2978
+ renderItem(ctx, item);
2979
+ });
2980
+ }
2981
+
2982
+ ctx.restore();
2983
+ });
2984
+
2985
+ Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
2986
+
2987
+ if (options.elements.length === 1) {
2988
+ if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {
2989
+ // crop image to the bounds of selected (single) element
2990
+ bounds = _html2canvas.Util.Bounds(options.elements[0]);
2991
+ newCanvas = document.createElement('canvas');
2992
+
2993
+
2994
+ newCanvas.width = Math.ceil(bounds.width);
2995
+ newCanvas.height = Math.ceil(bounds.height);
2996
+
2997
+ ctx = newCanvas.getContext("2d");
2998
+ ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
2999
+
3000
+
3001
+
3002
+ canvas = null;
3003
+ return newCanvas;
3004
+ }
3005
+ }
3006
+
3007
+ return canvas;
3008
+ };
3009
+};
3010
+})(window,document);
...
...
