<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" data-semver="2.1.1" data-require="jquery@2.1.1"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js" data-semver="3.4.6" data-require="d3@3.4.6"></script>
<script src="rgbcolor.js" type="text/javascript"></script>
<script src="StackBlur.js" type="text/javascript"></script>
<script src="canvg.js" type="text/javascript"></script>
<script src="FileSaver.js"></script>
<script src="jsPDF.js"></script>
<script src="png.js"></script>
<script src="zlib.js"></script>
<script src="jspdf.plugin.png_support.js" type="text/javascript"></script>
<script src="jspdf.plugin.addimage.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id="simple-bar-chart"></div>
<div id="line-chart-on-datetime"></div>
<div class="detail"></div>
<div class="row">
<a href="#" class="btn btn-primary" data-generated="false" id="testBtn">Convert To PDF</a>
</div>
<canvas id="canvas" width="900" height="400"></canvas>
<script>
$(document).ready(function(){
var data = [
{Date: '01/01/2014', Hits: 10},
{Date: '02/02/2014', Hits: 20},
{Date: '05/03/2014', Hits: 30},
{Date: '01/04/2014', Hits: 35},
{Date: '01/05/2014', Hits: 100},
{Date: '01/06/2014', Hits: 50},
{Date: '01/07/2014', Hits: 29},
{Date: '01/08/2014', Hits: 65},
{Date: '01/09/2014', Hits: 30},
{Date: '01/10/2014', Hits: 80},
{Date: '01/11/2014', Hits: 41},
{Date: '01/12/2014', Hits: 20}
];
var parseDate = d3.time.format('%d/%m/%Y').parse;
data.forEach(function(d){
d.Date = parseDate(d.Date);
});
simpleBarChart(data);
LineChartOnDatetime(data);
var doc = new jsPDF('portrait', 'pt', 'A4');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
$('#testBtn').on('click', function () {
var hasGenerated = $(this).data('generated');
var img = '';
if (hasGenerated == false)
{
$(this).data('generated', true);
var firstSvg = $('#simple-bar-chart'); // get svg tag
var content = $(firstSvg).html();
context.drawSvg(content);
img = canvas.toDataURL('image/png');
doc.setFontSize(10);
doc.text(35, 25, "first chart");
doc.addImage(img, 'PNG',0, 50, 600, 300);
doc.save('test.pdf');
}
else
{
doc = new jsPDF('portrait', 'pt', 'A4');
doc.setFontSize(10);
doc.text(35, 25, "first chart");
img = canvas.toDataURL('image/png');
doc.addImage(img, 'PNG',0, 50, 600, 300);
doc.save('test.pdf');
}
});
});
</script>
</body>
</html>
// Code goes here
var margin = { top: 30, right: 20, bottom: 30, left: 50 },
width = 900 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
radius = Math.min(width, height) / 2;
var LineChartOnDatetime = function(data){
// convert datetime string in data object to date object
//define x, y axis range (lengths of axis)
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
//define axis display params
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickSize(2);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickSize(2);
//lines needs to draw path
var lines = d3.svg.line()
.x(function(d){ return x(d.Date);})
.y(function(d){ return y(d.Hits);});
var svg = d3.select('#line-chart-on-datetime')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + 200)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// define chart axis domain (values in axis)
x.domain(d3.extent(data, function(d){return d.Date;}));
y.domain([0, d3.max(data, function(d){return d.Hits;})]);
//draw paths
svg.append('path')
.attr('class', 'line')
.attr('d', lines(data))
.style('stroke', 'steelblue')
.style('stroke-width', 2)
.style('fill', 'none');
//draw axis
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, ' + height + ')')
.call(xAxis)
.selectAll('text')
.style('text-anchor', 'end')
.style('font-size', '1.2em')
.attr('transform', function(d){
return 'rotate(-65)'
});
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
//circle shows the position of a value in the chart
svg.selectAll('circle')
.data(data)
.enter().append('circle')
.attr('fill', 'steelblue')//define the color of the circle
.attr('r', 3)
.attr('cx', function(d){ return x(d.Date); })
.attr('cy', function(d){ return y(d.Hits); })
.on('mouseover', function (d) {
var top = $(this).offset().top,
left = $(this).offset().left;
$('.detail').html('Date: ' + d.Date.toDateString() + ' - Clicks: ' + d.Hits);
$('.detail').css({
'left': left,
'top': top - 60
});
$('.detail').show();
})
.on('mouseout', function () { $('.detail').hide(); });
};
var simpleBarChart = function(data){
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1),
y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(d3.time.format('%d/%m/%Y'))
.tickSize(1);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickSize(1);
var svg = d3.select('#simple-bar-chart')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + 200)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
x.domain(data.map(function(d){return d.Date;}));
y.domain([0, d3.max(data, function(d){return d.Hits; })]);
svg.append('g')
.attr('class', 'x axis')
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll('text')
.style('text-anchor', 'end')
.style('font-size', '1.2em')
.attr('transform', function(d){
return 'rotate(-65)'
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d.Date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.Hits); })
.attr("height", function(d) { return height - y(d.Hits); })
.on('mouseover', function (d) {
var top = $(this).offset().top,
left = $(this).offset().left;
$('.detail').html('Date: ' + d.Date.toDateString() + ' - Clicks: ' + d.Hits);
$('.detail').css({
'left': left,
'top': top - 60
});
$('.detail').show();
})
.on('mouseout', function () { $('.detail').hide(); });
};
/* Styles go here */
.detail {
pointer-events: none;
position: absolute;
font-size: 18px;
text-align: center;
background: white;
padding: 10px 15px;
z-index: 5;
height: 30px;
line-height: 30px;
margin: 0 auto;
color: #21669e;
border-radius: 5px;
box-shadow: 0 0 0 1px #eeeeee;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: none;
}
.detail.active {
display: block;
}
.detail:after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
}
/**@preserve
* ====================================================================
* jsPDF PNG PlugIn
* Copyright (c) 2014 James Robb, https://github.com/jamesbrobb
*
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
* ====================================================================
*/
(function(jsPDFAPI) {
'use strict'
/*
* @see http://www.w3.org/TR/PNG-Chunks.html
*
Color Allowed Interpretation
Type Bit Depths
0 1,2,4,8,16 Each pixel is a grayscale sample.
2 8,16 Each pixel is an R,G,B triple.
3 1,2,4,8 Each pixel is a palette index;
a PLTE chunk must appear.
4 8,16 Each pixel is a grayscale sample,
followed by an alpha sample.
6 8,16 Each pixel is an R,G,B triple,
followed by an alpha sample.
*/
/*
* PNG filter method types
*
* @see http://www.w3.org/TR/PNG-Filters.html
* @see http://www.libpng.org/pub/png/book/chapter09.html
*
* This is what the value 'Predictor' in decode params relates to
*
* 15 is "optimal prediction", which means the prediction algorithm can change from line to line.
* In that case, you actually have to read the first byte off each line for the prediction algorthim (which should be 0-4, corresponding to PDF 10-14) and select the appropriate unprediction algorithm based on that byte.
*
0 None
1 Sub
2 Up
3 Average
4 Paeth
*/
var doesNotHavePngJS = function() {
return typeof PNG !== 'function' || typeof FlateStream !== 'function';
}
, canCompress = function(value) {
return value !== jsPDFAPI.image_compression.NONE && hasCompressionJS();
}
, hasCompressionJS = function() {
var inst = typeof Deflater === 'function';
if(!inst)
throw new Error("requires deflate.js for compression")
return inst;
}
, compressBytes = function(bytes, lineLength, colorsPerPixel, compression) {
var level = 5,
filter_method = filterUp;
switch(compression) {
case jsPDFAPI.image_compression.FAST:
level = 3;
filter_method = filterSub;
break;
case jsPDFAPI.image_compression.MEDIUM:
level = 6;
filter_method = filterAverage;
break;
case jsPDFAPI.image_compression.SLOW:
level = 9;
filter_method = filterPaeth;//uses to sum to choose best filter for each line
break;
}
bytes = applyPngFilterMethod(bytes, lineLength, colorsPerPixel, filter_method);
var header = new Uint8Array(createZlibHeader(level));
var checksum = adler32(bytes);
var deflate = new Deflater(level);
var a = deflate.append(bytes);
var cBytes = deflate.flush();
var len = header.length + a.length + cBytes.length;
var cmpd = new Uint8Array(len + 4);
cmpd.set(header);
cmpd.set(a, header.length);
cmpd.set(cBytes, header.length + a.length);
cmpd[len++] = (checksum >>> 24) & 0xff;
cmpd[len++] = (checksum >>> 16) & 0xff;
cmpd[len++] = (checksum >>> 8) & 0xff;
cmpd[len++] = checksum & 0xff;
return jsPDFAPI.arrayBufferToBinaryString(cmpd);
}
, createZlibHeader = function(bytes, level){
/*
* @see http://www.ietf.org/rfc/rfc1950.txt for zlib header
*/
var cm = 8;
var cinfo = Math.LOG2E * Math.log(0x8000) - 8;
var cmf = (cinfo << 4) | cm;
var hdr = cmf << 8;
var flevel = Math.min(3, ((level - 1) & 0xff) >> 1);
hdr |= (flevel << 6);
hdr |= 0;//FDICT
hdr += 31 - (hdr % 31);
return [cmf, (hdr & 0xff) & 0xff];
}
, adler32 = function(array, param) {
var adler = 1;
var s1 = adler & 0xffff,
s2 = (adler >>> 16) & 0xffff;
var len = array.length;
var tlen;
var i = 0;
while (len > 0) {
tlen = len > param ? param : len;
len -= tlen;
do {
s1 += array[i++];
s2 += s1;
} while (--tlen);
s1 %= 65521;
s2 %= 65521;
}
return ((s2 << 16) | s1) >>> 0;
}
, applyPngFilterMethod = function(bytes, lineLength, colorsPerPixel, filter_method) {
var lines = bytes.length / lineLength,
result = new Uint8Array(bytes.length + lines),
filter_methods = getFilterMethods(),
i = 0, line, prevLine, offset;
for(; i < lines; i++) {
offset = i * lineLength;
line = bytes.subarray(offset, offset + lineLength);
if(filter_method) {
result.set(filter_method(line, colorsPerPixel, prevLine), offset + i);
}else{
var j = 0,
len = filter_methods.length,
results = [];
for(; j < len; j++)
results[j] = filter_methods[j](line, colorsPerPixel, prevLine);
var ind = getIndexOfSmallestSum(results.concat());
result.set(results[ind], offset + i);
}
prevLine = line;
}
return result;
}
, filterNone = function(line, colorsPerPixel, prevLine) {
/*var result = new Uint8Array(line.length + 1);
result[0] = 0;
result.set(line, 1);*/
var result = Array.apply([], line);
result.unshift(0);
return result;
}
, filterSub = function(line, colorsPerPixel, prevLine) {
var result = [],
i = 0,
len = line.length,
left;
result[0] = 1;
for(; i < len; i++) {
left = line[i - colorsPerPixel] || 0;
result[i + 1] = (line[i] - left + 0x0100) & 0xff;
}
return result;
}
, filterUp = function(line, colorsPerPixel, prevLine) {
var result = [],
i = 0,
len = line.length,
up;
result[0] = 2;
for(; i < len; i++) {
up = prevLine && prevLine[i] || 0;
result[i + 1] = (line[i] - up + 0x0100) & 0xff;
}
return result;
}
, filterAverage = function(line, colorsPerPixel, prevLine) {
var result = [],
i = 0,
len = line.length,
left,
up;
result[0] = 3;
for(; i < len; i++) {
left = line[i - colorsPerPixel] || 0;
up = prevLine && prevLine[i] || 0;
result[i + 1] = (line[i] + 0x0100 - ((left + up) >>> 1)) & 0xff;
}
return result;
}
, filterPaeth = function(line, colorsPerPixel, prevLine) {
var result = [],
i = 0,
len = line.length,
left,
up,
upLeft,
paeth;
result[0] = 4;
for(; i < len; i++) {
left = line[i - colorsPerPixel] || 0;
up = prevLine && prevLine[i] || 0;
upLeft = prevLine && prevLine[i - colorsPerPixel] || 0;
paeth = paethPredictor(left, up, upLeft);
result[i + 1] = (line[i] - paeth + 0x0100) & 0xff;
}
return result;
}
,paethPredictor = function(left, up, upLeft) {
var p = left + up - upLeft,
pLeft = Math.abs(p - left),
pUp = Math.abs(p - up),
pUpLeft = Math.abs(p - upLeft);
return (pLeft <= pUp && pLeft <= pUpLeft) ? left : (pUp <= pUpLeft) ? up : upLeft;
}
, getFilterMethods = function() {
return [filterNone, filterSub, filterUp, filterAverage, filterPaeth];
}
,getIndexOfSmallestSum = function(arrays) {
var i = 0,
len = arrays.length,
sum, min, ind;
while(i < len) {
sum = absSum(arrays[i].slice(1));
if(sum < min || !min) {
min = sum;
ind = i;
}
i++;
}
return ind;
}
, absSum = function(array) {
var i = 0,
len = array.length,
sum = 0;
while(i < len)
sum += Math.abs(array[i++]);
return sum;
}
, logImg = function(img) {
console.log("width: " + img.width);
console.log("height: " + img.height);
console.log("bits: " + img.bits);
console.log("colorType: " + img.colorType);
console.log("transparency:");
console.log(img.transparency);
console.log("text:");
console.log(img.text);
console.log("compressionMethod: " + img.compressionMethod);
console.log("filterMethod: " + img.filterMethod);
console.log("interlaceMethod: " + img.interlaceMethod);
console.log("imgData:");
console.log(img.imgData);
console.log("palette:");
console.log(img.palette);
console.log("colors: " + img.colors);
console.log("colorSpace: " + img.colorSpace);
console.log("pixelBitlength: " + img.pixelBitlength);
console.log("hasAlphaChannel: " + img.hasAlphaChannel);
};
jsPDFAPI.processPNG = function(imageData, imageIndex, alias, compression, dataAsBinaryString) {
'use strict'
var colorSpace = this.color_spaces.DEVICE_RGB,
decode = this.decode.FLATE_DECODE,
bpc = 8,
img, dp, trns,
colors, pal, smask;
/* if(this.isString(imageData)) {
}*/
if(this.isArrayBuffer(imageData))
imageData = new Uint8Array(imageData);
if(this.isArrayBufferView(imageData)) {
if(doesNotHavePngJS())
throw new Error("PNG support requires png.js and zlib.js");
img = new PNG(imageData);
imageData = img.imgData;
bpc = img.bits;
colorSpace = img.colorSpace;
colors = img.colors;
//logImg(img);
/*
* colorType 6 - Each pixel is an R,G,B triple, followed by an alpha sample.
*
* colorType 4 - Each pixel is a grayscale sample, followed by an alpha sample.
*
* Extract alpha to create two separate images, using the alpha as a sMask
*/
if([4,6].indexOf(img.colorType) !== -1) {
/*
* processes 8 bit RGBA and grayscale + alpha images
*/
if(img.bits === 8) {
var pixelsArrayType = window['Uint' + img.pixelBitlength + 'Array'],
pixels = new pixelsArrayType(img.decodePixels().buffer),
len = pixels.length,
imgData = new Uint8Array(len * img.colors),
alphaData = new Uint8Array(len),
pDiff = img.pixelBitlength - img.bits,
i = 0, n = 0, pixel, pbl;
for(; i < len; i++) {
pixel = pixels[i];
pbl = 0;
while(pbl < pDiff) {
imgData[n++] = ( pixel >>> pbl ) & 0xff;
pbl = pbl + img.bits;
}
alphaData[i] = ( pixel >>> pbl ) & 0xff;
}
}
/*
* processes 16 bit RGBA and grayscale + alpha images
*/
if(img.bits === 16) {
var pixels = new Uint32Array(img.decodePixels().buffer),
len = pixels.length,
imgData = new Uint8Array((len * (32 / img.pixelBitlength) ) * img.colors),
alphaData = new Uint8Array(len * (32 / img.pixelBitlength) ),
hasColors = img.colors > 1,
i = 0, n = 0, a = 0, pixel;
while(i < len) {
pixel = pixels[i++];
imgData[n++] = (pixel >>> 0) & 0xFF;
if(hasColors) {
imgData[n++] = (pixel >>> 16) & 0xFF;
pixel = pixels[i++];
imgData[n++] = (pixel >>> 0) & 0xFF;
}
alphaData[a++] = (pixel >>> 16) & 0xFF;
}
bpc = 8;
}
if(canCompress(compression)) {
imageData = compressBytes(imgData, img.width * img.colors, img.colors, compression);
smask = compressBytes(alphaData, img.width, 1, compression);
}else{
imageData = imgData;
smask = alphaData;
decode = null;
}
}
/*
* Indexed png. Each pixel is a palette index.
*/
if(img.colorType === 3) {
colorSpace = this.color_spaces.INDEXED;
pal = img.palette;
if(img.transparency.indexed) {
var trans = img.transparency.indexed;
var total = 0,
i = 0,
len = trans.length;
for(; i<len; ++i)
total += trans[i];
total = total / 255;
/*
* a single color is specified as 100% transparent (0),
* so we set trns to use a /Mask with that index
*/
if(total === len - 1 && trans.indexOf(0) !== -1) {
trns = [trans.indexOf(0)];
/*
* there's more than one colour within the palette that specifies
* a transparency value less than 255, so we unroll the pixels to create an image sMask
*/
}else if(total !== len){
var pixels = img.decodePixels(),
alphaData = new Uint8Array(pixels.length),
i = 0,
len = pixels.length;
for(; i < len; i++)
alphaData[i] = trans[pixels[i]];
smask = compressBytes(alphaData, img.width, 1);
}
}
}
if(decode === this.decode.FLATE_DECODE)
dp = '/Predictor 15 /Colors '+ colors +' /BitsPerComponent '+ bpc +' /Columns '+ img.width;
else
//remove 'Predictor' as it applies to the type of png filter applied to its IDAT - we only apply with compression
dp = '/Colors '+ colors +' /BitsPerComponent '+ bpc +' /Columns '+ img.width;
if(this.isArrayBuffer(imageData) || this.isArrayBufferView(imageData))
imageData = this.arrayBufferToBinaryString(imageData);
if(smask && this.isArrayBuffer(smask) || this.isArrayBufferView(smask))
smask = this.arrayBufferToBinaryString(smask);
return this.createImageInfo(imageData, img.width, img.height, colorSpace,
bpc, decode, imageIndex, alias, dp, trns, pal, smask);
}
throw new Error("Unsupported PNG image data, try using JPEG instead.");
}
})(jsPDF.API)
/** @preserve
* jsPDF addImage plugin
* Copyright (c) 2012 Jason Siefken, https://github.com/siefkenj/
* 2013 Chris Dowling, https://github.com/gingerchris
* 2013 Trinh Ho, https://github.com/ineedfat
* 2013 Edwin Alejandro Perez, https://github.com/eaparango
* 2013 Norah Smith, https://github.com/burnburnrocket
* 2014 Diego Casorran, https://github.com/diegocr
* 2014 James Robb, https://github.com/jamesbrobb
*
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
;(function(jsPDFAPI) {
'use strict'
var namespace = 'addImage_',
supported_image_types = ['jpeg', 'jpg', 'png'];
// Image functionality ported from pdf.js
var putImage = function(img) {
var objectNumber = this.internal.newObject()
, out = this.internal.write
, putStream = this.internal.putStream
img['n'] = objectNumber
out('<</Type /XObject')
out('/Subtype /Image')
out('/Width ' + img['w'])
out('/Height ' + img['h'])
if (img['cs'] === this.color_spaces.INDEXED) {
out('/ColorSpace [/Indexed /DeviceRGB '
// if an indexed png defines more than one colour with transparency, we've created a smask
+ (img['pal'].length / 3 - 1) + ' ' + ('smask' in img ? objectNumber + 2 : objectNumber + 1)
+ ' 0 R]');
} else {
out('/ColorSpace /' + img['cs']);
if (img['cs'] === this.color_spaces.DEVICE_CMYK) {
out('/Decode [1 0 1 0 1 0 1 0]');
}
}
out('/BitsPerComponent ' + img['bpc']);
if ('f' in img) {
out('/Filter /' + img['f']);
}
if ('dp' in img) {
out('/DecodeParms <<' + img['dp'] + '>>');
}
if ('trns' in img && img['trns'].constructor == Array) {
var trns = '',
i = 0,
len = img['trns'].length;
for (; i < len; i++)
trns += (img['trns'][i] + ' ' + img['trns'][i] + ' ');
out('/Mask [' + trns + ']');
}
if ('smask' in img) {
out('/SMask ' + (objectNumber + 1) + ' 0 R');
}
out('/Length ' + img['data'].length + '>>');
putStream(img['data']);
out('endobj');
// Soft mask
if ('smask' in img) {
var dp = '/Predictor 15 /Colors 1 /BitsPerComponent ' + img['bpc'] + ' /Columns ' + img['w'];
var smask = {'w': img['w'], 'h': img['h'], 'cs': 'DeviceGray', 'bpc': img['bpc'], 'dp': dp, 'data': img['smask']};
if ('f' in img)
smask.f = img['f'];
putImage.call(this, smask);
}
//Palette
if (img['cs'] === this.color_spaces.INDEXED) {
this.internal.newObject();
//out('<< /Filter / ' + img['f'] +' /Length ' + img['pal'].length + '>>');
//putStream(zlib.compress(img['pal']));
out('<< /Length ' + img['pal'].length + '>>');
putStream(this.arrayBufferToBinaryString(new Uint8Array(img['pal'])));
out('endobj');
}
}
, putResourcesCallback = function() {
var images = this.internal.collections[namespace + 'images']
for ( var i in images ) {
putImage.call(this, images[i])
}
}
, putXObjectsDictCallback = function(){
var images = this.internal.collections[namespace + 'images']
, out = this.internal.write
, image
for (var i in images) {
image = images[i]
out(
'/I' + image['i']
, image['n']
, '0'
, 'R'
)
}
}
, checkCompressValue = function(value) {
if(value && typeof value === 'string')
value = value.toUpperCase();
return value in jsPDFAPI.image_compression ? value : jsPDFAPI.image_compression.NONE;
}
, getImages = function() {
var images = this.internal.collections[namespace + 'images'];
//first run, so initialise stuff
if(!images) {
this.internal.collections[namespace + 'images'] = images = {};
this.internal.events.subscribe('putResources', putResourcesCallback);
this.internal.events.subscribe('putXobjectDict', putXObjectsDictCallback);
}
return images;
}
, getImageIndex = function(images) {
var imageIndex = 0;
if (images){
// this is NOT the first time this method is ran on this instance of jsPDF object.
imageIndex = Object.keys ?
Object.keys(images).length :
(function(o){
var i = 0
for (var e in o){if(o.hasOwnProperty(e)){ i++ }}
return i
})(images)
}
return imageIndex;
}
, notDefined = function(value) {
return typeof value === 'undefined' || value === null;
}
, generateAliasFromData = function(data) {
return typeof data === 'string' && Array.prototype.reduce &&
data.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
}
, doesNotSupportImageType = function(type) {
return supported_image_types.indexOf(type) === -1;
}
, processMethodNotEnabled = function(type) {
return typeof jsPDFAPI['process' + type.toUpperCase()] !== 'function';
}
, isDOMElement = function(object) {
return typeof object === 'object' && object.nodeType === 1;
}
, createDataURIFromElement = function(element, format) {
//if element is an image which uses data url defintion, just return the dataurl
if (element.nodeName === 'IMG' && element.hasAttribute('src')) {
var src = ''+element.getAttribute('src');
if (src.indexOf('data:image/') === 0) return src;
// only if the user doesn't care about a format
if (!format && /\.png(?:[?#].*)?$/i.test(src)) format = 'png';
}
if(element.nodeName === 'CANVAS') {
var canvas = element;
} else {
var canvas = document.createElement('canvas');
canvas.width = element.clientWidth || element.width;
canvas.height = element.clientHeight || element.height;
var ctx = canvas.getContext('2d');
if (!ctx) {
throw ('addImage requires canvas to be supported by browser.');
}
ctx.drawImage(element, 0, 0, canvas.width, canvas.height);
}
return canvas.toDataURL((''+format).toLowerCase() == 'png' ? 'image/png' : 'image/jpeg');
}
,checkImagesForAlias = function(alias, images) {
var cached_info;
if(images) {
for(var e in images) {
if(alias === images[e].alias) {
cached_info = images[e];
break;
}
}
}
return cached_info;
}
,determineWidthAndHeight = function(w, h, info) {
if (!w && !h) {
w = -96;
h = -96;
}
if (w < 0) {
w = (-1) * info['w'] * 72 / w / this.internal.scaleFactor;
}
if (h < 0) {
h = (-1) * info['h'] * 72 / h / this.internal.scaleFactor;
}
if (w === 0) {
w = h * info['w'] / info['h'];
}
if (h === 0) {
h = w * info['h'] / info['w'];
}
return [w, h];
}
, writeImageToPDF = function(x, y, w, h, info, index, images) {
var dims = determineWidthAndHeight.call(this, w, h, info),
coord = this.internal.getCoordinateString,
vcoord = this.internal.getVerticalCoordinateString;
w = dims[0];
h = dims[1];
images[index] = info;
this.internal.write(
'q'
, coord(w)
, '0 0'
, coord(h) // TODO: check if this should be shifted by vcoord
, coord(x)
, vcoord(y + h)
, 'cm /I'+info['i']
, 'Do Q'
)
};
/**
* COLOR SPACES
*/
jsPDFAPI.color_spaces = {
DEVICE_RGB:'DeviceRGB',
DEVICE_GRAY:'DeviceGray',
DEVICE_CMYK:'DeviceCMYK',
CAL_GREY:'CalGray',
CAL_RGB:'CalRGB',
LAB:'Lab',
ICC_BASED:'ICCBased',
INDEXED:'Indexed',
PATTERN:'Pattern',
SEPERATION:'Seperation',
DEVICE_N:'DeviceN'
};
/**
* DECODE METHODS
*/
jsPDFAPI.decode = {
DCT_DECODE:'DCTDecode',
FLATE_DECODE:'FlateDecode',
LZW_DECODE:'LZWDecode',
JPX_DECODE:'JPXDecode',
JBIG2_DECODE:'JBIG2Decode',
ASCII85_DECODE:'ASCII85Decode',
ASCII_HEX_DECODE:'ASCIIHexDecode',
RUN_LENGTH_DECODE:'RunLengthDecode',
CCITT_FAX_DECODE:'CCITTFaxDecode'
};
/**
* IMAGE COMPRESSION TYPES
*/
jsPDFAPI.image_compression = {
NONE: 'NONE',
FAST: 'FAST',
MEDIUM: 'MEDIUM',
SLOW: 'SLOW'
};
jsPDFAPI.isString = function(object) {
return typeof object === 'string';
};
/**
* Strips out and returns info from a valid base64 data URI
* @param {String[dataURI]} a valid data URI of format 'data:[<MIME-type>][;base64],<data>'
* @returns an Array containing the following
* [0] the complete data URI
* [1] <MIME-type>
* [2] format - the second part of the mime-type i.e 'png' in 'image/png'
* [4] <data>
*/
jsPDFAPI.extractInfoFromBase64DataURI = function(dataURI) {
return /^data:([\w]+?\/([\w]+?));base64,(.+?)$/g.exec(dataURI);
};
/**
* Check to see if ArrayBuffer is supported
*/
jsPDFAPI.supportsArrayBuffer = function() {
return typeof ArrayBuffer !== 'undefined' && typeof Uint8Array !== 'undefined';
};
/**
* Tests supplied object to determine if ArrayBuffer
* @param {Object[object]}
*/
jsPDFAPI.isArrayBuffer = function(object) {
if(!this.supportsArrayBuffer())
return false;
return object instanceof ArrayBuffer;
};
/**
* Tests supplied object to determine if it implements the ArrayBufferView (TypedArray) interface
* @param {Object[object]}
*/
jsPDFAPI.isArrayBufferView = function(object) {
if(!this.supportsArrayBuffer())
return false;
if(typeof Uint32Array === 'undefined')
return false;
return (object instanceof Int8Array ||
object instanceof Uint8Array ||
(typeof Uint8ClampedArray !== 'undefined' && object instanceof Uint8ClampedArray) ||
object instanceof Int16Array ||
object instanceof Uint16Array ||
object instanceof Int32Array ||
object instanceof Uint32Array ||
object instanceof Float32Array ||
object instanceof Float64Array );
};
/**
* Exactly what it says on the tin
*/
jsPDFAPI.binaryStringToUint8Array = function(binary_string) {
/*
* not sure how efficient this will be will bigger files. Is there a native method?
*/
var len = binary_string.length;
var bytes = new Uint8Array( len );
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes;
};
/**
* @see this discussion
* http://stackoverflow.com/questions/6965107/converting-between-strings-and-arraybuffers
*
* As stated, i imagine the method below is highly inefficent for large files.
*
* Also of note from Mozilla,
*
* "However, this is slow and error-prone, due to the need for multiple conversions (especially if the binary data is not actually byte-format data, but, for example, 32-bit integers or floats)."
*
* https://developer.mozilla.org/en-US/Add-ons/Code_snippets/StringView
*
* Although i'm strugglig to see how StringView solves this issue? Doesn't appear to be a direct method for conversion?
*
* Async method using Blob and FileReader could be best, but i'm not sure how to fit it into the flow?
*/
jsPDFAPI.arrayBufferToBinaryString = function(buffer) {
if(this.isArrayBuffer(buffer))
buffer = new Uint8Array(buffer);
var binary_string = '';
var len = buffer.byteLength;
for (var i = 0; i < len; i++) {
binary_string += String.fromCharCode(buffer[i]);
}
return binary_string;
/*
* Another solution is the method below - convert array buffer straight to base64 and then use atob
*/
//return atob(this.arrayBufferToBase64(buffer));
};
/**
* Converts an ArrayBuffer directly to base64
*
* Taken from here
*
* http://jsperf.com/encoding-xhr-image-data/31
*
* Need to test if this is a better solution for larger files
*
*/
jsPDFAPI.arrayBufferToBase64 = function(arrayBuffer) {
var base64 = ''
var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
var bytes = new Uint8Array(arrayBuffer)
var byteLength = bytes.byteLength
var byteRemainder = byteLength % 3
var mainLength = byteLength - byteRemainder
var a, b, c, d
var chunk
// Main loop deals with bytes in chunks of 3
for (var i = 0; i < mainLength; i = i + 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12 // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6 // 4032 = (2^6 - 1) << 6
d = chunk & 63 // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
}
// Deal with the remaining bytes and padding
if (byteRemainder == 1) {
chunk = bytes[mainLength]
a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4 // 3 = 2^2 - 1
base64 += encodings[a] + encodings[b] + '=='
} else if (byteRemainder == 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]
a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2 // 15 = 2^4 - 1
base64 += encodings[a] + encodings[b] + encodings[c] + '='
}
return base64
};
jsPDFAPI.createImageInfo = function(data, wd, ht, cs, bpc, f, imageIndex, alias, dp, trns, pal, smask) {
var info = {
alias:alias,
w : wd,
h : ht,
cs : cs,
bpc : bpc,
i : imageIndex,
data : data
// n: objectNumber will be added by putImage code
};
if(f) info.f = f;
if(dp) info.dp = dp;
if(trns) info.trns = trns;
if(pal) info.pal = pal;
if(smask) info.smask = smask;
return info;
};
jsPDFAPI.addImage = function(imageData, format, x, y, w, h, alias, compression) {
'use strict'
if(typeof format === 'number') {
var tmp = h;
h = w;
w = y;
y = x;
x = format;
format = tmp;
}
var images = getImages.call(this), info;
if (!(info = checkImagesForAlias(imageData, images))) {
var dataAsBinaryString;
if(isDOMElement(imageData))
imageData = createDataURIFromElement(imageData, format);
if(notDefined(alias))
alias = generateAliasFromData(imageData);
if (!(info = checkImagesForAlias(alias, images))) {
if(this.isString(imageData)) {
var base64Info = this.extractInfoFromBase64DataURI(imageData);
if(base64Info) {
format = base64Info[2];
imageData = atob(base64Info[3]);//convert to binary string
} else {
if (imageData.charCodeAt(0) === 0x89 &&
imageData.charCodeAt(1) === 0x50 &&
imageData.charCodeAt(2) === 0x4e &&
imageData.charCodeAt(3) === 0x47 ) format = 'png';
}
}
format = (format || 'JPEG').toLowerCase();
if(doesNotSupportImageType(format))
throw new Error('addImage currently only supports formats ' + supported_image_types + ', not \''+format+'\'');
if(processMethodNotEnabled(format))
throw new Error('please ensure that the plugin for \''+format+'\' support is added');
/**
* need to test if it's more efficent to convert all binary strings
* to TypedArray - or should we just leave and process as string?
*/
if(this.supportsArrayBuffer()) {
dataAsBinaryString = imageData;
imageData = this.binaryStringToUint8Array(imageData);
}
info = this['process' + format.toUpperCase()](
imageData,
getImageIndex(images),
alias,
checkCompressValue(compression),
dataAsBinaryString
);
if(!info)
throw new Error('An unkwown error occurred whilst processing the image');
}
}
writeImageToPDF.call(this, x, y, w, h, info, info.i, images);
return this
};
/**
* JPEG SUPPORT
**/
//takes a string imgData containing the raw bytes of
//a jpeg image and returns [width, height]
//Algorithm from: http://www.64lines.com/jpeg-width-height
var getJpegSize = function(imgData) {
'use strict'
var width, height, numcomponents;
// Verify we have a valid jpeg header 0xff,0xd8,0xff,0xe0,?,?,'J','F','I','F',0x00
if (!imgData.charCodeAt(0) === 0xff ||
!imgData.charCodeAt(1) === 0xd8 ||
!imgData.charCodeAt(2) === 0xff ||
!imgData.charCodeAt(3) === 0xe0 ||
!imgData.charCodeAt(6) === 'J'.charCodeAt(0) ||
!imgData.charCodeAt(7) === 'F'.charCodeAt(0) ||
!imgData.charCodeAt(8) === 'I'.charCodeAt(0) ||
!imgData.charCodeAt(9) === 'F'.charCodeAt(0) ||
!imgData.charCodeAt(10) === 0x00) {
throw new Error('getJpegSize requires a binary string jpeg file')
}
var blockLength = imgData.charCodeAt(4)*256 + imgData.charCodeAt(5);
var i = 4, len = imgData.length;
while ( i < len ) {
i += blockLength;
if (imgData.charCodeAt(i) !== 0xff) {
throw new Error('getJpegSize could not find the size of the image');
}
if (imgData.charCodeAt(i+1) === 0xc0 || //(SOF) Huffman - Baseline DCT
imgData.charCodeAt(i+1) === 0xc1 || //(SOF) Huffman - Extended sequential DCT
imgData.charCodeAt(i+1) === 0xc2 || // Progressive DCT (SOF2)
imgData.charCodeAt(i+1) === 0xc3 || // Spatial (sequential) lossless (SOF3)
imgData.charCodeAt(i+1) === 0xc4 || // Differential sequential DCT (SOF5)
imgData.charCodeAt(i+1) === 0xc5 || // Differential progressive DCT (SOF6)
imgData.charCodeAt(i+1) === 0xc6 || // Differential spatial (SOF7)
imgData.charCodeAt(i+1) === 0xc7) {
height = imgData.charCodeAt(i+5)*256 + imgData.charCodeAt(i+6);
width = imgData.charCodeAt(i+7)*256 + imgData.charCodeAt(i+8);
numcomponents = imgData.charCodeAt(i+9);
return [width, height, numcomponents];
} else {
i += 2;
blockLength = imgData.charCodeAt(i)*256 + imgData.charCodeAt(i+1)
}
}
}
, getJpegSizeFromBytes = function(data) {
var hdr = (data[0] << 8) | data[1];
if(hdr !== 0xFFD8)
throw new Error('Supplied data is not a JPEG');
var len = data.length,
block = (data[4] << 8) + data[5],
pos = 4,
bytes, width, height, numcomponents;
while(pos < len) {
pos += block;
bytes = readBytes(data, pos);
block = (bytes[2] << 8) + bytes[3];
if((bytes[1] === 0xC0 || bytes[1] === 0xC2) && bytes[0] === 0xFF && block > 7) {
bytes = readBytes(data, pos + 5);
width = (bytes[2] << 8) + bytes[3];
height = (bytes[0] << 8) + bytes[1];
numcomponents = bytes[4];
return {width:width, height:height, numcomponents: numcomponents};
}
pos+=2;
}
throw new Error('getJpegSizeFromBytes could not find the size of the image');
}
, readBytes = function(data, offset) {
return data.subarray(offset, offset+ 5);
};
jsPDFAPI.processJPEG = function(data, index, alias, compression, dataAsBinaryString) {
'use strict'
var colorSpace = this.color_spaces.DEVICE_RGB,
filter = this.decode.DCT_DECODE,
bpc = 8,
dims;
if(this.isString(data)) {
dims = getJpegSize(data);
return this.createImageInfo(data, dims[0], dims[1], dims[3] == 1 ? this.color_spaces.DEVICE_GRAY:colorSpace, bpc, filter, index, alias);
}
if(this.isArrayBuffer(data))
data = new Uint8Array(data);
if(this.isArrayBufferView(data)) {
dims = getJpegSizeFromBytes(data);
// if we already have a stored binary string rep use that
data = dataAsBinaryString || this.arrayBufferToBinaryString(data);
return this.createImageInfo(data, dims.width, dims.height, dims.numcomponents == 1 ? this.color_spaces.DEVICE_GRAY:colorSpace, bpc, filter, index, alias);
}
return null;
};
jsPDFAPI.processJPG = function(/*data, index, alias, compression, dataAsBinaryString*/) {
return this.processJPEG.apply(this, arguments);
}
})(jsPDF.API);
/**
* A class to parse color values
* @author Stoyan Stefanov <sstoo@gmail.com>
* @link http://www.phpied.com/rgb-color-parser-in-javascript/
* @license Use it if you like it
*/
function RGBColor(color_string)
{
this.ok = false;
// strip any leading #
if (color_string.charAt(0) == '#') { // remove # if any
color_string = color_string.substr(1,6);
}
color_string = color_string.replace(/ /g,'');
color_string = color_string.toLowerCase();
// before getting into regexps, try simple matches
// and overwrite the input
var simple_colors = {
aliceblue: 'f0f8ff',
antiquewhite: 'faebd7',
aqua: '00ffff',
aquamarine: '7fffd4',
azure: 'f0ffff',
beige: 'f5f5dc',
bisque: 'ffe4c4',
black: '000000',
blanchedalmond: 'ffebcd',
blue: '0000ff',
blueviolet: '8a2be2',
brown: 'a52a2a',
burlywood: 'deb887',
cadetblue: '5f9ea0',
chartreuse: '7fff00',
chocolate: 'd2691e',
coral: 'ff7f50',
cornflowerblue: '6495ed',
cornsilk: 'fff8dc',
crimson: 'dc143c',
cyan: '00ffff',
darkblue: '00008b',
darkcyan: '008b8b',
darkgoldenrod: 'b8860b',
darkgray: 'a9a9a9',
darkgreen: '006400',
darkkhaki: 'bdb76b',
darkmagenta: '8b008b',
darkolivegreen: '556b2f',
darkorange: 'ff8c00',
darkorchid: '9932cc',
darkred: '8b0000',
darksalmon: 'e9967a',
darkseagreen: '8fbc8f',
darkslateblue: '483d8b',
darkslategray: '2f4f4f',
darkturquoise: '00ced1',
darkviolet: '9400d3',
deeppink: 'ff1493',
deepskyblue: '00bfff',
dimgray: '696969',
dodgerblue: '1e90ff',
feldspar: 'd19275',
firebrick: 'b22222',
floralwhite: 'fffaf0',
forestgreen: '228b22',
fuchsia: 'ff00ff',
gainsboro: 'dcdcdc',
ghostwhite: 'f8f8ff',
gold: 'ffd700',
goldenrod: 'daa520',
gray: '808080',
green: '008000',
greenyellow: 'adff2f',
honeydew: 'f0fff0',
hotpink: 'ff69b4',
indianred : 'cd5c5c',
indigo : '4b0082',
ivory: 'fffff0',
khaki: 'f0e68c',
lavender: 'e6e6fa',
lavenderblush: 'fff0f5',
lawngreen: '7cfc00',
lemonchiffon: 'fffacd',
lightblue: 'add8e6',
lightcoral: 'f08080',
lightcyan: 'e0ffff',
lightgoldenrodyellow: 'fafad2',
lightgrey: 'd3d3d3',
lightgreen: '90ee90',
lightpink: 'ffb6c1',
lightsalmon: 'ffa07a',
lightseagreen: '20b2aa',
lightskyblue: '87cefa',
lightslateblue: '8470ff',
lightslategray: '778899',
lightsteelblue: 'b0c4de',
lightyellow: 'ffffe0',
lime: '00ff00',
limegreen: '32cd32',
linen: 'faf0e6',
magenta: 'ff00ff',
maroon: '800000',
mediumaquamarine: '66cdaa',
mediumblue: '0000cd',
mediumorchid: 'ba55d3',
mediumpurple: '9370d8',
mediumseagreen: '3cb371',
mediumslateblue: '7b68ee',
mediumspringgreen: '00fa9a',
mediumturquoise: '48d1cc',
mediumvioletred: 'c71585',
midnightblue: '191970',
mintcream: 'f5fffa',
mistyrose: 'ffe4e1',
moccasin: 'ffe4b5',
navajowhite: 'ffdead',
navy: '000080',
oldlace: 'fdf5e6',
olive: '808000',
olivedrab: '6b8e23',
orange: 'ffa500',
orangered: 'ff4500',
orchid: 'da70d6',
palegoldenrod: 'eee8aa',
palegreen: '98fb98',
paleturquoise: 'afeeee',
palevioletred: 'd87093',
papayawhip: 'ffefd5',
peachpuff: 'ffdab9',
peru: 'cd853f',
pink: 'ffc0cb',
plum: 'dda0dd',
powderblue: 'b0e0e6',
purple: '800080',
red: 'ff0000',
rosybrown: 'bc8f8f',
royalblue: '4169e1',
saddlebrown: '8b4513',
salmon: 'fa8072',
sandybrown: 'f4a460',
seagreen: '2e8b57',
seashell: 'fff5ee',
sienna: 'a0522d',
silver: 'c0c0c0',
skyblue: '87ceeb',
slateblue: '6a5acd',
slategray: '708090',
snow: 'fffafa',
springgreen: '00ff7f',
steelblue: '4682b4',
tan: 'd2b48c',
teal: '008080',
thistle: 'd8bfd8',
tomato: 'ff6347',
turquoise: '40e0d0',
violet: 'ee82ee',
violetred: 'd02090',
wheat: 'f5deb3',
white: 'ffffff',
whitesmoke: 'f5f5f5',
yellow: 'ffff00',
yellowgreen: '9acd32'
};
for (var key in simple_colors) {
if (color_string == key) {
color_string = simple_colors[key];
}
}
// emd of simple type-in colors
// array of color definition objects
var color_defs = [
{
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
process: function (bits){
return [
parseInt(bits[1]),
parseInt(bits[2]),
parseInt(bits[3])
];
}
},
{
re: /^(\w{2})(\w{2})(\w{2})$/,
example: ['#00ff00', '336699'],
process: function (bits){
return [
parseInt(bits[1], 16),
parseInt(bits[2], 16),
parseInt(bits[3], 16)
];
}
},
{
re: /^(\w{1})(\w{1})(\w{1})$/,
example: ['#fb0', 'f0f'],
process: function (bits){
return [
parseInt(bits[1] + bits[1], 16),
parseInt(bits[2] + bits[2], 16),
parseInt(bits[3] + bits[3], 16)
];
}
}
];
// search through the definitions to find a match
for (var i = 0; i < color_defs.length; i++) {
var re = color_defs[i].re;
var processor = color_defs[i].process;
var bits = re.exec(color_string);
if (bits) {
channels = processor(bits);
this.r = channels[0];
this.g = channels[1];
this.b = channels[2];
this.ok = true;
}
}
// validate/cleanup values
this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b);
// some getters
this.toRGB = function () {
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
}
this.toHex = function () {
var r = this.r.toString(16);
var g = this.g.toString(16);
var b = this.b.toString(16);
if (r.length == 1) r = '0' + r;
if (g.length == 1) g = '0' + g;
if (b.length == 1) b = '0' + b;
return '#' + r + g + b;
}
// help
this.getHelpXML = function () {
var examples = new Array();
// add regexps
for (var i = 0; i < color_defs.length; i++) {
var example = color_defs[i].example;
for (var j = 0; j < example.length; j++) {
examples[examples.length] = example[j];
}
}
// add type-in colors
for (var sc in simple_colors) {
examples[examples.length] = sc;
}
var xml = document.createElement('ul');
xml.setAttribute('id', 'rgbcolor-examples');
for (var i = 0; i < examples.length; i++) {
try {
var list_item = document.createElement('li');
var list_color = new RGBColor(examples[i]);
var example_div = document.createElement('div');
example_div.style.cssText =
'margin: 3px; '
+ 'border: 1px solid black; '
+ 'background:' + list_color.toHex() + '; '
+ 'color:' + list_color.toHex()
;
example_div.appendChild(document.createTextNode('test'));
var list_item_value = document.createTextNode(
' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex()
);
list_item.appendChild(example_div);
list_item.appendChild(list_item_value);
xml.appendChild(list_item);
} catch(e){}
}
return xml;
}
}
/*
StackBlur - a fast almost Gaussian Blur For Canvas
Version: 0.5
Author: Mario Klingemann
Contact: mario@quasimondo.com
Website: http://www.quasimondo.com/StackBlurForCanvas
Twitter: @quasimondo
In case you find this class useful - especially in commercial projects -
I am not totally unhappy for a small donation to my PayPal account
mario@quasimondo.de
Or support me on flattr:
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
Copyright (c) 2010 Mario Klingemann
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/
var mul_table = [
512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,
454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,
482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,
437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,
497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,
320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,
446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,
329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,
505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,
399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,
324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,
268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,
451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,
385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,
332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];
var shg_table = [
9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23,
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ];
function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel )
{
var img = document.getElementById( imageID );
var w = img.naturalWidth;
var h = img.naturalHeight;
var canvas = document.getElementById( canvasID );
canvas.style.width = w + "px";
canvas.style.height = h + "px";
canvas.width = w;
canvas.height = h;
var context = canvas.getContext("2d");
context.clearRect( 0, 0, w, h );
context.drawImage( img, 0, 0 );
if ( isNaN(radius) || radius < 1 ) return;
if ( blurAlphaChannel )
stackBlurCanvasRGBA( canvasID, 0, 0, w, h, radius );
else
stackBlurCanvasRGB( canvasID, 0, 0, w, h, radius );
}
function stackBlurCanvasRGBA( id, top_x, top_y, width, height, radius )
{
if ( isNaN(radius) || radius < 1 ) return;
radius |= 0;
var canvas = document.getElementById( id );
var context = canvas.getContext("2d");
var imageData;
try {
try {
imageData = context.getImageData( top_x, top_y, width, height );
} catch(e) {
// NOTE: this part is supposedly only needed if you want to work with local files
// so it might be okay to remove the whole try/catch block and just use
// imageData = context.getImageData( top_x, top_y, width, height );
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
imageData = context.getImageData( top_x, top_y, width, height );
} catch(e) {
alert("Cannot access local image");
throw new Error("unable to access local image data: " + e);
return;
}
}
} catch(e) {
alert("Cannot access image");
throw new Error("unable to access image data: " + e);
}
var pixels = imageData.data;
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum,
r_out_sum, g_out_sum, b_out_sum, a_out_sum,
r_in_sum, g_in_sum, b_in_sum, a_in_sum,
pr, pg, pb, pa, rbs;
var div = radius + radius + 1;
var w4 = width << 2;
var widthMinus1 = width - 1;
var heightMinus1 = height - 1;
var radiusPlus1 = radius + 1;
var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;
var stackStart = new BlurStack();
var stack = stackStart;
for ( i = 1; i < div; i++ )
{
stack = stack.next = new BlurStack();
if ( i == radiusPlus1 ) var stackEnd = stack;
}
stack.next = stackStart;
var stackIn = null;
var stackOut = null;
yw = yi = 0;
var mul_sum = mul_table[radius];
var shg_sum = shg_table[radius];
for ( y = 0; y < height; y++ )
{
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] );
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
a_sum += sumFactor * pa;
stack = stackStart;
for( i = 0; i < radiusPlus1; i++ )
{
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack.a = pa;
stack = stack.next;
}
for( i = 1; i < radiusPlus1; i++ )
{
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs;
r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
a_in_sum += pa;
stack = stack.next;
}
stackIn = stackStart;
stackOut = stackEnd;
for ( x = 0; x < width; x++ )
{
pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum;
if ( pa != 0 )
{
pa = 255 / pa;
pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
} else {
pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
}
r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
a_sum -= a_out_sum;
r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
a_out_sum -= stackIn.a;
p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;
r_in_sum += ( stackIn.r = pixels[p]);
g_in_sum += ( stackIn.g = pixels[p+1]);
b_in_sum += ( stackIn.b = pixels[p+2]);
a_in_sum += ( stackIn.a = pixels[p+3]);
r_sum += r_in_sum;
g_sum += g_in_sum;
b_sum += b_in_sum;
a_sum += a_in_sum;
stackIn = stackIn.next;
r_out_sum += ( pr = stackOut.r );
g_out_sum += ( pg = stackOut.g );
b_out_sum += ( pb = stackOut.b );
a_out_sum += ( pa = stackOut.a );
r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
a_in_sum -= pa;
stackOut = stackOut.next;
yi += 4;
}
yw += width;
}
for ( x = 0; x < width; x++ )
{
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;
yi = x << 2;
r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]);
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
a_sum += sumFactor * pa;
stack = stackStart;
for( i = 0; i < radiusPlus1; i++ )
{
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack.a = pa;
stack = stack.next;
}
yp = width;
for( i = 1; i <= radius; i++ )
{
yi = ( yp + x ) << 2;
r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs;
r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
a_in_sum += pa;
stack = stack.next;
if( i < heightMinus1 )
{
yp += width;
}
}
yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for ( y = 0; y < height; y++ )
{
p = yi << 2;
pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum;
if ( pa > 0 )
{
pa = 255 / pa;
pixels[p] = ((r_sum * mul_sum) >> shg_sum ) * pa;
pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa;
pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa;
} else {
pixels[p] = pixels[p+1] = pixels[p+2] = 0;
}
r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
a_sum -= a_out_sum;
r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
a_out_sum -= stackIn.a;
p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;
r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3]));
stackIn = stackIn.next;
r_out_sum += ( pr = stackOut.r );
g_out_sum += ( pg = stackOut.g );
b_out_sum += ( pb = stackOut.b );
a_out_sum += ( pa = stackOut.a );
r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
a_in_sum -= pa;
stackOut = stackOut.next;
yi += width;
}
}
context.putImageData( imageData, top_x, top_y );
}
function stackBlurCanvasRGB( id, top_x, top_y, width, height, radius )
{
if ( isNaN(radius) || radius < 1 ) return;
radius |= 0;
var canvas = document.getElementById( id );
var context = canvas.getContext("2d");
var imageData;
try {
try {
imageData = context.getImageData( top_x, top_y, width, height );
} catch(e) {
// NOTE: this part is supposedly only needed if you want to work with local files
// so it might be okay to remove the whole try/catch block and just use
// imageData = context.getImageData( top_x, top_y, width, height );
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
imageData = context.getImageData( top_x, top_y, width, height );
} catch(e) {
alert("Cannot access local image");
throw new Error("unable to access local image data: " + e);
return;
}
}
} catch(e) {
alert("Cannot access image");
throw new Error("unable to access image data: " + e);
}
var pixels = imageData.data;
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum,
r_out_sum, g_out_sum, b_out_sum,
r_in_sum, g_in_sum, b_in_sum,
pr, pg, pb, rbs;
var div = radius + radius + 1;
var w4 = width << 2;
var widthMinus1 = width - 1;
var heightMinus1 = height - 1;
var radiusPlus1 = radius + 1;
var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;
var stackStart = new BlurStack();
var stack = stackStart;
for ( i = 1; i < div; i++ )
{
stack = stack.next = new BlurStack();
if ( i == radiusPlus1 ) var stackEnd = stack;
}
stack.next = stackStart;
var stackIn = null;
var stackOut = null;
yw = yi = 0;
var mul_sum = mul_table[radius];
var shg_sum = shg_table[radius];
for ( y = 0; y < height; y++ )
{
r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;
r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
stack = stackStart;
for( i = 0; i < radiusPlus1; i++ )
{
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack = stack.next;
}
for( i = 1; i < radiusPlus1; i++ )
{
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
stack = stack.next;
}
stackIn = stackStart;
stackOut = stackEnd;
for ( x = 0; x < width; x++ )
{
pixels[yi] = (r_sum * mul_sum) >> shg_sum;
pixels[yi+1] = (g_sum * mul_sum) >> shg_sum;
pixels[yi+2] = (b_sum * mul_sum) >> shg_sum;
r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;
r_in_sum += ( stackIn.r = pixels[p]);
g_in_sum += ( stackIn.g = pixels[p+1]);
b_in_sum += ( stackIn.b = pixels[p+2]);
r_sum += r_in_sum;
g_sum += g_in_sum;
b_sum += b_in_sum;
stackIn = stackIn.next;
r_out_sum += ( pr = stackOut.r );
g_out_sum += ( pg = stackOut.g );
b_out_sum += ( pb = stackOut.b );
r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
stackOut = stackOut.next;
yi += 4;
}
yw += width;
}
for ( x = 0; x < width; x++ )
{
g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;
yi = x << 2;
r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
stack = stackStart;
for( i = 0; i < radiusPlus1; i++ )
{
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack = stack.next;
}
yp = width;
for( i = 1; i <= radius; i++ )
{
yi = ( yp + x ) << 2;
r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
stack = stack.next;
if( i < heightMinus1 )
{
yp += width;
}
}
yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for ( y = 0; y < height; y++ )
{
p = yi << 2;
pixels[p] = (r_sum * mul_sum) >> shg_sum;
pixels[p+1] = (g_sum * mul_sum) >> shg_sum;
pixels[p+2] = (b_sum * mul_sum) >> shg_sum;
r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;
r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
stackIn = stackIn.next;
r_out_sum += ( pr = stackOut.r );
g_out_sum += ( pg = stackOut.g );
b_out_sum += ( pb = stackOut.b );
r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
stackOut = stackOut.next;
yi += width;
}
}
context.putImageData( imageData, top_x, top_y );
}
function BlurStack()
{
this.r = 0;
this.g = 0;
this.b = 0;
this.a = 0;
this.next = null;
}
/*
* canvg.js - Javascript SVG parser and renderer on Canvas
* MIT Licensed
* Gabe Lerner (gabelerner@gmail.com)
* http://code.google.com/p/canvg/
*
* Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/
*/
(function(){
// canvg(target, s)
// empty parameters: replace all 'svg' elements on page with 'canvas' elements
// target: canvas element or the id of a canvas element
// s: svg string, url to svg file, or xml document
// opts: optional hash of options
// ignoreMouse: true => ignore mouse events
// ignoreAnimation: true => ignore animations
// ignoreDimensions: true => does not try to resize canvas
// ignoreClear: true => does not clear canvas
// offsetX: int => draws at a x offset
// offsetY: int => draws at a y offset
// scaleWidth: int => scales horizontally to width
// scaleHeight: int => scales vertically to height
// renderCallback: function => will call the function after the first render is completed
// forceRedraw: function => will call the function on every frame, if it returns true, will redraw
this.canvg = function (target, s, opts) {
// no parameters
if (target == null && s == null && opts == null) {
var svgTags = document.querySelectorAll('svg');
for (var i=0; i<svgTags.length; i++) {
var svgTag = svgTags[i];
var c = document.createElement('canvas');
c.width = svgTag.clientWidth;
c.height = svgTag.clientHeight;
svgTag.parentNode.insertBefore(c, svgTag);
svgTag.parentNode.removeChild(svgTag);
var div = document.createElement('div');
div.appendChild(svgTag);
canvg(c, div.innerHTML);
}
return;
}
if (typeof target == 'string') {
target = document.getElementById(target);
}
// store class on canvas
if (target.svg != null) target.svg.stop();
var svg = build(opts || {});
// on i.e. 8 for flash canvas, we can't assign the property so check for it
if (!(target.childNodes.length == 1 && target.childNodes[0].nodeName == 'OBJECT')) target.svg = svg;
var ctx = target.getContext('2d');
if (typeof(s.documentElement) != 'undefined') {
// load from xml doc
svg.loadXmlDoc(ctx, s);
}
else if (s.substr(0,1) == '<') {
// load from xml string
svg.loadXml(ctx, s);
}
else {
// load from url
svg.load(ctx, s);
}
}
function build(opts) {
var svg = { opts: opts };
svg.FRAMERATE = 30;
svg.MAX_VIRTUAL_PIXELS = 30000;
svg.log = function(msg) {};
if (svg.opts['log'] == true && typeof(console) != 'undefined') {
svg.log = function(msg) { console.log(msg); };
};
// globals
svg.init = function(ctx) {
var uniqueId = 0;
svg.UniqueId = function () { uniqueId++; return 'canvg' + uniqueId; };
svg.Definitions = {};
svg.Styles = {};
svg.Animations = [];
svg.Images = [];
svg.ctx = ctx;
svg.ViewPort = new (function () {
this.viewPorts = [];
this.Clear = function() { this.viewPorts = []; }
this.SetCurrent = function(width, height) { this.viewPorts.push({ width: width, height: height }); }
this.RemoveCurrent = function() { this.viewPorts.pop(); }
this.Current = function() { return this.viewPorts[this.viewPorts.length - 1]; }
this.width = function() { return this.Current().width; }
this.height = function() { return this.Current().height; }
this.ComputeSize = function(d) {
if (d != null && typeof(d) == 'number') return d;
if (d == 'x') return this.width();
if (d == 'y') return this.height();
return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);
}
});
}
svg.init();
// images loaded
svg.ImagesLoaded = function() {
for (var i=0; i<svg.Images.length; i++) {
if (!svg.Images[i].loaded) return false;
}
return true;
}
// trim
svg.trim = function(s) { return s.replace(/^\s+|\s+$/g, ''); }
// compress spaces
svg.compressSpaces = function(s) { return s.replace(/[\s\r\t\n]+/gm,' '); }
// ajax
svg.ajax = function(url) {
var AJAX;
if(window.XMLHttpRequest){AJAX=new XMLHttpRequest();}
else{AJAX=new ActiveXObject('Microsoft.XMLHTTP');}
if(AJAX){
AJAX.open('GET',url,false);
AJAX.send(null);
return AJAX.responseText;
}
return null;
}
// parse xml
svg.parseXml = function(xml) {
if (window.DOMParser)
{
var parser = new DOMParser();
return parser.parseFromString(xml, 'text/xml');
}
else
{
xml = xml.replace(/<!DOCTYPE svg[^>]*>/, '');
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = 'false';
xmlDoc.loadXML(xml);
return xmlDoc;
}
}
svg.Property = function(name, value) {
this.name = name;
this.value = value;
}
svg.Property.prototype.getValue = function() {
return this.value;
}
svg.Property.prototype.hasValue = function() {
return (this.value != null && this.value !== '');
}
// return the numerical value of the property
svg.Property.prototype.numValue = function() {
if (!this.hasValue()) return 0;
var n = parseFloat(this.value);
if ((this.value + '').match(/%$/)) {
n = n / 100.0;
}
return n;
}
svg.Property.prototype.valueOrDefault = function(def) {
if (this.hasValue()) return this.value;
return def;
}
svg.Property.prototype.numValueOrDefault = function(def) {
if (this.hasValue()) return this.numValue();
return def;
}
// color extensions
// augment the current color value with the opacity
svg.Property.prototype.addOpacity = function(opacityProp) {
var newValue = this.value;
if (opacityProp.value != null && opacityProp.value != '' && typeof(this.value)=='string') { // can only add opacity to colors, not patterns
var color = new RGBColor(this.value);
if (color.ok) {
newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacityProp.numValue() + ')';
}
}
return new svg.Property(this.name, newValue);
}
// definition extensions
// get the definition from the definitions table
svg.Property.prototype.getDefinition = function() {
var name = this.value.match(/#([^\)'"]+)/);
if (name) { name = name[1]; }
if (!name) { name = this.value; }
return svg.Definitions[name];
}
svg.Property.prototype.isUrlDefinition = function() {
return this.value.indexOf('url(') == 0
}
svg.Property.prototype.getFillStyleDefinition = function(e, opacityProp) {
var def = this.getDefinition();
// gradient
if (def != null && def.createGradient) {
return def.createGradient(svg.ctx, e, opacityProp);
}
// pattern
if (def != null && def.createPattern) {
if (def.getHrefAttribute().hasValue()) {
var pt = def.attribute('patternTransform');
def = def.getHrefAttribute().getDefinition();
if (pt.hasValue()) { def.attribute('patternTransform', true).value = pt.value; }
}
return def.createPattern(svg.ctx, e);
}
return null;
}
// length extensions
svg.Property.prototype.getDPI = function(viewPort) {
return 96.0; // TODO: compute?
}
svg.Property.prototype.getEM = function(viewPort) {
var em = 12;
var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
if (fontSize.hasValue()) em = fontSize.toPixels(viewPort);
return em;
}
svg.Property.prototype.getUnits = function() {
var s = this.value+'';
return s.replace(/[0-9\.\-]/g,'');
}
// get the length as pixels
svg.Property.prototype.toPixels = function(viewPort, processPercent) {
if (!this.hasValue()) return 0;
var s = this.value+'';
if (s.match(/em$/)) return this.numValue() * this.getEM(viewPort);
if (s.match(/ex$/)) return this.numValue() * this.getEM(viewPort) / 2.0;
if (s.match(/px$/)) return this.numValue();
if (s.match(/pt$/)) return this.numValue() * this.getDPI(viewPort) * (1.0 / 72.0);
if (s.match(/pc$/)) return this.numValue() * 15;
if (s.match(/cm$/)) return this.numValue() * this.getDPI(viewPort) / 2.54;
if (s.match(/mm$/)) return this.numValue() * this.getDPI(viewPort) / 25.4;
if (s.match(/in$/)) return this.numValue() * this.getDPI(viewPort);
if (s.match(/%$/)) return this.numValue() * svg.ViewPort.ComputeSize(viewPort);
var n = this.numValue();
if (processPercent && n < 1.0) return n * svg.ViewPort.ComputeSize(viewPort);
return n;
}
// time extensions
// get the time as milliseconds
svg.Property.prototype.toMilliseconds = function() {
if (!this.hasValue()) return 0;
var s = this.value+'';
if (s.match(/s$/)) return this.numValue() * 1000;
if (s.match(/ms$/)) return this.numValue();
return this.numValue();
}
// angle extensions
// get the angle as radians
svg.Property.prototype.toRadians = function() {
if (!this.hasValue()) return 0;
var s = this.value+'';
if (s.match(/deg$/)) return this.numValue() * (Math.PI / 180.0);
if (s.match(/grad$/)) return this.numValue() * (Math.PI / 200.0);
if (s.match(/rad$/)) return this.numValue();
return this.numValue() * (Math.PI / 180.0);
}
// text extensions
// get the text baseline
var textBaselineMapping = {
'baseline': 'alphabetic',
'before-edge': 'top',
'text-before-edge': 'top',
'middle': 'middle',
'central': 'middle',
'after-edge': 'bottom',
'text-after-edge': 'bottom',
'ideographic': 'ideographic',
'alphabetic': 'alphabetic',
'hanging': 'hanging',
'mathematical': 'alphabetic'
};
svg.Property.prototype.toTextBaseline = function () {
if (!this.hasValue()) return null;
return textBaselineMapping[this.value];
}
// fonts
svg.Font = new (function() {
this.Styles = 'normal|italic|oblique|inherit';
this.Variants = 'normal|small-caps|inherit';
this.Weights = 'normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit';
this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) {
var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font);
return {
fontFamily: fontFamily || f.fontFamily,
fontSize: fontSize || f.fontSize,
fontStyle: fontStyle || f.fontStyle,
fontWeight: fontWeight || f.fontWeight,
fontVariant: fontVariant || f.fontVariant,
toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') }
}
}
var that = this;
this.Parse = function(s) {
var f = {};
var d = svg.trim(svg.compressSpaces(s || '')).split(' ');
var set = { fontSize: false, fontStyle: false, fontWeight: false, fontVariant: false }
var ff = '';
for (var i=0; i<d.length; i++) {
if (!set.fontStyle && that.Styles.indexOf(d[i]) != -1) { if (d[i] != 'inherit') f.fontStyle = d[i]; set.fontStyle = true; }
else if (!set.fontVariant && that.Variants.indexOf(d[i]) != -1) { if (d[i] != 'inherit') f.fontVariant = d[i]; set.fontStyle = set.fontVariant = true; }
else if (!set.fontWeight && that.Weights.indexOf(d[i]) != -1) { if (d[i] != 'inherit') f.fontWeight = d[i]; set.fontStyle = set.fontVariant = set.fontWeight = true; }
else if (!set.fontSize) { if (d[i] != 'inherit') f.fontSize = d[i].split('/')[0]; set.fontStyle = set.fontVariant = set.fontWeight = set.fontSize = true; }
else { if (d[i] != 'inherit') ff += d[i]; }
} if (ff != '') f.fontFamily = ff;
return f;
}
});
// points and paths
svg.ToNumberArray = function(s) {
var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
for (var i=0; i<a.length; i++) {
a[i] = parseFloat(a[i]);
}
return a;
}
svg.Point = function(x, y) {
this.x = x;
this.y = y;
}
svg.Point.prototype.angleTo = function(p) {
return Math.atan2(p.y - this.y, p.x - this.x);
}
svg.Point.prototype.applyTransform = function(v) {
var xp = this.x * v[0] + this.y * v[2] + v[4];
var yp = this.x * v[1] + this.y * v[3] + v[5];
this.x = xp;
this.y = yp;
}
svg.CreatePoint = function(s) {
var a = svg.ToNumberArray(s);
return new svg.Point(a[0], a[1]);
}
svg.CreatePath = function(s) {
var a = svg.ToNumberArray(s);
var path = [];
for (var i=0; i<a.length; i+=2) {
path.push(new svg.Point(a[i], a[i+1]));
}
return path;
}
// bounding box
svg.BoundingBox = function(x1, y1, x2, y2) { // pass in initial points if you want
this.x1 = Number.NaN;
this.y1 = Number.NaN;
this.x2 = Number.NaN;
this.y2 = Number.NaN;
this.x = function() { return this.x1; }
this.y = function() { return this.y1; }
this.width = function() { return this.x2 - this.x1; }
this.height = function() { return this.y2 - this.y1; }
this.addPoint = function(x, y) {
if (x != null) {
if (isNaN(this.x1) || isNaN(this.x2)) {
this.x1 = x;
this.x2 = x;
}
if (x < this.x1) this.x1 = x;
if (x > this.x2) this.x2 = x;
}
if (y != null) {
if (isNaN(this.y1) || isNaN(this.y2)) {
this.y1 = y;
this.y2 = y;
}
if (y < this.y1) this.y1 = y;
if (y > this.y2) this.y2 = y;
}
}
this.addX = function(x) { this.addPoint(x, null); }
this.addY = function(y) { this.addPoint(null, y); }
this.addBoundingBox = function(bb) {
this.addPoint(bb.x1, bb.y1);
this.addPoint(bb.x2, bb.y2);
}
this.addQuadraticCurve = function(p0x, p0y, p1x, p1y, p2x, p2y) {
var cp1x = p0x + 2/3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0)
var cp1y = p0y + 2/3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0)
var cp2x = cp1x + 1/3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0)
var cp2y = cp1y + 1/3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0)
this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y, cp2y, p2x, p2y);
}
this.addBezierCurve = function(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
// from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y];
this.addPoint(p0[0], p0[1]);
this.addPoint(p3[0], p3[1]);
for (i=0; i<=1; i++) {
var f = function(t) {
return Math.pow(1-t, 3) * p0[i]
+ 3 * Math.pow(1-t, 2) * t * p1[i]
+ 3 * (1-t) * Math.pow(t, 2) * p2[i]
+ Math.pow(t, 3) * p3[i];
}
var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
var c = 3 * p1[i] - 3 * p0[i];
if (a == 0) {
if (b == 0) continue;
var t = -c / b;
if (0 < t && t < 1) {
if (i == 0) this.addX(f(t));
if (i == 1) this.addY(f(t));
}
continue;
}
var b2ac = Math.pow(b, 2) - 4 * c * a;
if (b2ac < 0) continue;
var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
if (0 < t1 && t1 < 1) {
if (i == 0) this.addX(f(t1));
if (i == 1) this.addY(f(t1));
}
var t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
if (0 < t2 && t2 < 1) {
if (i == 0) this.addX(f(t2));
if (i == 1) this.addY(f(t2));
}
}
}
this.isPointInBox = function(x, y) {
return (this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2);
}
this.addPoint(x1, y1);
this.addPoint(x2, y2);
}
// transforms
svg.Transform = function(v) {
var that = this;
this.Type = {}
// translate
this.Type.translate = function(s) {
this.p = svg.CreatePoint(s);
this.apply = function(ctx) {
ctx.translate(this.p.x || 0.0, this.p.y || 0.0);
}
this.unapply = function(ctx) {
ctx.translate(-1.0 * this.p.x || 0.0, -1.0 * this.p.y || 0.0);
}
this.applyToPoint = function(p) {
p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
}
}
// rotate
this.Type.rotate = function(s) {
var a = svg.ToNumberArray(s);
this.angle = new svg.Property('angle', a[0]);
this.cx = a[1] || 0;
this.cy = a[2] || 0;
this.apply = function(ctx) {
ctx.translate(this.cx, this.cy);
ctx.rotate(this.angle.toRadians());
ctx.translate(-this.cx, -this.cy);
}
this.unapply = function(ctx) {
ctx.translate(this.cx, this.cy);
ctx.rotate(-1.0 * this.angle.toRadians());
ctx.translate(-this.cx, -this.cy);
}
this.applyToPoint = function(p) {
var a = this.angle.toRadians();
p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]);
p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]);
}
}
this.Type.scale = function(s) {
this.p = svg.CreatePoint(s);
this.apply = function(ctx) {
ctx.scale(this.p.x || 1.0, this.p.y || this.p.x || 1.0);
}
this.unapply = function(ctx) {
ctx.scale(1.0 / this.p.x || 1.0, 1.0 / this.p.y || this.p.x || 1.0);
}
this.applyToPoint = function(p) {
p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]);
}
}
this.Type.matrix = function(s) {
this.m = svg.ToNumberArray(s);
this.apply = function(ctx) {
ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
}
this.unapply = function(ctx) {
ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], -1.0 * this.m[4], -1.0 * this.m[5]);
}
this.applyToPoint = function(p) {
p.applyTransform(this.m);
}
}
this.Type.SkewBase = function(s) {
this.base = that.Type.matrix;
this.base(s);
this.angle = new svg.Property('angle', s);
}
this.Type.SkewBase.prototype = new this.Type.matrix;
this.Type.skewX = function(s) {
this.base = that.Type.SkewBase;
this.base(s);
this.m = [1, 0, Math.tan(this.angle.toRadians()), 1, 0, 0];
}
this.Type.skewX.prototype = new this.Type.SkewBase;
this.Type.skewY = function(s) {
this.base = that.Type.SkewBase;
this.base(s);
this.m = [1, Math.tan(this.angle.toRadians()), 0, 1, 0, 0];
}
this.Type.skewY.prototype = new this.Type.SkewBase;
this.transforms = [];
this.apply = function(ctx) {
for (var i=0; i<this.transforms.length; i++) {
this.transforms[i].apply(ctx);
}
}
this.unapply = function(ctx) {
for (var i=this.transforms.length-1; i>=0; i--) {
this.transforms[i].unapply(ctx);
}
}
this.applyToPoint = function(p) {
for (var i=0; i<this.transforms.length; i++) {
this.transforms[i].applyToPoint(p);
}
}
var data = svg.trim(svg.compressSpaces(v)).replace(/\)([a-zA-Z])/g, ') $1').replace(/\)(\s?,\s?)/g,') ').split(/\s(?=[a-z])/);
for (var i=0; i<data.length; i++) {
var type = svg.trim(data[i].split('(')[0]);
var s = data[i].split('(')[1].replace(')','');
var transform = new this.Type[type](s);
transform.type = type;
this.transforms.push(transform);
}
}
// aspect ratio
svg.AspectRatio = function(ctx, aspectRatio, width, desiredWidth, height, desiredHeight, minX, minY, refX, refY) {
// aspect ratio - http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
aspectRatio = svg.compressSpaces(aspectRatio);
aspectRatio = aspectRatio.replace(/^defer\s/,''); // ignore defer
var align = aspectRatio.split(' ')[0] || 'xMidYMid';
var meetOrSlice = aspectRatio.split(' ')[1] || 'meet';
// calculate scale
var scaleX = width / desiredWidth;
var scaleY = height / desiredHeight;
var scaleMin = Math.min(scaleX, scaleY);
var scaleMax = Math.max(scaleX, scaleY);
if (meetOrSlice == 'meet') { desiredWidth *= scaleMin; desiredHeight *= scaleMin; }
if (meetOrSlice == 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; }
refX = new svg.Property('refX', refX);
refY = new svg.Property('refY', refY);
if (refX.hasValue() && refY.hasValue()) {
ctx.translate(-scaleMin * refX.toPixels('x'), -scaleMin * refY.toPixels('y'));
}
else {
// align
if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0);
if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0);
if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width - desiredWidth, 0);
if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height - desiredHeight);
}
// scale
if (align == 'none') ctx.scale(scaleX, scaleY);
else if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin);
else if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax);
// translate
ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY);
}
// elements
svg.Element = {}
svg.EmptyProperty = new svg.Property('EMPTY', '');
svg.Element.ElementBase = function(node) {
this.attributes = {};
this.styles = {};
this.children = [];
// get or create attribute
this.attribute = function(name, createIfNotExists) {
var a = this.attributes[name];
if (a != null) return a;
if (createIfNotExists == true) { a = new svg.Property(name, ''); this.attributes[name] = a; }
return a || svg.EmptyProperty;
}
this.getHrefAttribute = function() {
for (var a in this.attributes) {
if (a.match(/:href$/)) {
return this.attributes[a];
}
}
return svg.EmptyProperty;
}
// get or create style, crawls up node tree
this.style = function(name, createIfNotExists, skipAncestors) {
var s = this.styles[name];
if (s != null) return s;
var a = this.attribute(name);
if (a != null && a.hasValue()) {
this.styles[name] = a; // move up to me to cache
return a;
}
if (skipAncestors != true) {
var p = this.parent;
if (p != null) {
var ps = p.style(name);
if (ps != null && ps.hasValue()) {
return ps;
}
}
}
if (createIfNotExists == true) { s = new svg.Property(name, ''); this.styles[name] = s; }
return s || svg.EmptyProperty;
}
// base render
this.render = function(ctx) {
// don't render display=none
if (this.style('display').value == 'none') return;
// don't render visibility=hidden
if (this.style('visibility').value == 'hidden') return;
ctx.save();
if (this.attribute('mask').hasValue()) { // mask
var mask = this.attribute('mask').getDefinition();
if (mask != null) mask.apply(ctx, this);
}
else if (this.style('filter').hasValue()) { // filter
var filter = this.style('filter').getDefinition();
if (filter != null) filter.apply(ctx, this);
}
else {
this.setContext(ctx);
this.renderChildren(ctx);
this.clearContext(ctx);
}
ctx.restore();
}
// base set context
this.setContext = function(ctx) {
// OVERRIDE ME!
}
// base clear context
this.clearContext = function(ctx) {
// OVERRIDE ME!
}
// base render children
this.renderChildren = function(ctx) {
for (var i=0; i<this.children.length; i++) {
this.children[i].render(ctx);
}
}
this.addChild = function(childNode, create) {
var child = childNode;
if (create) child = svg.CreateElement(childNode);
child.parent = this;
if (child.type != 'title') { this.children.push(child); }
}
if (node != null && node.nodeType == 1) { //ELEMENT_NODE
// add attributes
for (var i=0; i<node.attributes.length; i++) {
var attribute = node.attributes[i];
this.attributes[attribute.nodeName] = new svg.Property(attribute.nodeName, attribute.nodeValue);
}
// add tag styles
var styles = svg.Styles[node.nodeName];
if (styles != null) {
for (var name in styles) {
this.styles[name] = styles[name];
}
}
// add class styles
if (this.attribute('class').hasValue()) {
var classes = svg.compressSpaces(this.attribute('class').value).split(' ');
for (var j=0; j<classes.length; j++) {
styles = svg.Styles['.'+classes[j]];
if (styles != null) {
for (var name in styles) {
this.styles[name] = styles[name];
}
}
styles = svg.Styles[node.nodeName+'.'+classes[j]];
if (styles != null) {
for (var name in styles) {
this.styles[name] = styles[name];
}
}
}
}
// add id styles
if (this.attribute('id').hasValue()) {
var styles = svg.Styles['#' + this.attribute('id').value];
if (styles != null) {
for (var name in styles) {
this.styles[name] = styles[name];
}
}
}
// add inline styles
if (this.attribute('style').hasValue()) {
var styles = this.attribute('style').value.split(';');
for (var i=0; i<styles.length; i++) {
if (svg.trim(styles[i]) != '') {
var style = styles[i].split(':');
var name = svg.trim(style[0]);
var value = svg.trim(style[1]);
this.styles[name] = new svg.Property(name, value);
}
}
}
// add id
if (this.attribute('id').hasValue()) {
if (svg.Definitions[this.attribute('id').value] == null) {
svg.Definitions[this.attribute('id').value] = this;
}
}
// add children
for (var i=0; i<node.childNodes.length; i++) {
var childNode = node.childNodes[i];
if (childNode.nodeType == 1) this.addChild(childNode, true); //ELEMENT_NODE
if (this.captureTextNodes && (childNode.nodeType == 3 || childNode.nodeType == 4)) {
var text = childNode.nodeValue || childNode.text || '';
if (svg.trim(svg.compressSpaces(text)) != '') {
this.addChild(new svg.Element.tspan(childNode), false); // TEXT_NODE
}
}
}
}
}
svg.Element.RenderedElementBase = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.setContext = function(ctx) {
// fill
if (this.style('fill').isUrlDefinition()) {
var fs = this.style('fill').getFillStyleDefinition(this, this.style('fill-opacity'));
if (fs != null) ctx.fillStyle = fs;
}
else if (this.style('fill').hasValue()) {
var fillStyle = this.style('fill');
if (fillStyle.value == 'currentColor') fillStyle.value = this.style('color').value;
ctx.fillStyle = (fillStyle.value == 'none' ? 'rgba(0,0,0,0)' : fillStyle.value);
}
if (this.style('fill-opacity').hasValue()) {
var fillStyle = new svg.Property('fill', ctx.fillStyle);
fillStyle = fillStyle.addOpacity(this.style('fill-opacity'));
ctx.fillStyle = fillStyle.value;
}
// stroke
if (this.style('stroke').isUrlDefinition()) {
var fs = this.style('stroke').getFillStyleDefinition(this, this.style('stroke-opacity'));
if (fs != null) ctx.strokeStyle = fs;
}
else if (this.style('stroke').hasValue()) {
var strokeStyle = this.style('stroke');
if (strokeStyle.value == 'currentColor') strokeStyle.value = this.style('color').value;
ctx.strokeStyle = (strokeStyle.value == 'none' ? 'rgba(0,0,0,0)' : strokeStyle.value);
}
if (this.style('stroke-opacity').hasValue()) {
var strokeStyle = new svg.Property('stroke', ctx.strokeStyle);
strokeStyle = strokeStyle.addOpacity(this.style('stroke-opacity'));
ctx.strokeStyle = strokeStyle.value;
}
if (this.style('stroke-width').hasValue()) {
var newLineWidth = this.style('stroke-width').toPixels();
ctx.lineWidth = newLineWidth == 0 ? 0.001 : newLineWidth; // browsers don't respect 0
}
if (this.style('stroke-linecap').hasValue()) ctx.lineCap = this.style('stroke-linecap').value;
if (this.style('stroke-linejoin').hasValue()) ctx.lineJoin = this.style('stroke-linejoin').value;
if (this.style('stroke-miterlimit').hasValue()) ctx.miterLimit = this.style('stroke-miterlimit').value;
if (this.style('stroke-dasharray').hasValue() && this.style('stroke-dasharray').value != 'none') {
var gaps = svg.ToNumberArray(this.style('stroke-dasharray').value);
if (typeof(ctx.setLineDash) != 'undefined') { ctx.setLineDash(gaps); }
else if (typeof(ctx.webkitLineDash) != 'undefined') { ctx.webkitLineDash = gaps; }
else if (typeof(ctx.mozDash) != 'undefined' && !(gaps.length==1 && gaps[0]==0)) { ctx.mozDash = gaps; }
var offset = this.style('stroke-dashoffset').numValueOrDefault(1);
if (typeof(ctx.lineDashOffset) != 'undefined') { ctx.lineDashOffset = offset; }
else if (typeof(ctx.webkitLineDashOffset) != 'undefined') { ctx.webkitLineDashOffset = offset; }
else if (typeof(ctx.mozDashOffset) != 'undefined') { ctx.mozDashOffset = offset; }
}
// font
if (typeof(ctx.font) != 'undefined') {
ctx.font = svg.Font.CreateFont(
this.style('font-style').value,
this.style('font-variant').value,
this.style('font-weight').value,
this.style('font-size').hasValue() ? this.style('font-size').toPixels() + 'px' : '',
this.style('font-family').value).toString();
}
// transform
if (this.attribute('transform').hasValue()) {
var transform = new svg.Transform(this.attribute('transform').value);
transform.apply(ctx);
}
// clip
if (this.style('clip-path', false, true).hasValue()) {
var clip = this.style('clip-path', false, true).getDefinition();
if (clip != null) clip.apply(ctx);
}
// opacity
if (this.style('opacity').hasValue()) {
ctx.globalAlpha = this.style('opacity').numValue();
}
}
}
svg.Element.RenderedElementBase.prototype = new svg.Element.ElementBase;
svg.Element.PathElementBase = function(node) {
this.base = svg.Element.RenderedElementBase;
this.base(node);
this.path = function(ctx) {
if (ctx != null) ctx.beginPath();
return new svg.BoundingBox();
}
this.renderChildren = function(ctx) {
this.path(ctx);
svg.Mouse.checkPath(this, ctx);
if (ctx.fillStyle != '') {
if (this.style('fill-rule').valueOrDefault('inherit') != 'inherit') { ctx.fill(this.style('fill-rule').value); }
else { ctx.fill(); }
}
if (ctx.strokeStyle != '') ctx.stroke();
var markers = this.getMarkers();
if (markers != null) {
if (this.style('marker-start').isUrlDefinition()) {
var marker = this.style('marker-start').getDefinition();
marker.render(ctx, markers[0][0], markers[0][1]);
}
if (this.style('marker-mid').isUrlDefinition()) {
var marker = this.style('marker-mid').getDefinition();
for (var i=1;i<markers.length-1;i++) {
marker.render(ctx, markers[i][0], markers[i][1]);
}
}
if (this.style('marker-end').isUrlDefinition()) {
var marker = this.style('marker-end').getDefinition();
marker.render(ctx, markers[markers.length-1][0], markers[markers.length-1][1]);
}
}
}
this.getBoundingBox = function() {
return this.path();
}
this.getMarkers = function() {
return null;
}
}
svg.Element.PathElementBase.prototype = new svg.Element.RenderedElementBase;
// svg element
svg.Element.svg = function(node) {
this.base = svg.Element.RenderedElementBase;
this.base(node);
this.baseClearContext = this.clearContext;
this.clearContext = function(ctx) {
this.baseClearContext(ctx);
svg.ViewPort.RemoveCurrent();
}
this.baseSetContext = this.setContext;
this.setContext = function(ctx) {
// initial values and defaults
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
if (typeof(ctx.font) != 'undefined' && typeof(window.getComputedStyle) != 'undefined') {
ctx.font = window.getComputedStyle(ctx.canvas).getPropertyValue('font');
}
this.baseSetContext(ctx);
// create new view port
if (!this.attribute('x').hasValue()) this.attribute('x', true).value = 0;
if (!this.attribute('y').hasValue()) this.attribute('y', true).value = 0;
ctx.translate(this.attribute('x').toPixels('x'), this.attribute('y').toPixels('y'));
var width = svg.ViewPort.width();
var height = svg.ViewPort.height();
if (!this.attribute('width').hasValue()) this.attribute('width', true).value = '100%';
if (!this.attribute('height').hasValue()) this.attribute('height', true).value = '100%';
if (typeof(this.root) == 'undefined') {
width = this.attribute('width').toPixels('x');
height = this.attribute('height').toPixels('y');
var x = 0;
var y = 0;
if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) {
x = -this.attribute('refX').toPixels('x');
y = -this.attribute('refY').toPixels('y');
}
if (this.attribute('overflow').valueOrDefault('hidden') != 'visible') {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(width, y);
ctx.lineTo(width, height);
ctx.lineTo(x, height);
ctx.closePath();
ctx.clip();
}
}
svg.ViewPort.SetCurrent(width, height);
// viewbox
if (this.attribute('viewBox').hasValue()) {
var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
var minX = viewBox[0];
var minY = viewBox[1];
width = viewBox[2];
height = viewBox[3];
svg.AspectRatio(ctx,
this.attribute('preserveAspectRatio').value,
svg.ViewPort.width(),
width,
svg.ViewPort.height(),
height,
minX,
minY,
this.attribute('refX').value,
this.attribute('refY').value);
svg.ViewPort.RemoveCurrent();
svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
}
}
}
svg.Element.svg.prototype = new svg.Element.RenderedElementBase;
// rect element
svg.Element.rect = function(node) {
this.base = svg.Element.PathElementBase;
this.base(node);
this.path = function(ctx) {
var x = this.attribute('x').toPixels('x');
var y = this.attribute('y').toPixels('y');
var width = this.attribute('width').toPixels('x');
var height = this.attribute('height').toPixels('y');
var rx = this.attribute('rx').toPixels('x');
var ry = this.attribute('ry').toPixels('y');
if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx;
if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry;
rx = Math.min(rx, width / 2.0);
ry = Math.min(ry, height / 2.0);
if (ctx != null) {
ctx.beginPath();
ctx.moveTo(x + rx, y);
ctx.lineTo(x + width - rx, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + ry)
ctx.lineTo(x + width, y + height - ry);
ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height)
ctx.lineTo(x + rx, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - ry)
ctx.lineTo(x, y + ry);
ctx.quadraticCurveTo(x, y, x + rx, y)
ctx.closePath();
}
return new svg.BoundingBox(x, y, x + width, y + height);
}
}
svg.Element.rect.prototype = new svg.Element.PathElementBase;
// circle element
svg.Element.circle = function(node) {
this.base = svg.Element.PathElementBase;
this.base(node);
this.path = function(ctx) {
var cx = this.attribute('cx').toPixels('x');
var cy = this.attribute('cy').toPixels('y');
var r = this.attribute('r').toPixels();
if (ctx != null) {
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
ctx.closePath();
}
return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r);
}
}
svg.Element.circle.prototype = new svg.Element.PathElementBase;
// ellipse element
svg.Element.ellipse = function(node) {
this.base = svg.Element.PathElementBase;
this.base(node);
this.path = function(ctx) {
var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
var rx = this.attribute('rx').toPixels('x');
var ry = this.attribute('ry').toPixels('y');
var cx = this.attribute('cx').toPixels('x');
var cy = this.attribute('cy').toPixels('y');
if (ctx != null) {
ctx.beginPath();
ctx.moveTo(cx, cy - ry);
ctx.bezierCurveTo(cx + (KAPPA * rx), cy - ry, cx + rx, cy - (KAPPA * ry), cx + rx, cy);
ctx.bezierCurveTo(cx + rx, cy + (KAPPA * ry), cx + (KAPPA * rx), cy + ry, cx, cy + ry);
ctx.bezierCurveTo(cx - (KAPPA * rx), cy + ry, cx - rx, cy + (KAPPA * ry), cx - rx, cy);
ctx.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);
ctx.closePath();
}
return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry);
}
}
svg.Element.ellipse.prototype = new svg.Element.PathElementBase;
// line element
svg.Element.line = function(node) {
this.base = svg.Element.PathElementBase;
this.base(node);
this.getPoints = function() {
return [
new svg.Point(this.attribute('x1').toPixels('x'), this.attribute('y1').toPixels('y')),
new svg.Point(this.attribute('x2').toPixels('x'), this.attribute('y2').toPixels('y'))];
}
this.path = function(ctx) {
var points = this.getPoints();
if (ctx != null) {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.lineTo(points[1].x, points[1].y);
}
return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y);
}
this.getMarkers = function() {
var points = this.getPoints();
var a = points[0].angleTo(points[1]);
return [[points[0], a], [points[1], a]];
}
}
svg.Element.line.prototype = new svg.Element.PathElementBase;
// polyline element
svg.Element.polyline = function(node) {
this.base = svg.Element.PathElementBase;
this.base(node);
this.points = svg.CreatePath(this.attribute('points').value);
this.path = function(ctx) {
var bb = new svg.BoundingBox(this.points[0].x, this.points[0].y);
if (ctx != null) {
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
}
for (var i=1; i<this.points.length; i++) {
bb.addPoint(this.points[i].x, this.points[i].y);
if (ctx != null) ctx.lineTo(this.points[i].x, this.points[i].y);
}
return bb;
}
this.getMarkers = function() {
var markers = [];
for (var i=0; i<this.points.length - 1; i++) {
markers.push([this.points[i], this.points[i].angleTo(this.points[i+1])]);
}
markers.push([this.points[this.points.length-1], markers[markers.length-1][1]]);
return markers;
}
}
svg.Element.polyline.prototype = new svg.Element.PathElementBase;
// polygon element
svg.Element.polygon = function(node) {
this.base = svg.Element.polyline;
this.base(node);
this.basePath = this.path;
this.path = function(ctx) {
var bb = this.basePath(ctx);
if (ctx != null) {
ctx.lineTo(this.points[0].x, this.points[0].y);
ctx.closePath();
}
return bb;
}
}
svg.Element.polygon.prototype = new svg.Element.polyline;
// path element
svg.Element.path = function(node) {
this.base = svg.Element.PathElementBase;
this.base(node);
var d = this.attribute('d').value;
// TODO: convert to real lexer based on http://www.w3.org/TR/SVG11/paths.html#PathDataBNF
d = d.replace(/,/gm,' '); // get rid of all commas
d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm,'$1 $2'); // separate commands from commands
d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm,'$1 $2'); // separate commands from commands
d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([^\s])/gm,'$1 $2'); // separate commands from points
d = d.replace(/([^\s])([MmZzLlHhVvCcSsQqTtAa])/gm,'$1 $2'); // separate commands from points
d = d.replace(/([0-9])([+\-])/gm,'$1 $2'); // separate digits when no comma
d = d.replace(/(\.[0-9]*)(\.)/gm,'$1 $2'); // separate digits when no comma
d = d.replace(/([Aa](\s+[0-9]+){3})\s+([01])\s*([01])/gm,'$1 $3 $4 '); // shorthand elliptical arc path syntax
d = svg.compressSpaces(d); // compress multiple spaces
d = svg.trim(d);
this.PathParser = new (function(d) {
this.tokens = d.split(' ');
this.reset = function() {
this.i = -1;
this.command = '';
this.previousCommand = '';
this.start = new svg.Point(0, 0);
this.control = new svg.Point(0, 0);
this.current = new svg.Point(0, 0);
this.points = [];
this.angles = [];
}
this.isEnd = function() {
return this.i >= this.tokens.length - 1;
}
this.isCommandOrEnd = function() {
if (this.isEnd()) return true;
return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null;
}
this.isRelativeCommand = function() {
switch(this.command)
{
case 'm':
case 'l':
case 'h':
case 'v':
case 'c':
case 's':
case 'q':
case 't':
case 'a':
case 'z':
return true;
break;
}
return false;
}
this.getToken = function() {
this.i++;
return this.tokens[this.i];
}
this.getScalar = function() {
return parseFloat(this.getToken());
}
this.nextCommand = function() {
this.previousCommand = this.command;
this.command = this.getToken();
}
this.getPoint = function() {
var p = new svg.Point(this.getScalar(), this.getScalar());
return this.makeAbsolute(p);
}
this.getAsControlPoint = function() {
var p = this.getPoint();
this.control = p;
return p;
}
this.getAsCurrentPoint = function() {
var p = this.getPoint();
this.current = p;
return p;
}
this.getReflectedControlPoint = function() {
if (this.previousCommand.toLowerCase() != 'c' &&
this.previousCommand.toLowerCase() != 's' &&
this.previousCommand.toLowerCase() != 'q' &&
this.previousCommand.toLowerCase() != 't' ){
return this.current;
}
// reflect point
var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);
return p;
}
this.makeAbsolute = function(p) {
if (this.isRelativeCommand()) {
p.x += this.current.x;
p.y += this.current.y;
}
return p;
}
this.addMarker = function(p, from, priorTo) {
// if the last angle isn't filled in because we didn't have this point yet ...
if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length-1] == null) {
this.angles[this.angles.length-1] = this.points[this.points.length-1].angleTo(priorTo);
}
this.addMarkerAngle(p, from == null ? null : from.angleTo(p));
}
this.addMarkerAngle = function(p, a) {
this.points.push(p);
this.angles.push(a);
}
this.getMarkerPoints = function() { return this.points; }
this.getMarkerAngles = function() {
for (var i=0; i<this.angles.length; i++) {
if (this.angles[i] == null) {
for (var j=i+1; j<this.angles.length; j++) {
if (this.angles[j] != null) {
this.angles[i] = this.angles[j];
break;
}
}
}
}
return this.angles;
}
})(d);
this.path = function(ctx) {
var pp = this.PathParser;
pp.reset();
var bb = new svg.BoundingBox();
if (ctx != null) ctx.beginPath();
while (!pp.isEnd()) {
pp.nextCommand();
switch (pp.command) {
case 'M':
case 'm':
var p = pp.getAsCurrentPoint();
pp.addMarker(p);
bb.addPoint(p.x, p.y);
if (ctx != null) ctx.moveTo(p.x, p.y);
pp.start = pp.current;
while (!pp.isCommandOrEnd()) {
var p = pp.getAsCurrentPoint();
pp.addMarker(p, pp.start);
bb.addPoint(p.x, p.y);
if (ctx != null) ctx.lineTo(p.x, p.y);
}
break;
case 'L':
case 'l':
while (!pp.isCommandOrEnd()) {
var c = pp.current;
var p = pp.getAsCurrentPoint();
pp.addMarker(p, c);
bb.addPoint(p.x, p.y);
if (ctx != null) ctx.lineTo(p.x, p.y);
}
break;
case 'H':
case 'h':
while (!pp.isCommandOrEnd()) {
var newP = new svg.Point((pp.isRelativeCommand() ? pp.current.x : 0) + pp.getScalar(), pp.current.y);
pp.addMarker(newP, pp.current);
pp.current = newP;
bb.addPoint(pp.current.x, pp.current.y);
if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
}
break;
case 'V':
case 'v':
while (!pp.isCommandOrEnd()) {
var newP = new svg.Point(pp.current.x, (pp.isRelativeCommand() ? pp.current.y : 0) + pp.getScalar());
pp.addMarker(newP, pp.current);
pp.current = newP;
bb.addPoint(pp.current.x, pp.current.y);
if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
}
break;
case 'C':
case 'c':
while (!pp.isCommandOrEnd()) {
var curr = pp.current;
var p1 = pp.getPoint();
var cntrl = pp.getAsControlPoint();
var cp = pp.getAsCurrentPoint();
pp.addMarker(cp, cntrl, p1);
bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
}
break;
case 'S':
case 's':
while (!pp.isCommandOrEnd()) {
var curr = pp.current;
var p1 = pp.getReflectedControlPoint();
var cntrl = pp.getAsControlPoint();
var cp = pp.getAsCurrentPoint();
pp.addMarker(cp, cntrl, p1);
bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
}
break;
case 'Q':
case 'q':
while (!pp.isCommandOrEnd()) {
var curr = pp.current;
var cntrl = pp.getAsControlPoint();
var cp = pp.getAsCurrentPoint();
pp.addMarker(cp, cntrl, cntrl);
bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y);
if (ctx != null) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y);
}
break;
case 'T':
case 't':
while (!pp.isCommandOrEnd()) {
var curr = pp.current;
var cntrl = pp.getReflectedControlPoint();
pp.control = cntrl;
var cp = pp.getAsCurrentPoint();
pp.addMarker(cp, cntrl, cntrl);
bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y);
if (ctx != null) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y);
}
break;
case 'A':
case 'a':
while (!pp.isCommandOrEnd()) {
var curr = pp.current;
var rx = pp.getScalar();
var ry = pp.getScalar();
var xAxisRotation = pp.getScalar() * (Math.PI / 180.0);
var largeArcFlag = pp.getScalar();
var sweepFlag = pp.getScalar();
var cp = pp.getAsCurrentPoint();
// Conversion from endpoint to center parameterization
// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
// x1', y1'
var currp = new svg.Point(
Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0,
-Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0
);
// adjust radii
var l = Math.pow(currp.x,2)/Math.pow(rx,2)+Math.pow(currp.y,2)/Math.pow(ry,2);
if (l > 1) {
rx *= Math.sqrt(l);
ry *= Math.sqrt(l);
}
// cx', cy'
var s = (largeArcFlag == sweepFlag ? -1 : 1) * Math.sqrt(
((Math.pow(rx,2)*Math.pow(ry,2))-(Math.pow(rx,2)*Math.pow(currp.y,2))-(Math.pow(ry,2)*Math.pow(currp.x,2))) /
(Math.pow(rx,2)*Math.pow(currp.y,2)+Math.pow(ry,2)*Math.pow(currp.x,2))
);
if (isNaN(s)) s = 0;
var cpp = new svg.Point(s * rx * currp.y / ry, s * -ry * currp.x / rx);
// cx, cy
var centp = new svg.Point(
(curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y,
(curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y
);
// vector magnitude
var m = function(v) { return Math.sqrt(Math.pow(v[0],2) + Math.pow(v[1],2)); }
// ratio between two vectors
var r = function(u, v) { return (u[0]*v[0]+u[1]*v[1]) / (m(u)*m(v)) }
// angle between two vectors
var a = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos(r(u,v)); }
// initial angle
var a1 = a([1,0], [(currp.x-cpp.x)/rx,(currp.y-cpp.y)/ry]);
// angle delta
var u = [(currp.x-cpp.x)/rx,(currp.y-cpp.y)/ry];
var v = [(-currp.x-cpp.x)/rx,(-currp.y-cpp.y)/ry];
var ad = a(u, v);
if (r(u,v) <= -1) ad = Math.PI;
if (r(u,v) >= 1) ad = 0;
// for markers
var dir = 1 - sweepFlag ? 1.0 : -1.0;
var ah = a1 + dir * (ad / 2.0);
var halfWay = new svg.Point(
centp.x + rx * Math.cos(ah),
centp.y + ry * Math.sin(ah)
);
pp.addMarkerAngle(halfWay, ah - dir * Math.PI / 2);
pp.addMarkerAngle(cp, ah - dir * Math.PI);
bb.addPoint(cp.x, cp.y); // TODO: this is too naive, make it better
if (ctx != null) {
var r = rx > ry ? rx : ry;
var sx = rx > ry ? 1 : rx / ry;
var sy = rx > ry ? ry / rx : 1;
ctx.translate(centp.x, centp.y);
ctx.rotate(xAxisRotation);
ctx.scale(sx, sy);
ctx.arc(0, 0, r, a1, a1 + ad, 1 - sweepFlag);
ctx.scale(1/sx, 1/sy);
ctx.rotate(-xAxisRotation);
ctx.translate(-centp.x, -centp.y);
}
}
break;
case 'Z':
case 'z':
if (ctx != null) ctx.closePath();
pp.current = pp.start;
}
}
return bb;
}
this.getMarkers = function() {
var points = this.PathParser.getMarkerPoints();
var angles = this.PathParser.getMarkerAngles();
var markers = [];
for (var i=0; i<points.length; i++) {
markers.push([points[i], angles[i]]);
}
return markers;
}
}
svg.Element.path.prototype = new svg.Element.PathElementBase;
// pattern element
svg.Element.pattern = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.createPattern = function(ctx, element) {
var width = this.attribute('width').toPixels('x', true);
var height = this.attribute('height').toPixels('y', true);
// render me using a temporary svg element
var tempSvg = new svg.Element.svg();
tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
tempSvg.attributes['width'] = new svg.Property('width', width + 'px');
tempSvg.attributes['height'] = new svg.Property('height', height + 'px');
tempSvg.attributes['transform'] = new svg.Property('transform', this.attribute('patternTransform').value);
tempSvg.children = this.children;
var c = document.createElement('canvas');
c.width = width;
c.height = height;
var cctx = c.getContext('2d');
if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) {
cctx.translate(this.attribute('x').toPixels('x', true), this.attribute('y').toPixels('y', true));
}
// render 3x3 grid so when we transform there's no white space on edges
for (var x=-1; x<=1; x++) {
for (var y=-1; y<=1; y++) {
cctx.save();
cctx.translate(x * c.width, y * c.height);
tempSvg.render(cctx);
cctx.restore();
}
}
var pattern = ctx.createPattern(c, 'repeat');
return pattern;
}
}
svg.Element.pattern.prototype = new svg.Element.ElementBase;
// marker element
svg.Element.marker = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.baseRender = this.render;
this.render = function(ctx, point, angle) {
ctx.translate(point.x, point.y);
if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(angle);
if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth);
ctx.save();
// render me using a temporary svg element
var tempSvg = new svg.Element.svg();
tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
tempSvg.attributes['refX'] = new svg.Property('refX', this.attribute('refX').value);
tempSvg.attributes['refY'] = new svg.Property('refY', this.attribute('refY').value);
tempSvg.attributes['width'] = new svg.Property('width', this.attribute('markerWidth').value);
tempSvg.attributes['height'] = new svg.Property('height', this.attribute('markerHeight').value);
tempSvg.attributes['fill'] = new svg.Property('fill', this.attribute('fill').valueOrDefault('black'));
tempSvg.attributes['stroke'] = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none'));
tempSvg.children = this.children;
tempSvg.render(ctx);
ctx.restore();
if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(1/ctx.lineWidth, 1/ctx.lineWidth);
if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(-angle);
ctx.translate(-point.x, -point.y);
}
}
svg.Element.marker.prototype = new svg.Element.ElementBase;
// definitions element
svg.Element.defs = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.render = function(ctx) {
// NOOP
}
}
svg.Element.defs.prototype = new svg.Element.ElementBase;
// base for gradients
svg.Element.GradientBase = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
this.stops = [];
for (var i=0; i<this.children.length; i++) {
var child = this.children[i];
if (child.type == 'stop') this.stops.push(child);
}
this.getGradient = function() {
// OVERRIDE ME!
}
this.createGradient = function(ctx, element, parentOpacityProp) {
var stopsContainer = this;
if (this.getHrefAttribute().hasValue()) {
stopsContainer = this.getHrefAttribute().getDefinition();
}
var addParentOpacity = function (color) {
if (parentOpacityProp.hasValue()) {
var p = new svg.Property('color', color);
return p.addOpacity(parentOpacityProp).value;
}
return color;
};
var g = this.getGradient(ctx, element);
if (g == null) return addParentOpacity(stopsContainer.stops[stopsContainer.stops.length - 1].color);
for (var i=0; i<stopsContainer.stops.length; i++) {
g.addColorStop(stopsContainer.stops[i].offset, addParentOpacity(stopsContainer.stops[i].color));
}
if (this.attribute('gradientTransform').hasValue()) {
// render as transformed pattern on temporary canvas
var rootView = svg.ViewPort.viewPorts[0];
var rect = new svg.Element.rect();
rect.attributes['x'] = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS/3.0);
rect.attributes['y'] = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS/3.0);
rect.attributes['width'] = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS);
rect.attributes['height'] = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS);
var group = new svg.Element.g();
group.attributes['transform'] = new svg.Property('transform', this.attribute('gradientTransform').value);
group.children = [ rect ];
var tempSvg = new svg.Element.svg();
tempSvg.attributes['x'] = new svg.Property('x', 0);
tempSvg.attributes['y'] = new svg.Property('y', 0);
tempSvg.attributes['width'] = new svg.Property('width', rootView.width);
tempSvg.attributes['height'] = new svg.Property('height', rootView.height);
tempSvg.children = [ group ];
var c = document.createElement('canvas');
c.width = rootView.width;
c.height = rootView.height;
var tempCtx = c.getContext('2d');
tempCtx.fillStyle = g;
tempSvg.render(tempCtx);
return tempCtx.createPattern(c, 'no-repeat');
}
return g;
}
}
svg.Element.GradientBase.prototype = new svg.Element.ElementBase;
// linear gradient element
svg.Element.linearGradient = function(node) {
this.base = svg.Element.GradientBase;
this.base(node);
this.getGradient = function(ctx, element) {
var bb = this.gradientUnits == 'objectBoundingBox' ? element.getBoundingBox() : null;
if (!this.attribute('x1').hasValue()
&& !this.attribute('y1').hasValue()
&& !this.attribute('x2').hasValue()
&& !this.attribute('y2').hasValue()) {
this.attribute('x1', true).value = 0;
this.attribute('y1', true).value = 0;
this.attribute('x2', true).value = 1;
this.attribute('y2', true).value = 0;
}
var x1 = (this.gradientUnits == 'objectBoundingBox'
? bb.x() + bb.width() * this.attribute('x1').numValue()
: this.attribute('x1').toPixels('x'));
var y1 = (this.gradientUnits == 'objectBoundingBox'
? bb.y() + bb.height() * this.attribute('y1').numValue()
: this.attribute('y1').toPixels('y'));
var x2 = (this.gradientUnits == 'objectBoundingBox'
? bb.x() + bb.width() * this.attribute('x2').numValue()
: this.attribute('x2').toPixels('x'));
var y2 = (this.gradientUnits == 'objectBoundingBox'
? bb.y() + bb.height() * this.attribute('y2').numValue()
: this.attribute('y2').toPixels('y'));
if (x1 == x2 && y1 == y2) return null;
return ctx.createLinearGradient(x1, y1, x2, y2);
}
}
svg.Element.linearGradient.prototype = new svg.Element.GradientBase;
// radial gradient element
svg.Element.radialGradient = function(node) {
this.base = svg.Element.GradientBase;
this.base(node);
this.getGradient = function(ctx, element) {
var bb = element.getBoundingBox();
if (!this.attribute('cx').hasValue()) this.attribute('cx', true).value = '50%';
if (!this.attribute('cy').hasValue()) this.attribute('cy', true).value = '50%';
if (!this.attribute('r').hasValue()) this.attribute('r', true).value = '50%';
var cx = (this.gradientUnits == 'objectBoundingBox'
? bb.x() + bb.width() * this.attribute('cx').numValue()
: this.attribute('cx').toPixels('x'));
var cy = (this.gradientUnits == 'objectBoundingBox'
? bb.y() + bb.height() * this.attribute('cy').numValue()
: this.attribute('cy').toPixels('y'));
var fx = cx;
var fy = cy;
if (this.attribute('fx').hasValue()) {
fx = (this.gradientUnits == 'objectBoundingBox'
? bb.x() + bb.width() * this.attribute('fx').numValue()
: this.attribute('fx').toPixels('x'));
}
if (this.attribute('fy').hasValue()) {
fy = (this.gradientUnits == 'objectBoundingBox'
? bb.y() + bb.height() * this.attribute('fy').numValue()
: this.attribute('fy').toPixels('y'));
}
var r = (this.gradientUnits == 'objectBoundingBox'
? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue()
: this.attribute('r').toPixels());
return ctx.createRadialGradient(fx, fy, 0, cx, cy, r);
}
}
svg.Element.radialGradient.prototype = new svg.Element.GradientBase;
// gradient stop element
svg.Element.stop = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.offset = this.attribute('offset').numValue();
if (this.offset < 0) this.offset = 0;
if (this.offset > 1) this.offset = 1;
var stopColor = this.style('stop-color');
if (this.style('stop-opacity').hasValue()) stopColor = stopColor.addOpacity(this.style('stop-opacity'));
this.color = stopColor.value;
}
svg.Element.stop.prototype = new svg.Element.ElementBase;
// animation base element
svg.Element.AnimateBase = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
svg.Animations.push(this);
this.duration = 0.0;
this.begin = this.attribute('begin').toMilliseconds();
this.maxDuration = this.begin + this.attribute('dur').toMilliseconds();
this.getProperty = function() {
var attributeType = this.attribute('attributeType').value;
var attributeName = this.attribute('attributeName').value;
if (attributeType == 'CSS') {
return this.parent.style(attributeName, true);
}
return this.parent.attribute(attributeName, true);
};
this.initialValue = null;
this.initialUnits = '';
this.removed = false;
this.calcValue = function() {
// OVERRIDE ME!
return '';
}
this.update = function(delta) {
// set initial value
if (this.initialValue == null) {
this.initialValue = this.getProperty().value;
this.initialUnits = this.getProperty().getUnits();
}
// if we're past the end time
if (this.duration > this.maxDuration) {
// loop for indefinitely repeating animations
if (this.attribute('repeatCount').value == 'indefinite'
|| this.attribute('repeatDur').value == 'indefinite') {
this.duration = 0.0
}
else if (this.attribute('fill').valueOrDefault('remove') == 'freeze' && !this.frozen) {
this.frozen = true;
this.parent.animationFrozen = true;
this.parent.animationFrozenValue = this.getProperty().value;
}
else if (this.attribute('fill').valueOrDefault('remove') == 'remove' && !this.removed) {
this.removed = true;
this.getProperty().value = this.parent.animationFrozen ? this.parent.animationFrozenValue : this.initialValue;
return true;
}
return false;
}
this.duration = this.duration + delta;
// if we're past the begin time
var updated = false;
if (this.begin < this.duration) {
var newValue = this.calcValue(); // tween
if (this.attribute('type').hasValue()) {
// for transform, etc.
var type = this.attribute('type').value;
newValue = type + '(' + newValue + ')';
}
this.getProperty().value = newValue;
updated = true;
}
return updated;
}
this.from = this.attribute('from');
this.to = this.attribute('to');
this.values = this.attribute('values');
if (this.values.hasValue()) this.values.value = this.values.value.split(';');
// fraction of duration we've covered
this.progress = function() {
var ret = { progress: (this.duration - this.begin) / (this.maxDuration - this.begin) };
if (this.values.hasValue()) {
var p = ret.progress * (this.values.value.length - 1);
var lb = Math.floor(p), ub = Math.ceil(p);
ret.from = new svg.Property('from', parseFloat(this.values.value[lb]));
ret.to = new svg.Property('to', parseFloat(this.values.value[ub]));
ret.progress = (p - lb) / (ub - lb);
}
else {
ret.from = this.from;
ret.to = this.to;
}
return ret;
}
}
svg.Element.AnimateBase.prototype = new svg.Element.ElementBase;
// animate element
svg.Element.animate = function(node) {
this.base = svg.Element.AnimateBase;
this.base(node);
this.calcValue = function() {
var p = this.progress();
// tween value linearly
var newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress;
return newValue + this.initialUnits;
};
}
svg.Element.animate.prototype = new svg.Element.AnimateBase;
// animate color element
svg.Element.animateColor = function(node) {
this.base = svg.Element.AnimateBase;
this.base(node);
this.calcValue = function() {
var p = this.progress();
var from = new RGBColor(p.from.value);
var to = new RGBColor(p.to.value);
if (from.ok && to.ok) {
// tween color linearly
var r = from.r + (to.r - from.r) * p.progress;
var g = from.g + (to.g - from.g) * p.progress;
var b = from.b + (to.b - from.b) * p.progress;
return 'rgb('+parseInt(r,10)+','+parseInt(g,10)+','+parseInt(b,10)+')';
}
return this.attribute('from').value;
};
}
svg.Element.animateColor.prototype = new svg.Element.AnimateBase;
// animate transform element
svg.Element.animateTransform = function(node) {
this.base = svg.Element.AnimateBase;
this.base(node);
this.calcValue = function() {
var p = this.progress();
// tween value linearly
var from = svg.ToNumberArray(p.from.value);
var to = svg.ToNumberArray(p.to.value);
var newValue = '';
for (var i=0; i<from.length; i++) {
newValue += from[i] + (to[i] - from[i]) * p.progress + ' ';
}
return newValue;
};
}
svg.Element.animateTransform.prototype = new svg.Element.animate;
// font element
svg.Element.font = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.horizAdvX = this.attribute('horiz-adv-x').numValue();
this.isRTL = false;
this.isArabic = false;
this.fontFace = null;
this.missingGlyph = null;
this.glyphs = [];
for (var i=0; i<this.children.length; i++) {
var child = this.children[i];
if (child.type == 'font-face') {
this.fontFace = child;
if (child.style('font-family').hasValue()) {
svg.Definitions[child.style('font-family').value] = this;
}
}
else if (child.type == 'missing-glyph') this.missingGlyph = child;
else if (child.type == 'glyph') {
if (child.arabicForm != '') {
this.isRTL = true;
this.isArabic = true;
if (typeof(this.glyphs[child.unicode]) == 'undefined') this.glyphs[child.unicode] = [];
this.glyphs[child.unicode][child.arabicForm] = child;
}
else {
this.glyphs[child.unicode] = child;
}
}
}
}
svg.Element.font.prototype = new svg.Element.ElementBase;
// font-face element
svg.Element.fontface = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.ascent = this.attribute('ascent').value;
this.descent = this.attribute('descent').value;
this.unitsPerEm = this.attribute('units-per-em').numValue();
}
svg.Element.fontface.prototype = new svg.Element.ElementBase;
// missing-glyph element
svg.Element.missingglyph = function(node) {
this.base = svg.Element.path;
this.base(node);
this.horizAdvX = 0;
}
svg.Element.missingglyph.prototype = new svg.Element.path;
// glyph element
svg.Element.glyph = function(node) {
this.base = svg.Element.path;
this.base(node);
this.horizAdvX = this.attribute('horiz-adv-x').numValue();
this.unicode = this.attribute('unicode').value;
this.arabicForm = this.attribute('arabic-form').value;
}
svg.Element.glyph.prototype = new svg.Element.path;
// text element
svg.Element.text = function(node) {
this.captureTextNodes = true;
this.base = svg.Element.RenderedElementBase;
this.base(node);
this.baseSetContext = this.setContext;
this.setContext = function(ctx) {
this.baseSetContext(ctx);
var textBaseline = this.style('dominant-baseline').toTextBaseline();
if (textBaseline == null) textBaseline = this.style('alignment-baseline').toTextBaseline();
if (textBaseline != null) ctx.textBaseline = textBaseline;
}
this.getBoundingBox = function () {
var x = this.attribute('x').toPixels('x');
var y = this.attribute('y').toPixels('y');
var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
return new svg.BoundingBox(x, y - fontSize, x + Math.floor(fontSize * 2.0 / 3.0) * this.children[0].getText().length, y);
}
this.renderChildren = function(ctx) {
this.x = this.attribute('x').toPixels('x');
this.y = this.attribute('y').toPixels('y');
this.x += this.getAnchorDelta(ctx, this, 0);
for (var i=0; i<this.children.length; i++) {
this.renderChild(ctx, this, i);
}
}
this.getAnchorDelta = function (ctx, parent, startI) {
var textAnchor = this.style('text-anchor').valueOrDefault('start');
if (textAnchor != 'start') {
var width = 0;
for (var i=startI; i<parent.children.length; i++) {
var child = parent.children[i];
if (i > startI && child.attribute('x').hasValue()) break; // new group
width += child.measureTextRecursive(ctx);
}
return -1 * (textAnchor == 'end' ? width : width / 2.0);
}
return 0;
}
this.renderChild = function(ctx, parent, i) {
var child = parent.children[i];
if (child.attribute('x').hasValue()) {
child.x = child.attribute('x').toPixels('x') + this.getAnchorDelta(ctx, parent, i);
if (child.attribute('dx').hasValue()) child.x += child.attribute('dx').toPixels('x');
}
else {
if (this.attribute('dx').hasValue()) this.x += this.attribute('dx').toPixels('x');
if (child.attribute('dx').hasValue()) this.x += child.attribute('dx').toPixels('x');
child.x = this.x;
}
this.x = child.x + child.measureText(ctx);
if (child.attribute('y').hasValue()) {
child.y = child.attribute('y').toPixels('y');
if (child.attribute('dy').hasValue()) child.y += child.attribute('dy').toPixels('y');
}
else {
if (this.attribute('dy').hasValue()) this.y += this.attribute('dy').toPixels('y');
if (child.attribute('dy').hasValue()) this.y += child.attribute('dy').toPixels('y');
child.y = this.y;
}
this.y = child.y;
child.render(ctx);
for (var i=0; i<child.children.length; i++) {
this.renderChild(ctx, child, i);
}
}
}
svg.Element.text.prototype = new svg.Element.RenderedElementBase;
// text base
svg.Element.TextElementBase = function(node) {
this.base = svg.Element.RenderedElementBase;
this.base(node);
this.getGlyph = function(font, text, i) {
var c = text[i];
var glyph = null;
if (font.isArabic) {
var arabicForm = 'isolated';
if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal';
if (i>0 && text[i-1]!=' ' && i<text.length-2 && text[i+1]!=' ') arabicForm = 'medial';
if (i>0 && text[i-1]!=' ' && (i == text.length-1 || text[i+1]==' ')) arabicForm = 'initial';
if (typeof(font.glyphs[c]) != 'undefined') {
glyph = font.glyphs[c][arabicForm];
if (glyph == null && font.glyphs[c].type == 'glyph') glyph = font.glyphs[c];
}
}
else {
glyph = font.glyphs[c];
}
if (glyph == null) glyph = font.missingGlyph;
return glyph;
}
this.renderChildren = function(ctx) {
var customFont = this.parent.style('font-family').getDefinition();
if (customFont != null) {
var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle);
var text = this.getText();
if (customFont.isRTL) text = text.split("").reverse().join("");
var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
for (var i=0; i<text.length; i++) {
var glyph = this.getGlyph(customFont, text, i);
var scale = fontSize / customFont.fontFace.unitsPerEm;
ctx.translate(this.x, this.y);
ctx.scale(scale, -scale);
var lw = ctx.lineWidth;
ctx.lineWidth = ctx.lineWidth * customFont.fontFace.unitsPerEm / fontSize;
if (fontStyle == 'italic') ctx.transform(1, 0, .4, 1, 0, 0);
glyph.render(ctx);
if (fontStyle == 'italic') ctx.transform(1, 0, -.4, 1, 0, 0);
ctx.lineWidth = lw;
ctx.scale(1/scale, -1/scale);
ctx.translate(-this.x, -this.y);
this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm;
if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) {
this.x += dx[i];
}
}
return;
}
if (ctx.fillStyle != '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y);
if (ctx.strokeStyle != '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y);
}
this.getText = function() {
// OVERRIDE ME
}
this.measureTextRecursive = function(ctx) {
var width = this.measureText(ctx);
for (var i=0; i<this.children.length; i++) {
width += this.children[i].measureTextRecursive(ctx);
}
return width;
}
this.measureText = function(ctx) {
var customFont = this.parent.style('font-family').getDefinition();
if (customFont != null) {
var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
var measure = 0;
var text = this.getText();
if (customFont.isRTL) text = text.split("").reverse().join("");
var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
for (var i=0; i<text.length; i++) {
var glyph = this.getGlyph(customFont, text, i);
measure += (glyph.horizAdvX || customFont.horizAdvX) * fontSize / customFont.fontFace.unitsPerEm;
if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) {
measure += dx[i];
}
}
return measure;
}
var textToMeasure = svg.compressSpaces(this.getText());
if (!ctx.measureText) return textToMeasure.length * 10;
ctx.save();
this.setContext(ctx);
var width = ctx.measureText(textToMeasure).width;
ctx.restore();
return width;
}
}
svg.Element.TextElementBase.prototype = new svg.Element.RenderedElementBase;
// tspan
svg.Element.tspan = function(node) {
this.captureTextNodes = true;
this.base = svg.Element.TextElementBase;
this.base(node);
this.text = node.nodeValue || node.text || '';
this.getText = function() {
return this.text;
}
}
svg.Element.tspan.prototype = new svg.Element.TextElementBase;
// tref
svg.Element.tref = function(node) {
this.base = svg.Element.TextElementBase;
this.base(node);
this.getText = function() {
var element = this.getHrefAttribute().getDefinition();
if (element != null) return element.children[0].getText();
}
}
svg.Element.tref.prototype = new svg.Element.TextElementBase;
// a element
svg.Element.a = function(node) {
this.base = svg.Element.TextElementBase;
this.base(node);
this.hasText = true;
for (var i=0; i<node.childNodes.length; i++) {
if (node.childNodes[i].nodeType != 3) this.hasText = false;
}
// this might contain text
this.text = this.hasText ? node.childNodes[0].nodeValue : '';
this.getText = function() {
return this.text;
}
this.baseRenderChildren = this.renderChildren;
this.renderChildren = function(ctx) {
if (this.hasText) {
// render as text element
this.baseRenderChildren(ctx);
var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.toPixels('y'), this.x + this.measureText(ctx), this.y));
}
else {
// render as temporary group
var g = new svg.Element.g();
g.children = this.children;
g.parent = this;
g.render(ctx);
}
}
this.onclick = function() {
window.open(this.getHrefAttribute().value);
}
this.onmousemove = function() {
svg.ctx.canvas.style.cursor = 'pointer';
}
}
svg.Element.a.prototype = new svg.Element.TextElementBase;
// image element
svg.Element.image = function(node) {
this.base = svg.Element.RenderedElementBase;
this.base(node);
var href = this.getHrefAttribute().value;
if (href == '') { return; }
var isSvg = href.match(/\.svg$/)
svg.Images.push(this);
this.loaded = false;
if (!isSvg) {
this.img = document.createElement('img');
if (svg.opts['useCORS'] == true) { this.img.crossOrigin = 'Anonymous'; }
var self = this;
this.img.onload = function() { self.loaded = true; }
this.img.onerror = function() { svg.log('ERROR: image "' + href + '" not found'); self.loaded = true; }
this.img.src = href;
}
else {
this.img = svg.ajax(href);
this.loaded = true;
}
this.renderChildren = function(ctx) {
var x = this.attribute('x').toPixels('x');
var y = this.attribute('y').toPixels('y');
var width = this.attribute('width').toPixels('x');
var height = this.attribute('height').toPixels('y');
if (width == 0 || height == 0) return;
ctx.save();
if (isSvg) {
ctx.drawSvg(this.img, x, y, width, height);
}
else {
ctx.translate(x, y);
svg.AspectRatio(ctx,
this.attribute('preserveAspectRatio').value,
width,
this.img.width,
height,
this.img.height,
0,
0);
ctx.drawImage(this.img, 0, 0);
}
ctx.restore();
}
this.getBoundingBox = function() {
var x = this.attribute('x').toPixels('x');
var y = this.attribute('y').toPixels('y');
var width = this.attribute('width').toPixels('x');
var height = this.attribute('height').toPixels('y');
return new svg.BoundingBox(x, y, x + width, y + height);
}
}
svg.Element.image.prototype = new svg.Element.RenderedElementBase;
// group element
svg.Element.g = function(node) {
this.base = svg.Element.RenderedElementBase;
this.base(node);
this.getBoundingBox = function() {
var bb = new svg.BoundingBox();
for (var i=0; i<this.children.length; i++) {
bb.addBoundingBox(this.children[i].getBoundingBox());
}
return bb;
};
}
svg.Element.g.prototype = new svg.Element.RenderedElementBase;
// symbol element
svg.Element.symbol = function(node) {
this.base = svg.Element.RenderedElementBase;
this.base(node);
this.render = function(ctx) {
// NO RENDER
};
}
svg.Element.symbol.prototype = new svg.Element.RenderedElementBase;
// style element
svg.Element.style = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
// text, or spaces then CDATA
var css = ''
for (var i=0; i<node.childNodes.length; i++) {
css += node.childNodes[i].nodeValue;
}
css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments
css = svg.compressSpaces(css); // replace whitespace
var cssDefs = css.split('}');
for (var i=0; i<cssDefs.length; i++) {
if (svg.trim(cssDefs[i]) != '') {
var cssDef = cssDefs[i].split('{');
var cssClasses = cssDef[0].split(',');
var cssProps = cssDef[1].split(';');
for (var j=0; j<cssClasses.length; j++) {
var cssClass = svg.trim(cssClasses[j]);
if (cssClass != '') {
var props = {};
for (var k=0; k<cssProps.length; k++) {
var prop = cssProps[k].indexOf(':');
var name = cssProps[k].substr(0, prop);
var value = cssProps[k].substr(prop + 1, cssProps[k].length - prop);
if (name != null && value != null) {
props[svg.trim(name)] = new svg.Property(svg.trim(name), svg.trim(value));
}
}
svg.Styles[cssClass] = props;
if (cssClass == '@font-face') {
var fontFamily = props['font-family'].value.replace(/"/g,'');
var srcs = props['src'].value.split(',');
for (var s=0; s<srcs.length; s++) {
if (srcs[s].indexOf('format("svg")') > 0) {
var urlStart = srcs[s].indexOf('url');
var urlEnd = srcs[s].indexOf(')', urlStart);
var url = srcs[s].substr(urlStart + 5, urlEnd - urlStart - 6);
var doc = svg.parseXml(svg.ajax(url));
var fonts = doc.getElementsByTagName('font');
for (var f=0; f<fonts.length; f++) {
var font = svg.CreateElement(fonts[f]);
svg.Definitions[fontFamily] = font;
}
}
}
}
}
}
}
}
}
svg.Element.style.prototype = new svg.Element.ElementBase;
// use element
svg.Element.use = function(node) {
this.base = svg.Element.RenderedElementBase;
this.base(node);
this.baseSetContext = this.setContext;
this.setContext = function(ctx) {
this.baseSetContext(ctx);
if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').toPixels('x'), 0);
if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').toPixels('y'));
}
var element = this.getHrefAttribute().getDefinition();
this.path = function(ctx) {
if (element != null) element.path(ctx);
}
this.getBoundingBox = function() {
if (element != null) return element.getBoundingBox();
}
this.renderChildren = function(ctx) {
if (element != null) {
var tempSvg = element;
if (element.type == 'symbol') {
// render me using a temporary svg element in symbol cases (http://www.w3.org/TR/SVG/struct.html#UseElement)
tempSvg = new svg.Element.svg();
tempSvg.type = 'svg';
tempSvg.attributes['viewBox'] = new svg.Property('viewBox', element.attribute('viewBox').value);
tempSvg.attributes['preserveAspectRatio'] = new svg.Property('preserveAspectRatio', element.attribute('preserveAspectRatio').value);
tempSvg.attributes['overflow'] = new svg.Property('overflow', element.attribute('overflow').value);
tempSvg.children = element.children;
}
if (tempSvg.type == 'svg') {
// if symbol or svg, inherit width/height from me
if (this.attribute('width').hasValue()) tempSvg.attributes['width'] = new svg.Property('width', this.attribute('width').value);
if (this.attribute('height').hasValue()) tempSvg.attributes['height'] = new svg.Property('height', this.attribute('height').value);
}
var oldParent = tempSvg.parent;
tempSvg.parent = null;
tempSvg.render(ctx);
tempSvg.parent = oldParent;
}
}
}
svg.Element.use.prototype = new svg.Element.RenderedElementBase;
// mask element
svg.Element.mask = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.apply = function(ctx, element) {
// render as temp svg
var x = this.attribute('x').toPixels('x');
var y = this.attribute('y').toPixels('y');
var width = this.attribute('width').toPixels('x');
var height = this.attribute('height').toPixels('y');
if (width == 0 && height == 0) {
var bb = new svg.BoundingBox();
for (var i=0; i<this.children.length; i++) {
bb.addBoundingBox(this.children[i].getBoundingBox());
}
var x = Math.floor(bb.x1);
var y = Math.floor(bb.y1);
var width = Math.floor(bb.width());
var height = Math.floor(bb.height());
}
// temporarily remove mask to avoid recursion
var mask = element.attribute('mask').value;
element.attribute('mask').value = '';
var cMask = document.createElement('canvas');
cMask.width = x + width;
cMask.height = y + height;
var maskCtx = cMask.getContext('2d');
this.renderChildren(maskCtx);
var c = document.createElement('canvas');
c.width = x + width;
c.height = y + height;
var tempCtx = c.getContext('2d');
element.render(tempCtx);
tempCtx.globalCompositeOperation = 'destination-in';
tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat');
tempCtx.fillRect(0, 0, x + width, y + height);
ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat');
ctx.fillRect(0, 0, x + width, y + height);
// reassign mask
element.attribute('mask').value = mask;
}
this.render = function(ctx) {
// NO RENDER
}
}
svg.Element.mask.prototype = new svg.Element.ElementBase;
// clip element
svg.Element.clipPath = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.apply = function(ctx) {
var oldBeginPath = CanvasRenderingContext2D.prototype.beginPath;
CanvasRenderingContext2D.prototype.beginPath = function () { };
var oldClosePath = CanvasRenderingContext2D.prototype.closePath;
CanvasRenderingContext2D.prototype.closePath = function () { };
oldBeginPath.call(ctx);
for (var i=0; i<this.children.length; i++) {
var child = this.children[i];
if (typeof(child.path) != 'undefined') {
var transform = null;
if (child.attribute('transform').hasValue()) {
transform = new svg.Transform(child.attribute('transform').value);
transform.apply(ctx);
}
child.path(ctx);
CanvasRenderingContext2D.prototype.closePath = oldClosePath;
if (transform) { transform.unapply(ctx); }
}
}
oldClosePath.call(ctx);
ctx.clip();
CanvasRenderingContext2D.prototype.beginPath = oldBeginPath;
CanvasRenderingContext2D.prototype.closePath = oldClosePath;
}
this.render = function(ctx) {
// NO RENDER
}
}
svg.Element.clipPath.prototype = new svg.Element.ElementBase;
// filters
svg.Element.filter = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.apply = function(ctx, element) {
// render as temp svg
var bb = element.getBoundingBox();
var x = Math.floor(bb.x1);
var y = Math.floor(bb.y1);
var width = Math.floor(bb.width());
var height = Math.floor(bb.height());
// temporarily remove filter to avoid recursion
var filter = element.style('filter').value;
element.style('filter').value = '';
var px = 0, py = 0;
for (var i=0; i<this.children.length; i++) {
var efd = this.children[i].extraFilterDistance || 0;
px = Math.max(px, efd);
py = Math.max(py, efd);
}
var c = document.createElement('canvas');
c.width = width + 2*px;
c.height = height + 2*py;
var tempCtx = c.getContext('2d');
tempCtx.translate(-x + px, -y + py);
element.render(tempCtx);
// apply filters
for (var i=0; i<this.children.length; i++) {
this.children[i].apply(tempCtx, 0, 0, width + 2*px, height + 2*py);
}
// render on me
ctx.drawImage(c, 0, 0, width + 2*px, height + 2*py, x - px, y - py, width + 2*px, height + 2*py);
// reassign filter
element.style('filter', true).value = filter;
}
this.render = function(ctx) {
// NO RENDER
}
}
svg.Element.filter.prototype = new svg.Element.ElementBase;
svg.Element.feMorphology = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.apply = function(ctx, x, y, width, height) {
// TODO: implement
}
}
svg.Element.feMorphology.prototype = new svg.Element.ElementBase;
svg.Element.feComposite = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.apply = function(ctx, x, y, width, height) {
// TODO: implement
}
}
svg.Element.feComposite.prototype = new svg.Element.ElementBase;
svg.Element.feColorMatrix = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
var matrix = svg.ToNumberArray(this.attribute('values').value);
switch (this.attribute('type').valueOrDefault('matrix')) { // http://www.w3.org/TR/SVG/filters.html#feColorMatrixElement
case 'saturate':
var s = matrix[0];
matrix = [0.213+0.787*s,0.715-0.715*s,0.072-0.072*s,0,0,
0.213-0.213*s,0.715+0.285*s,0.072-0.072*s,0,0,
0.213-0.213*s,0.715-0.715*s,0.072+0.928*s,0,0,
0,0,0,1,0,
0,0,0,0,1];
break;
case 'hueRotate':
var a = matrix[0] * Math.PI / 180.0;
var c = function (m1,m2,m3) { return m1 + Math.cos(a)*m2 + Math.sin(a)*m3; };
matrix = [c(0.213,0.787,-0.213),c(0.715,-0.715,-0.715),c(0.072,-0.072,0.928),0,0,
c(0.213,-0.213,0.143),c(0.715,0.285,0.140),c(0.072,-0.072,-0.283),0,0,
c(0.213,-0.213,-0.787),c(0.715,-0.715,0.715),c(0.072,0.928,0.072),0,0,
0,0,0,1,0,
0,0,0,0,1];
break;
case 'luminanceToAlpha':
matrix = [0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0.2125,0.7154,0.0721,0,0,
0,0,0,0,1];
break;
}
function imGet(img, x, y, width, height, rgba) {
return img[y*width*4 + x*4 + rgba];
}
function imSet(img, x, y, width, height, rgba, val) {
img[y*width*4 + x*4 + rgba] = val;
}
function m(i, v) {
var mi = matrix[i];
return mi * (mi < 0 ? v - 255 : v);
}
this.apply = function(ctx, x, y, width, height) {
// assuming x==0 && y==0 for now
var srcData = ctx.getImageData(0, 0, width, height);
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var r = imGet(srcData.data, x, y, width, height, 0);
var g = imGet(srcData.data, x, y, width, height, 1);
var b = imGet(srcData.data, x, y, width, height, 2);
var a = imGet(srcData.data, x, y, width, height, 3);
imSet(srcData.data, x, y, width, height, 0, m(0,r)+m(1,g)+m(2,b)+m(3,a)+m(4,1));
imSet(srcData.data, x, y, width, height, 1, m(5,r)+m(6,g)+m(7,b)+m(8,a)+m(9,1));
imSet(srcData.data, x, y, width, height, 2, m(10,r)+m(11,g)+m(12,b)+m(13,a)+m(14,1));
imSet(srcData.data, x, y, width, height, 3, m(15,r)+m(16,g)+m(17,b)+m(18,a)+m(19,1));
}
}
ctx.clearRect(0, 0, width, height);
ctx.putImageData(srcData, 0, 0);
}
}
svg.Element.feColorMatrix.prototype = new svg.Element.ElementBase;
svg.Element.feGaussianBlur = function(node) {
this.base = svg.Element.ElementBase;
this.base(node);
this.blurRadius = Math.floor(this.attribute('stdDeviation').numValue());
this.extraFilterDistance = this.blurRadius;
this.apply = function(ctx, x, y, width, height) {
if (typeof(stackBlurCanvasRGBA) == 'undefined') {
svg.log('ERROR: StackBlur.js must be included for blur to work');
return;
}
// StackBlur requires canvas be on document
ctx.canvas.id = svg.UniqueId();
ctx.canvas.style.display = 'none';
document.body.appendChild(ctx.canvas);
stackBlurCanvasRGBA(ctx.canvas.id, x, y, width, height, this.blurRadius);
document.body.removeChild(ctx.canvas);
}
}
svg.Element.feGaussianBlur.prototype = new svg.Element.ElementBase;
// title element, do nothing
svg.Element.title = function(node) {
}
svg.Element.title.prototype = new svg.Element.ElementBase;
// desc element, do nothing
svg.Element.desc = function(node) {
}
svg.Element.desc.prototype = new svg.Element.ElementBase;
svg.Element.MISSING = function(node) {
svg.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.');
}
svg.Element.MISSING.prototype = new svg.Element.ElementBase;
// element factory
svg.CreateElement = function(node) {
var className = node.nodeName.replace(/^[^:]+:/,''); // remove namespace
className = className.replace(/\-/g,''); // remove dashes
var e = null;
if (typeof(svg.Element[className]) != 'undefined') {
e = new svg.Element[className](node);
}
else {
e = new svg.Element.MISSING(node);
}
e.type = node.nodeName;
return e;
}
// load from url
svg.load = function(ctx, url) {
svg.loadXml(ctx, svg.ajax(url));
}
// load from xml
svg.loadXml = function(ctx, xml) {
svg.loadXmlDoc(ctx, svg.parseXml(xml));
}
svg.loadXmlDoc = function(ctx, dom) {
svg.init(ctx);
var mapXY = function(p) {
var e = ctx.canvas;
while (e) {
p.x -= e.offsetLeft;
p.y -= e.offsetTop;
e = e.offsetParent;
}
if (window.scrollX) p.x += window.scrollX;
if (window.scrollY) p.y += window.scrollY;
return p;
}
// bind mouse
if (svg.opts['ignoreMouse'] != true) {
ctx.canvas.onclick = function(e) {
var p = mapXY(new svg.Point(e != null ? e.clientX : event.clientX, e != null ? e.clientY : event.clientY));
svg.Mouse.onclick(p.x, p.y);
};
ctx.canvas.onmousemove = function(e) {
var p = mapXY(new svg.Point(e != null ? e.clientX : event.clientX, e != null ? e.clientY : event.clientY));
svg.Mouse.onmousemove(p.x, p.y);
};
}
var e = svg.CreateElement(dom.documentElement);
e.root = true;
// render loop
var isFirstRender = true;
var draw = function() {
svg.ViewPort.Clear();
if (ctx.canvas.parentNode) svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight);
if (svg.opts['ignoreDimensions'] != true) {
// set canvas size
if (e.style('width').hasValue()) {
ctx.canvas.width = e.style('width').toPixels('x');
ctx.canvas.style.width = ctx.canvas.width + 'px';
}
if (e.style('height').hasValue()) {
ctx.canvas.height = e.style('height').toPixels('y');
ctx.canvas.style.height = ctx.canvas.height + 'px';
}
}
var cWidth = ctx.canvas.clientWidth || ctx.canvas.width;
var cHeight = ctx.canvas.clientHeight || ctx.canvas.height;
if (svg.opts['ignoreDimensions'] == true && e.style('width').hasValue() && e.style('height').hasValue()) {
cWidth = e.style('width').toPixels('x');
cHeight = e.style('height').toPixels('y');
}
svg.ViewPort.SetCurrent(cWidth, cHeight);
if (svg.opts['offsetX'] != null) e.attribute('x', true).value = svg.opts['offsetX'];
if (svg.opts['offsetY'] != null) e.attribute('y', true).value = svg.opts['offsetY'];
if (svg.opts['scaleWidth'] != null || svg.opts['scaleHeight'] != null) {
var xRatio = null, yRatio = null, viewBox = svg.ToNumberArray(e.attribute('viewBox').value);
if (svg.opts['scaleWidth'] != null) {
if (e.attribute('width').hasValue()) xRatio = e.attribute('width').toPixels('x') / svg.opts['scaleWidth'];
else if (!isNaN(viewBox[2])) xRatio = viewBox[2] / svg.opts['scaleWidth'];
}
if (svg.opts['scaleHeight'] != null) {
if (e.attribute('height').hasValue()) yRatio = e.attribute('height').toPixels('y') / svg.opts['scaleHeight'];
else if (!isNaN(viewBox[3])) yRatio = viewBox[3] / svg.opts['scaleHeight'];
}
if (xRatio == null) { xRatio = yRatio; }
if (yRatio == null) { yRatio = xRatio; }
e.attribute('width', true).value = svg.opts['scaleWidth'];
e.attribute('height', true).value = svg.opts['scaleHeight'];
e.attribute('transform', true).value += ' scale('+(1.0/xRatio)+','+(1.0/yRatio)+')';
}
// clear and render
if (svg.opts['ignoreClear'] != true) {
ctx.clearRect(0, 0, cWidth, cHeight);
}
e.render(ctx);
if (isFirstRender) {
isFirstRender = false;
if (typeof(svg.opts['renderCallback']) == 'function') svg.opts['renderCallback'](dom);
}
}
var waitingForImages = true;
if (svg.ImagesLoaded()) {
waitingForImages = false;
draw();
}
svg.intervalID = setInterval(function() {
var needUpdate = false;
if (waitingForImages && svg.ImagesLoaded()) {
waitingForImages = false;
needUpdate = true;
}
// need update from mouse events?
if (svg.opts['ignoreMouse'] != true) {
needUpdate = needUpdate | svg.Mouse.hasEvents();
}
// need update from animations?
if (svg.opts['ignoreAnimation'] != true) {
for (var i=0; i<svg.Animations.length; i++) {
needUpdate = needUpdate | svg.Animations[i].update(1000 / svg.FRAMERATE);
}
}
// need update from redraw?
if (typeof(svg.opts['forceRedraw']) == 'function') {
if (svg.opts['forceRedraw']() == true) needUpdate = true;
}
// render if needed
if (needUpdate) {
draw();
svg.Mouse.runEvents(); // run and clear our events
}
}, 1000 / svg.FRAMERATE);
}
svg.stop = function() {
if (svg.intervalID) {
clearInterval(svg.intervalID);
}
}
svg.Mouse = new (function() {
this.events = [];
this.hasEvents = function() { return this.events.length != 0; }
this.onclick = function(x, y) {
this.events.push({ type: 'onclick', x: x, y: y,
run: function(e) { if (e.onclick) e.onclick(); }
});
}
this.onmousemove = function(x, y) {
this.events.push({ type: 'onmousemove', x: x, y: y,
run: function(e) { if (e.onmousemove) e.onmousemove(); }
});
}
this.eventElements = [];
this.checkPath = function(element, ctx) {
for (var i=0; i<this.events.length; i++) {
var e = this.events[i];
if (ctx.isPointInPath && ctx.isPointInPath(e.x, e.y)) this.eventElements[i] = element;
}
}
this.checkBoundingBox = function(element, bb) {
for (var i=0; i<this.events.length; i++) {
var e = this.events[i];
if (bb.isPointInBox(e.x, e.y)) this.eventElements[i] = element;
}
}
this.runEvents = function() {
svg.ctx.canvas.style.cursor = '';
for (var i=0; i<this.events.length; i++) {
var e = this.events[i];
var element = this.eventElements[i];
while (element) {
e.run(element);
element = element.parent;
}
}
// done running, clear
this.events = [];
this.eventElements = [];
}
});
return svg;
}
})();
if (typeof(CanvasRenderingContext2D) != 'undefined') {
CanvasRenderingContext2D.prototype.drawSvg = function(s, dx, dy, dw, dh) {
canvg(this.canvas, s, {
ignoreMouse: true,
ignoreAnimation: true,
ignoreDimensions: true,
ignoreClear: true,
offsetX: dx,
offsetY: dy,
scaleWidth: dw,
scaleHeight: dh
});
}
}
/** @preserve
* jsPDF - PDF Document creation from JavaScript
* Version ${versionID}
* CommitID ${commitID}
*
* Copyright (c) 2010-2014 James Hall, https://github.com/MrRio/jsPDF
* 2010 Aaron Spike, https://github.com/acspike
* 2012 Willow Systems Corporation, willow-systems.com
* 2012 Pablo Hess, https://github.com/pablohess
* 2012 Florian Jenett, https://github.com/fjenett
* 2013 Warren Weckesser, https://github.com/warrenweckesser
* 2013 Youssef Beddad, https://github.com/lifof
* 2013 Lee Driscoll, https://github.com/lsdriscoll
* 2013 Stefan Slonevskiy, https://github.com/stefslon
* 2013 Jeremy Morel, https://github.com/jmorel
* 2013 Christoph Hartmann, https://github.com/chris-rock
* 2014 Juan Pablo Gaviria, https://github.com/juanpgaviria
* 2014 James Makes, https://github.com/dollaruw
* 2014 Diego Casorran, https://github.com/diegocr
*
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* Contributor(s):
* siefkenj, ahwolf, rickygu, Midnith, saintclair, eaparango,
* kim3er, mfo, alnorth,
*/
/**
* Creates new jsPDF document object instance.
*
* @class
* @param orientation One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
* @param unit Measurement unit to be used when coordinates are specified.
* One of "pt" (points), "mm" (Default), "cm", "in"
* @param format One of 'pageFormats' as shown below, default: a4
* @returns {jsPDF}
* @name jsPDF
*/
var jsPDF = (function(global) {
'use strict';
var pdfVersion = '1.3',
pageFormats = { // Size in pt of various paper formats
'a0' : [2383.94, 3370.39], 'a1' : [1683.78, 2383.94],
'a2' : [1190.55, 1683.78], 'a3' : [ 841.89, 1190.55],
'a4' : [ 595.28, 841.89], 'a5' : [ 419.53, 595.28],
'a6' : [ 297.64, 419.53], 'a7' : [ 209.76, 297.64],
'a8' : [ 147.40, 209.76], 'a9' : [ 104.88, 147.40],
'a10' : [ 73.70, 104.88], 'b0' : [2834.65, 4008.19],
'b1' : [2004.09, 2834.65], 'b2' : [1417.32, 2004.09],
'b3' : [1000.63, 1417.32], 'b4' : [ 708.66, 1000.63],
'b5' : [ 498.90, 708.66], 'b6' : [ 354.33, 498.90],
'b7' : [ 249.45, 354.33], 'b8' : [ 175.75, 249.45],
'b9' : [ 124.72, 175.75], 'b10' : [ 87.87, 124.72],
'c0' : [2599.37, 3676.54], 'c1' : [1836.85, 2599.37],
'c2' : [1298.27, 1836.85], 'c3' : [ 918.43, 1298.27],
'c4' : [ 649.13, 918.43], 'c5' : [ 459.21, 649.13],
'c6' : [ 323.15, 459.21], 'c7' : [ 229.61, 323.15],
'c8' : [ 161.57, 229.61], 'c9' : [ 113.39, 161.57],
'c10' : [ 79.37, 113.39], 'dl' : [ 311.81, 623.62],
'letter' : [612, 792],
'government-letter' : [576, 756],
'legal' : [612, 1008],
'junior-legal' : [576, 360],
'ledger' : [1224, 792],
'tabloid' : [792, 1224],
'credit-card' : [153, 243]
};
/**
* jsPDF's Internal PubSub Implementation.
* See mrrio.github.io/jsPDF/doc/symbols/PubSub.html
* Backward compatible rewritten on 2014 by
* Diego Casorran, https://github.com/diegocr
*
* @class
* @name PubSub
*/
function PubSub(context) {
var topics = {};
this.subscribe = function(topic, callback, once) {
if(typeof callback !== 'function') {
return false;
}
if(!topics.hasOwnProperty(topic)) {
topics[topic] = {};
}
var id = Math.random().toString(35);
topics[topic][id] = [callback,!!once];
return id;
};
this.unsubscribe = function(token) {
for(var topic in topics) {
if(topics[topic][token]) {
delete topics[topic][token];
return true;
}
}
return false;
};
this.publish = function(topic) {
if(topics.hasOwnProperty(topic)) {
var args = Array.prototype.slice.call(arguments, 1), idr = [];
for(var id in topics[topic]) {
var sub = topics[topic][id];
try {
sub[0].apply(context, args);
} catch(ex) {
if(global.console) {
console.error('jsPDF PubSub Error', ex.message, ex);
}
}
if(sub[1]) idr.push(id);
}
if(idr.length) idr.forEach(this.unsubscribe);
}
};
}
/**
* @constructor
* @private
*/
function jsPDF(orientation, unit, format, compressPdf) {
var options = {};
if (typeof orientation === 'object') {
options = orientation;
orientation = options.orientation;
unit = options.unit || unit;
format = options.format || format;
compressPdf = options.compress || options.compressPdf || compressPdf;
}
// Default options
unit = unit || 'mm';
format = format || 'a4';
orientation = ('' + (orientation || 'P')).toLowerCase();
var format_as_string = ('' + format).toLowerCase(),
compress = !!compressPdf && typeof Uint8Array === 'function',
textColor = options.textColor || '0 g',
drawColor = options.drawColor || '0 G',
activeFontSize = options.fontSize || 16,
lineHeightProportion = options.lineHeight || 1.15,
lineWidth = options.lineWidth || 0.200025, // 2mm
objectNumber = 2, // 'n' Current object number
outToPages = !1, // switches where out() prints. outToPages true = push to pages obj. outToPages false = doc builder content
offsets = [], // List of offsets. Activated and reset by buildDocument(). Pupulated by various calls buildDocument makes.
fonts = {}, // collection of font objects, where key is fontKey - a dynamically created label for a given font.
fontmap = {}, // mapping structure fontName > fontStyle > font key - performance layer. See addFont()
activeFontKey, // will be string representing the KEY of the font as combination of fontName + fontStyle
k, // Scale factor
tmp,
page = 0,
pages = [],
content = [],
lineCapID = 0,
lineJoinID = 0,
content_length = 0,
pageWidth,
pageHeight,
documentProperties = {
'title' : '',
'subject' : '',
'author' : '',
'keywords' : '',
'creator' : ''
},
API = {},
events = new PubSub(API),
/////////////////////
// Private functions
/////////////////////
f2 = function(number) {
return number.toFixed(2); // Ie, %.2f
},
f3 = function(number) {
return number.toFixed(3); // Ie, %.3f
},
padd2 = function(number) {
return ('0' + parseInt(number)).slice(-2);
},
out = function(string) {
if (outToPages) {
/* set by beginPage */
pages[page].push(string);
} else {
// +1 for '\n' that will be used to join 'content'
content_length += string.length + 1;
content.push(string);
}
},
newObject = function() {
// Begin a new object
objectNumber++;
offsets[objectNumber] = content_length;
out(objectNumber + ' 0 obj');
return objectNumber;
},
putStream = function(str) {
out('stream');
out(str);
out('endstream');
},
putPages = function() {
var n,p,arr,i,deflater,adler32,wPt = pageWidth * k, hPt = pageHeight * k, adler32cs;
adler32cs = global.adler32cs || jsPDF.adler32cs;
if (compress && typeof adler32cs === 'undefined') {
compress = false;
}
// outToPages = false as set in endDocument(). out() writes to content.
for (n = 1; n <= page; n++) {
newObject();
out('<</Type /Page');
out('/Parent 1 0 R');
out('/Resources 2 0 R');
out('/Contents ' + (objectNumber + 1) + ' 0 R>>');
out('endobj');
// Page content
p = pages[n].join('\n');
newObject();
if (compress) {
arr = [];
i = p.length;
while(i--) {
arr[i] = p.charCodeAt(i);
}
adler32 = adler32cs.from(p);
deflater = new Deflater(6);
deflater.append(new Uint8Array(arr));
p = deflater.flush();
arr = new Uint8Array(p.length + 6);
arr.set(new Uint8Array([120, 156])),
arr.set(p, 2);
arr.set(new Uint8Array([adler32 & 0xFF, (adler32 >> 8) & 0xFF, (adler32 >> 16) & 0xFF, (adler32 >> 24) & 0xFF]), p.length+2);
p = String.fromCharCode.apply(null, arr);
out('<</Length ' + p.length + ' /Filter [/FlateDecode]>>');
} else {
out('<</Length ' + p.length + '>>');
}
putStream(p);
out('endobj');
}
offsets[1] = content_length;
out('1 0 obj');
out('<</Type /Pages');
var kids = '/Kids [';
for (i = 0; i < page; i++) {
kids += (3 + 2 * i) + ' 0 R ';
}
out(kids + ']');
out('/Count ' + page);
out('/MediaBox [0 0 ' + f2(wPt) + ' ' + f2(hPt) + ']');
out('>>');
out('endobj');
},
putFont = function(font) {
font.objectNumber = newObject();
out('<</BaseFont/' + font.PostScriptName + '/Type/Font');
if (typeof font.encoding === 'string') {
out('/Encoding/' + font.encoding);
}
out('/Subtype/Type1>>');
out('endobj');
},
putFonts = function() {
for (var fontKey in fonts) {
if (fonts.hasOwnProperty(fontKey)) {
putFont(fonts[fontKey]);
}
}
},
putXobjectDict = function() {
// Loop through images, or other data objects
events.publish('putXobjectDict');
},
putResourceDictionary = function() {
out('/ProcSet [/PDF /Text /ImageB /ImageC /ImageI]');
out('/Font <<');
// Do this for each font, the '1' bit is the index of the font
for (var fontKey in fonts) {
if (fonts.hasOwnProperty(fontKey)) {
out('/' + fontKey + ' ' + fonts[fontKey].objectNumber + ' 0 R');
}
}
out('>>');
out('/XObject <<');
putXobjectDict();
out('>>');
},
putResources = function() {
putFonts();
events.publish('putResources');
// Resource dictionary
offsets[2] = content_length;
out('2 0 obj');
out('<<');
putResourceDictionary();
out('>>');
out('endobj');
events.publish('postPutResources');
},
addToFontDictionary = function(fontKey, fontName, fontStyle) {
// this is mapping structure for quick font key lookup.
// returns the KEY of the font (ex: "F1") for a given
// pair of font name and type (ex: "Arial". "Italic")
if (!fontmap.hasOwnProperty(fontName)) {
fontmap[fontName] = {};
}
fontmap[fontName][fontStyle] = fontKey;
},
/**
* FontObject describes a particular font as member of an instnace of jsPDF
*
* It's a collection of properties like 'id' (to be used in PDF stream),
* 'fontName' (font's family name), 'fontStyle' (font's style variant label)
*
* @class
* @public
* @property id {String} PDF-document-instance-specific label assinged to the font.
* @property PostScriptName {String} PDF specification full name for the font
* @property encoding {Object} Encoding_name-to-Font_metrics_object mapping.
* @name FontObject
*/
addFont = function(PostScriptName, fontName, fontStyle, encoding) {
var fontKey = 'F' + (Object.keys(fonts).length + 1).toString(10),
// This is FontObject
font = fonts[fontKey] = {
'id' : fontKey,
'PostScriptName' : PostScriptName,
'fontName' : fontName,
'fontStyle' : fontStyle,
'encoding' : encoding,
'metadata' : {}
};
addToFontDictionary(fontKey, fontName, fontStyle);
events.publish('addFont', font);
return fontKey;
},
addFonts = function() {
var HELVETICA = "helvetica",
TIMES = "times",
COURIER = "courier",
NORMAL = "normal",
BOLD = "bold",
ITALIC = "italic",
BOLD_ITALIC = "bolditalic",
encoding = 'StandardEncoding',
standardFonts = [
['Helvetica', HELVETICA, NORMAL],
['Helvetica-Bold', HELVETICA, BOLD],
['Helvetica-Oblique', HELVETICA, ITALIC],
['Helvetica-BoldOblique', HELVETICA, BOLD_ITALIC],
['Courier', COURIER, NORMAL],
['Courier-Bold', COURIER, BOLD],
['Courier-Oblique', COURIER, ITALIC],
['Courier-BoldOblique', COURIER, BOLD_ITALIC],
['Times-Roman', TIMES, NORMAL],
['Times-Bold', TIMES, BOLD],
['Times-Italic', TIMES, ITALIC],
['Times-BoldItalic', TIMES, BOLD_ITALIC]
];
for (var i = 0, l = standardFonts.length; i < l; i++) {
var fontKey = addFont(
standardFonts[i][0],
standardFonts[i][1],
standardFonts[i][2],
encoding);
// adding aliases for standard fonts, this time matching the capitalization
var parts = standardFonts[i][0].split('-');
addToFontDictionary(fontKey, parts[0], parts[1] || '');
}
events.publish('addFonts', { fonts : fonts, dictionary : fontmap });
},
SAFE = function __safeCall(fn) {
fn.foo = function __safeCallWrapper() {
try {
return fn.apply(this, arguments);
} catch (e) {
var stack = e.stack || '';
if(~stack.indexOf(' at ')) stack = stack.split(" at ")[1];
var m = "Error in function " + stack.split("\n")[0].split('<')[0] + ": " + e.message;
if(global.console) {
global.console.error(m, e);
if(global.alert) alert(m);
} else {
throw new Error(m);
}
}
};
fn.foo.bar = fn;
return fn.foo;
},
to8bitStream = function(text, flags) {
/**
* PDF 1.3 spec:
* "For text strings encoded in Unicode, the first two bytes must be 254 followed by
* 255, representing the Unicode byte order marker, U+FEFF. (This sequence conflicts
* with the PDFDocEncoding character sequence thorn ydieresis, which is unlikely
* to be a meaningful beginning of a word or phrase.) The remainder of the
* string consists of Unicode character codes, according to the UTF-16 encoding
* specified in the Unicode standard, version 2.0. Commonly used Unicode values
* are represented as 2 bytes per character, with the high-order byte appearing first
* in the string."
*
* In other words, if there are chars in a string with char code above 255, we
* recode the string to UCS2 BE - string doubles in length and BOM is prepended.
*
* HOWEVER!
* Actual *content* (body) text (as opposed to strings used in document properties etc)
* does NOT expect BOM. There, it is treated as a literal GID (Glyph ID)
*
* Because of Adobe's focus on "you subset your fonts!" you are not supposed to have
* a font that maps directly Unicode (UCS2 / UTF16BE) code to font GID, but you could
* fudge it with "Identity-H" encoding and custom CIDtoGID map that mimics Unicode
* code page. There, however, all characters in the stream are treated as GIDs,
* including BOM, which is the reason we need to skip BOM in content text (i.e. that
* that is tied to a font).
*
* To signal this "special" PDFEscape / to8bitStream handling mode,
* API.text() function sets (unless you overwrite it with manual values
* given to API.text(.., flags) )
* flags.autoencode = true
* flags.noBOM = true
*
* ===================================================================================
* `flags` properties relied upon:
* .sourceEncoding = string with encoding label.
* "Unicode" by default. = encoding of the incoming text.
* pass some non-existing encoding name
* (ex: 'Do not touch my strings! I know what I am doing.')
* to make encoding code skip the encoding step.
* .outputEncoding = Either valid PDF encoding name
* (must be supported by jsPDF font metrics, otherwise no encoding)
* or a JS object, where key = sourceCharCode, value = outputCharCode
* missing keys will be treated as: sourceCharCode === outputCharCode
* .noBOM
* See comment higher above for explanation for why this is important
* .autoencode
* See comment higher above for explanation for why this is important
*/
var i,l,sourceEncoding,encodingBlock,outputEncoding,newtext,isUnicode,ch,bch;
flags = flags || {};
sourceEncoding = flags.sourceEncoding || 'Unicode';
outputEncoding = flags.outputEncoding;
// This 'encoding' section relies on font metrics format
// attached to font objects by, among others,
// "Willow Systems' standard_font_metrics plugin"
// see jspdf.plugin.standard_font_metrics.js for format
// of the font.metadata.encoding Object.
// It should be something like
// .encoding = {'codePages':['WinANSI....'], 'WinANSI...':{code:code, ...}}
// .widths = {0:width, code:width, ..., 'fof':divisor}
// .kerning = {code:{previous_char_code:shift, ..., 'fof':-divisor},...}
if ((flags.autoencode || outputEncoding) &&
fonts[activeFontKey].metadata &&
fonts[activeFontKey].metadata[sourceEncoding] &&
fonts[activeFontKey].metadata[sourceEncoding].encoding) {
encodingBlock = fonts[activeFontKey].metadata[sourceEncoding].encoding;
// each font has default encoding. Some have it clearly defined.
if (!outputEncoding && fonts[activeFontKey].encoding) {
outputEncoding = fonts[activeFontKey].encoding;
}
// Hmmm, the above did not work? Let's try again, in different place.
if (!outputEncoding && encodingBlock.codePages) {
outputEncoding = encodingBlock.codePages[0]; // let's say, first one is the default
}
if (typeof outputEncoding === 'string') {
outputEncoding = encodingBlock[outputEncoding];
}
// we want output encoding to be a JS Object, where
// key = sourceEncoding's character code and
// value = outputEncoding's character code.
if (outputEncoding) {
isUnicode = false;
newtext = [];
for (i = 0, l = text.length; i < l; i++) {
ch = outputEncoding[text.charCodeAt(i)];
if (ch) {
newtext.push(
String.fromCharCode(ch));
} else {
newtext.push(
text[i]);
}
// since we are looping over chars anyway, might as well
// check for residual unicodeness
if (newtext[i].charCodeAt(0) >> 8) {
/* more than 255 */
isUnicode = true;
}
}
text = newtext.join('');
}
}
i = text.length;
// isUnicode may be set to false above. Hence the triple-equal to undefined
while (isUnicode === undefined && i !== 0) {
if (text.charCodeAt(i - 1) >> 8) {
/* more than 255 */
isUnicode = true;
}
i--;
}
if (!isUnicode) {
return text;
}
newtext = flags.noBOM ? [] : [254, 255];
for (i = 0, l = text.length; i < l; i++) {
ch = text.charCodeAt(i);
bch = ch >> 8; // divide by 256
if (bch >> 8) {
/* something left after dividing by 256 second time */
throw new Error("Character at position " + i + " of string '"
+ text + "' exceeds 16bits. Cannot be encoded into UCS-2 BE");
}
newtext.push(bch);
newtext.push(ch - (bch << 8));
}
return String.fromCharCode.apply(undefined, newtext);
},
pdfEscape = function(text, flags) {
/**
* Replace '/', '(', and ')' with pdf-safe versions
*
* Doing to8bitStream does NOT make this PDF display unicode text. For that
* we also need to reference a unicode font and embed it - royal pain in the rear.
*
* There is still a benefit to to8bitStream - PDF simply cannot handle 16bit chars,
* which JavaScript Strings are happy to provide. So, while we still cannot display
* 2-byte characters property, at least CONDITIONALLY converting (entire string containing)
* 16bit chars to (USC-2-BE) 2-bytes per char + BOM streams we ensure that entire PDF
* is still parseable.
* This will allow immediate support for unicode in document properties strings.
*/
return to8bitStream(text, flags).replace(/\\/g, '\\\\').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
},
putInfo = function() {
out('/Producer (jsPDF ' + jsPDF.version + ')');
for(var key in documentProperties) {
if(documentProperties.hasOwnProperty(key) && documentProperties[key]) {
out('/'+key.substr(0,1).toUpperCase() + key.substr(1)
+' (' + pdfEscape(documentProperties[key]) + ')');
}
}
var created = new Date();
out(['/CreationDate (D:',
created.getFullYear(),
padd2(created.getMonth() + 1),
padd2(created.getDate()),
padd2(created.getHours()),
padd2(created.getMinutes()),
padd2(created.getSeconds()), ')'].join(''));
},
putCatalog = function() {
out('/Type /Catalog');
out('/Pages 1 0 R');
// @TODO: Add zoom and layout modes
out('/OpenAction [3 0 R /FitH null]');
out('/PageLayout /OneColumn');
events.publish('putCatalog');
},
putTrailer = function() {
out('/Size ' + (objectNumber + 1));
out('/Root ' + objectNumber + ' 0 R');
out('/Info ' + (objectNumber - 1) + ' 0 R');
},
beginPage = function() {
page++;
// Do dimension stuff
outToPages = true;
pages[page] = [];
},
_addPage = function() {
beginPage();
// Set line width
out(f2(lineWidth * k) + ' w');
// Set draw color
out(drawColor);
// resurrecting non-default line caps, joins
if (lineCapID !== 0) {
out(lineCapID + ' J');
}
if (lineJoinID !== 0) {
out(lineJoinID + ' j');
}
events.publish('addPage', { pageNumber : page });
},
/**
* Returns a document-specific font key - a label assigned to a
* font name + font type combination at the time the font was added
* to the font inventory.
*
* Font key is used as label for the desired font for a block of text
* to be added to the PDF document stream.
* @private
* @function
* @param fontName {String} can be undefined on "falthy" to indicate "use current"
* @param fontStyle {String} can be undefined on "falthy" to indicate "use current"
* @returns {String} Font key.
*/
getFont = function(fontName, fontStyle) {
var key;
fontName = fontName !== undefined ? fontName : fonts[activeFontKey].fontName;
fontStyle = fontStyle !== undefined ? fontStyle : fonts[activeFontKey].fontStyle;
try {
// get a string like 'F3' - the KEY corresponding tot he font + type combination.
key = fontmap[fontName][fontStyle];
} catch (e) {}
if (!key) {
throw new Error("Unable to look up font label for font '" + fontName + "', '"
+ fontStyle + "'. Refer to getFontList() for available fonts.");
}
return key;
},
buildDocument = function() {
outToPages = false; // switches out() to content
objectNumber = 2;
content = [];
offsets = [];
// putHeader()
out('%PDF-' + pdfVersion);
putPages();
putResources();
// Info
newObject();
out('<<');
putInfo();
out('>>');
out('endobj');
// Catalog
newObject();
out('<<');
putCatalog();
out('>>');
out('endobj');
// Cross-ref
var o = content_length, i, p = "0000000000";
out('xref');
out('0 ' + (objectNumber + 1));
out(p+' 65535 f ');
for (i = 1; i <= objectNumber; i++) {
out((p + offsets[i]).slice(-10) + ' 00000 n ');
}
// Trailer
out('trailer');
out('<<');
putTrailer();
out('>>');
out('startxref');
out(o);
out('%%EOF');
outToPages = true;
return content.join('\n');
},
getStyle = function(style) {
// see path-painting operators in PDF spec
var op = 'S'; // stroke
if (style === 'F') {
op = 'f'; // fill
} else if (style === 'FD' || style === 'DF') {
op = 'B'; // both
} else if (style === 'f' || style === 'f*' || style === 'B' || style === 'B*') {
/*
Allow direct use of these PDF path-painting operators:
- f fill using nonzero winding number rule
- f* fill using even-odd rule
- B fill then stroke with fill using non-zero winding number rule
- B* fill then stroke with fill using even-odd rule
*/
op = style;
}
return op;
},
getArrayBuffer = function() {
var data = buildDocument(), len = data.length,
ab = new ArrayBuffer(len), u8 = new Uint8Array(ab);
while(len--) u8[len] = data.charCodeAt(len);
return ab;
},
getBlob = function() {
return new Blob([getArrayBuffer()], { type : "application/pdf" });
},
/**
* Generates the PDF document.
*
* If `type` argument is undefined, output is raw body of resulting PDF returned as a string.
*
* @param {String} type A string identifying one of the possible output types.
* @param {Object} options An object providing some additional signalling to PDF generator.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name output
*/
output = SAFE(function(type, options) {
var datauri = ('' + type).substr(0,6) === 'dataur'
? 'data:application/pdf;base64,'+btoa(buildDocument()):0;
switch (type) {
case undefined:
return buildDocument();
case 'save':
if (navigator.getUserMedia) {
if (global.URL === undefined
|| global.URL.createObjectURL === undefined) {
return API.output('dataurlnewwindow');
}
}
saveAs(getBlob(), options);
if(typeof saveAs.unload === 'function') {
if(global.setTimeout) {
setTimeout(saveAs.unload,911);
}
}
break;
case 'arraybuffer':
return getArrayBuffer();
case 'blob':
return getBlob();
case 'bloburi':
case 'bloburl':
// User is responsible of calling revokeObjectURL
return global.URL && global.URL.createObjectURL(getBlob()) || void 0;
case 'datauristring':
case 'dataurlstring':
return datauri;
case 'dataurlnewwindow':
var nW = global.open(datauri);
if (nW || typeof safari === "undefined") return nW;
/* pass through */
case 'datauri':
case 'dataurl':
return global.document.location.href = datauri;
default:
throw new Error('Output type "' + type + '" is not supported.');
}
// @TODO: Add different output options
});
switch (unit) {
case 'pt': k = 1; break;
case 'mm': k = 72 / 25.4; break;
case 'cm': k = 72 / 2.54; break;
case 'in': k = 72; break;
case 'px': k = 96 / 72; break;
case 'pc': k = 12; break;
case 'em': k = 12; break;
case 'ex': k = 6; break;
default:
throw ('Invalid unit: ' + unit);
}
// Dimensions are stored as user units and converted to points on output
if (pageFormats.hasOwnProperty(format_as_string)) {
pageHeight = pageFormats[format_as_string][1] / k;
pageWidth = pageFormats[format_as_string][0] / k;
} else {
try {
pageHeight = format[1];
pageWidth = format[0];
} catch (err) {
throw new Error('Invalid format: ' + format);
}
}
if (orientation === 'p' || orientation === 'portrait') {
orientation = 'p';
if (pageWidth > pageHeight) {
tmp = pageWidth;
pageWidth = pageHeight;
pageHeight = tmp;
}
} else if (orientation === 'l' || orientation === 'landscape') {
orientation = 'l';
if (pageHeight > pageWidth) {
tmp = pageWidth;
pageWidth = pageHeight;
pageHeight = tmp;
}
} else {
throw('Invalid orientation: ' + orientation);
}
//---------------------------------------
// Public API
/**
* Object exposing internal API to plugins
* @public
*/
API.internal = {
'pdfEscape' : pdfEscape,
'getStyle' : getStyle,
/**
* Returns {FontObject} describing a particular font.
* @public
* @function
* @param fontName {String} (Optional) Font's family name
* @param fontStyle {String} (Optional) Font's style variation name (Example:"Italic")
* @returns {FontObject}
*/
'getFont' : function() {
return fonts[getFont.apply(API, arguments)];
},
'getFontSize' : function() {
return activeFontSize;
},
'getLineHeight' : function() {
return activeFontSize * lineHeightProportion;
},
'write' : function(string1 /*, string2, string3, etc */) {
out(arguments.length === 1 ? string1 : Array.prototype.join.call(arguments, ' '));
},
'getCoordinateString' : function(value) {
return f2(value * k);
},
'getVerticalCoordinateString' : function(value) {
return f2((pageHeight - value) * k);
},
'collections' : {},
'newObject' : newObject,
'putStream' : putStream,
'events' : events,
// ratio that you use in multiplication of a given "size" number to arrive to 'point'
// units of measurement.
// scaleFactor is set at initialization of the document and calculated against the stated
// default measurement units for the document.
// If default is "mm", k is the number that will turn number in 'mm' into 'points' number.
// through multiplication.
'scaleFactor' : k,
'pageSize' : {
'width' : pageWidth,
'height' : pageHeight
},
'output' : function(type, options) {
return output(type, options);
},
'getNumberOfPages' : function() {
return pages.length - 1;
},
'pages' : pages
};
/**
* Adds (and transfers the focus to) new page to the PDF document.
* @function
* @returns {jsPDF}
*
* @methodOf jsPDF#
* @name addPage
*/
API.addPage = function() {
_addPage();
return this;
};
/**
* Adds text to page. Supports adding multiline text when 'text' argument is an Array of Strings.
*
* @function
* @param {String|Array} text String or array of strings to be added to the page. Each line is shifted one line down per font, spacing settings declared before this call.
* @param {Number} x Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {Object} flags Collection of settings signalling how the text must be encoded. Defaults are sane. If you think you want to pass some flags, you likely can read the source.
* @returns {jsPDF}
* @methodOf jsPDF#
* @name text
*/
API.text = function(text, x, y, flags, angle) {
/**
* Inserts something like this into PDF
* BT
* /F1 16 Tf % Font name + size
* 16 TL % How many units down for next line in multiline text
* 0 g % color
* 28.35 813.54 Td % position
* (line one) Tj
* T* (line two) Tj
* T* (line three) Tj
* ET
*/
function ESC(s) {
s = s.split("\t").join(Array(options.TabLen||9).join(" "));
return pdfEscape(s, flags);
}
// Pre-August-2012 the order of arguments was function(x, y, text, flags)
// in effort to make all calls have similar signature like
// function(data, coordinates... , miscellaneous)
// this method had its args flipped.
// code below allows backward compatibility with old arg order.
if (typeof text === 'number') {
tmp = y;
y = x;
x = text;
text = tmp;
}
// If there are any newlines in text, we assume
// the user wanted to print multiple lines, so break the
// text up into an array. If the text is already an array,
// we assume the user knows what they are doing.
if (typeof text === 'string' && text.match(/[\n\r]/)) {
text = text.split(/\r\n|\r|\n/g);
}
if (typeof flags === 'number') {
angle = flags;
flags = null;
}
var xtra = '',mode = 'Td';
if (angle) {
angle *= (Math.PI / 180);
var c = Math.cos(angle),
s = Math.sin(angle);
xtra = [f2(c), f2(s), f2(s * -1), f2(c), ''].join(" ");
mode = 'Tm';
}
flags = flags || {};
if (!('noBOM' in flags))
flags.noBOM = true;
if (!('autoencode' in flags))
flags.autoencode = true;
if (typeof text === 'string') {
text = ESC(text);
} else if (text instanceof Array) {
// we don't want to destroy original text array, so cloning it
var sa = text.concat(), da = [], len = sa.length;
// we do array.join('text that must not be PDFescaped")
// thus, pdfEscape each component separately
while (len--) {
da.push(ESC(sa.shift()));
}
text = da.join(") Tj\nT* (");
} else {
throw new Error('Type of text must be string or Array. "' + text + '" is not recognized.');
}
// Using "'" ("go next line and render text" mark) would save space but would complicate our rendering code, templates
// BT .. ET does NOT have default settings for Tf. You must state that explicitely every time for BT .. ET
// if you want text transformation matrix (+ multiline) to work reliably (which reads sizes of things from font declarations)
// Thus, there is NO useful, *reliable* concept of "default" font for a page.
// The fact that "default" (reuse font used before) font worked before in basic cases is an accident
// - readers dealing smartly with brokenness of jsPDF's markup.
out(
'BT\n/' +
activeFontKey + ' ' + activeFontSize + ' Tf\n' + // font face, style, size
(activeFontSize * lineHeightProportion) + ' TL\n' + // line spacing
textColor +
'\n' + xtra + f2(x * k) + ' ' + f2((pageHeight - y) * k) + ' ' + mode + '\n(' +
text +
') Tj\nET');
return this;
};
API.line = function(x1, y1, x2, y2) {
return this.lines([[x2 - x1, y2 - y1]], x1, y1);
};
/**
* Adds series of curves (straight lines or cubic bezier curves) to canvas, starting at `x`, `y` coordinates.
* All data points in `lines` are relative to last line origin.
* `x`, `y` become x1,y1 for first line / curve in the set.
* For lines you only need to specify [x2, y2] - (ending point) vector against x1, y1 starting point.
* For bezier curves you need to specify [x2,y2,x3,y3,x4,y4] - vectors to control points 1, 2, ending point. All vectors are against the start of the curve - x1,y1.
*
* @example .lines([[2,2],[-2,2],[1,1,2,2,3,3],[2,1]], 212,110, 10) // line, line, bezier curve, line
* @param {Array} lines Array of *vector* shifts as pairs (lines) or sextets (cubic bezier curves).
* @param {Number} x Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {Number} scale (Defaults to [1.0,1.0]) x,y Scaling factor for all vectors. Elements can be any floating number Sub-one makes drawing smaller. Over-one grows the drawing. Negative flips the direction.
* @param {String} style A string specifying the painting style or null. Valid styles include: 'S' [default] - stroke, 'F' - fill, and 'DF' (or 'FD') - fill then stroke. A null value postpones setting the style so that a shape may be composed using multiple method calls. The last drawing method call used to define the shape should not have a null style argument.
* @param {Boolean} closed If true, the path is closed with a straight line from the end of the last curve to the starting point.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name lines
*/
API.lines = function(lines, x, y, scale, style, closed) {
var scalex,scaley,i,l,leg,x2,y2,x3,y3,x4,y4;
// Pre-August-2012 the order of arguments was function(x, y, lines, scale, style)
// in effort to make all calls have similar signature like
// function(content, coordinateX, coordinateY , miscellaneous)
// this method had its args flipped.
// code below allows backward compatibility with old arg order.
if (typeof lines === 'number') {
tmp = y;
y = x;
x = lines;
lines = tmp;
}
scale = scale || [1, 1];
// starting point
out(f3(x * k) + ' ' + f3((pageHeight - y) * k) + ' m ');
scalex = scale[0];
scaley = scale[1];
l = lines.length;
//, x2, y2 // bezier only. In page default measurement "units", *after* scaling
//, x3, y3 // bezier only. In page default measurement "units", *after* scaling
// ending point for all, lines and bezier. . In page default measurement "units", *after* scaling
x4 = x; // last / ending point = starting point for first item.
y4 = y; // last / ending point = starting point for first item.
for (i = 0; i < l; i++) {
leg = lines[i];
if (leg.length === 2) {
// simple line
x4 = leg[0] * scalex + x4; // here last x4 was prior ending point
y4 = leg[1] * scaley + y4; // here last y4 was prior ending point
out(f3(x4 * k) + ' ' + f3((pageHeight - y4) * k) + ' l');
} else {
// bezier curve
x2 = leg[0] * scalex + x4; // here last x4 is prior ending point
y2 = leg[1] * scaley + y4; // here last y4 is prior ending point
x3 = leg[2] * scalex + x4; // here last x4 is prior ending point
y3 = leg[3] * scaley + y4; // here last y4 is prior ending point
x4 = leg[4] * scalex + x4; // here last x4 was prior ending point
y4 = leg[5] * scaley + y4; // here last y4 was prior ending point
out(
f3(x2 * k) + ' ' +
f3((pageHeight - y2) * k) + ' ' +
f3(x3 * k) + ' ' +
f3((pageHeight - y3) * k) + ' ' +
f3(x4 * k) + ' ' +
f3((pageHeight - y4) * k) + ' c');
}
}
if (closed) {
out(' h');
}
// stroking / filling / both the path
if (style !== null) {
out(getStyle(style));
}
return this;
};
/**
* Adds a rectangle to PDF
*
* @param {Number} x Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {Number} w Width (in units declared at inception of PDF document)
* @param {Number} h Height (in units declared at inception of PDF document)
* @param {String} style A string specifying the painting style or null. Valid styles include: 'S' [default] - stroke, 'F' - fill, and 'DF' (or 'FD') - fill then stroke. A null value postpones setting the style so that a shape may be composed using multiple method calls. The last drawing method call used to define the shape should not have a null style argument.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name rect
*/
API.rect = function(x, y, w, h, style) {
var op = getStyle(style);
out([
f2(x * k),
f2((pageHeight - y) * k),
f2(w * k),
f2(-h * k),
're'
].join(' '));
if (style !== null) {
out(getStyle(style));
}
return this;
};
/**
* Adds a triangle to PDF
*
* @param {Number} x1 Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y1 Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {Number} x2 Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y2 Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {Number} x3 Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y3 Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {String} style A string specifying the painting style or null. Valid styles include: 'S' [default] - stroke, 'F' - fill, and 'DF' (or 'FD') - fill then stroke. A null value postpones setting the style so that a shape may be composed using multiple method calls. The last drawing method call used to define the shape should not have a null style argument.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name triangle
*/
API.triangle = function(x1, y1, x2, y2, x3, y3, style) {
this.lines(
[
[x2 - x1, y2 - y1], // vector to point 2
[x3 - x2, y3 - y2], // vector to point 3
[x1 - x3, y1 - y3]// closing vector back to point 1
],
x1,
y1, // start of path
[1, 1],
style,
true);
return this;
};
/**
* Adds a rectangle with rounded corners to PDF
*
* @param {Number} x Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {Number} w Width (in units declared at inception of PDF document)
* @param {Number} h Height (in units declared at inception of PDF document)
* @param {Number} rx Radius along x axis (in units declared at inception of PDF document)
* @param {Number} rx Radius along y axis (in units declared at inception of PDF document)
* @param {String} style A string specifying the painting style or null. Valid styles include: 'S' [default] - stroke, 'F' - fill, and 'DF' (or 'FD') - fill then stroke. A null value postpones setting the style so that a shape may be composed using multiple method calls. The last drawing method call used to define the shape should not have a null style argument.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name roundedRect
*/
API.roundedRect = function(x, y, w, h, rx, ry, style) {
var MyArc = 4 / 3 * (Math.SQRT2 - 1);
this.lines(
[
[(w - 2 * rx), 0],
[(rx * MyArc), 0, rx, ry - (ry * MyArc), rx, ry],
[0, (h - 2 * ry)],
[0, (ry * MyArc), - (rx * MyArc), ry, -rx, ry],
[(-w + 2 * rx), 0],
[ - (rx * MyArc), 0, -rx, - (ry * MyArc), -rx, -ry],
[0, (-h + 2 * ry)],
[0, - (ry * MyArc), (rx * MyArc), -ry, rx, -ry]
],
x + rx,
y, // start of path
[1, 1],
style);
return this;
};
/**
* Adds an ellipse to PDF
*
* @param {Number} x Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {Number} rx Radius along x axis (in units declared at inception of PDF document)
* @param {Number} rx Radius along y axis (in units declared at inception of PDF document)
* @param {String} style A string specifying the painting style or null. Valid styles include: 'S' [default] - stroke, 'F' - fill, and 'DF' (or 'FD') - fill then stroke. A null value postpones setting the style so that a shape may be composed using multiple method calls. The last drawing method call used to define the shape should not have a null style argument.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name ellipse
*/
API.ellipse = function(x, y, rx, ry, style) {
var lx = 4 / 3 * (Math.SQRT2 - 1) * rx,
ly = 4 / 3 * (Math.SQRT2 - 1) * ry;
out([
f2((x + rx) * k),
f2((pageHeight - y) * k),
'm',
f2((x + rx) * k),
f2((pageHeight - (y - ly)) * k),
f2((x + lx) * k),
f2((pageHeight - (y - ry)) * k),
f2(x * k),
f2((pageHeight - (y - ry)) * k),
'c'
].join(' '));
out([
f2((x - lx) * k),
f2((pageHeight - (y - ry)) * k),
f2((x - rx) * k),
f2((pageHeight - (y - ly)) * k),
f2((x - rx) * k),
f2((pageHeight - y) * k),
'c'
].join(' '));
out([
f2((x - rx) * k),
f2((pageHeight - (y + ly)) * k),
f2((x - lx) * k),
f2((pageHeight - (y + ry)) * k),
f2(x * k),
f2((pageHeight - (y + ry)) * k),
'c'
].join(' '));
out([
f2((x + lx) * k),
f2((pageHeight - (y + ry)) * k),
f2((x + rx) * k),
f2((pageHeight - (y + ly)) * k),
f2((x + rx) * k),
f2((pageHeight - y) * k),
'c'
].join(' '));
if (style !== null) {
out(getStyle(style));
}
return this;
};
/**
* Adds an circle to PDF
*
* @param {Number} x Coordinate (in units declared at inception of PDF document) against left edge of the page
* @param {Number} y Coordinate (in units declared at inception of PDF document) against upper edge of the page
* @param {Number} r Radius (in units declared at inception of PDF document)
* @param {String} style A string specifying the painting style or null. Valid styles include: 'S' [default] - stroke, 'F' - fill, and 'DF' (or 'FD') - fill then stroke. A null value postpones setting the style so that a shape may be composed using multiple method calls. The last drawing method call used to define the shape should not have a null style argument.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name circle
*/
API.circle = function(x, y, r, style) {
return this.ellipse(x, y, r, r, style);
};
/**
* Adds a properties to the PDF document
*
* @param {Object} A property_name-to-property_value object structure.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setProperties
*/
API.setProperties = function(properties) {
// copying only those properties we can render.
for (var property in documentProperties) {
if (documentProperties.hasOwnProperty(property) && properties[property]) {
documentProperties[property] = properties[property];
}
}
return this;
};
/**
* Sets font size for upcoming text elements.
*
* @param {Number} size Font size in points.
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setFontSize
*/
API.setFontSize = function(size) {
activeFontSize = size;
return this;
};
/**
* Sets text font face, variant for upcoming text elements.
* See output of jsPDF.getFontList() for possible font names, styles.
*
* @param {String} fontName Font name or family. Example: "times"
* @param {String} fontStyle Font style or variant. Example: "italic"
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setFont
*/
API.setFont = function(fontName, fontStyle) {
activeFontKey = getFont(fontName, fontStyle);
// if font is not found, the above line blows up and we never go further
return this;
};
/**
* Switches font style or variant for upcoming text elements,
* while keeping the font face or family same.
* See output of jsPDF.getFontList() for possible font names, styles.
*
* @param {String} style Font style or variant. Example: "italic"
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setFontStyle
*/
API.setFontStyle = API.setFontType = function(style) {
activeFontKey = getFont(undefined, style);
// if font is not found, the above line blows up and we never go further
return this;
};
/**
* Returns an object - a tree of fontName to fontStyle relationships available to
* active PDF document.
*
* @public
* @function
* @returns {Object} Like {'times':['normal', 'italic', ... ], 'arial':['normal', 'bold', ... ], ... }
* @methodOf jsPDF#
* @name getFontList
*/
API.getFontList = function() {
// TODO: iterate over fonts array or return copy of fontmap instead in case more are ever added.
var list = {},fontName,fontStyle,tmp;
for (fontName in fontmap) {
if (fontmap.hasOwnProperty(fontName)) {
list[fontName] = tmp = [];
for (fontStyle in fontmap[fontName]) {
if (fontmap[fontName].hasOwnProperty(fontStyle)) {
tmp.push(fontStyle);
}
}
}
}
return list;
};
/**
* Sets line width for upcoming lines.
*
* @param {Number} width Line width (in units declared at inception of PDF document)
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setLineWidth
*/
API.setLineWidth = function(width) {
out((width * k).toFixed(2) + ' w');
return this;
};
/**
* Sets the stroke color for upcoming elements.
*
* Depending on the number of arguments given, Gray, RGB, or CMYK
* color space is implied.
*
* When only ch1 is given, "Gray" color space is implied and it
* must be a value in the range from 0.00 (solid black) to to 1.00 (white)
* if values are communicated as String types, or in range from 0 (black)
* to 255 (white) if communicated as Number type.
* The RGB-like 0-255 range is provided for backward compatibility.
*
* When only ch1,ch2,ch3 are given, "RGB" color space is implied and each
* value must be in the range from 0.00 (minimum intensity) to to 1.00
* (max intensity) if values are communicated as String types, or
* from 0 (min intensity) to to 255 (max intensity) if values are communicated
* as Number types.
* The RGB-like 0-255 range is provided for backward compatibility.
*
* When ch1,ch2,ch3,ch4 are given, "CMYK" color space is implied and each
* value must be a in the range from 0.00 (0% concentration) to to
* 1.00 (100% concentration)
*
* Because JavaScript treats fixed point numbers badly (rounds to
* floating point nearest to binary representation) it is highly advised to
* communicate the fractional numbers as String types, not JavaScript Number type.
*
* @param {Number|String} ch1 Color channel value
* @param {Number|String} ch2 Color channel value
* @param {Number|String} ch3 Color channel value
* @param {Number|String} ch4 Color channel value
*
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setDrawColor
*/
API.setDrawColor = function(ch1, ch2, ch3, ch4) {
var color;
if (ch2 === undefined || (ch4 === undefined && ch1 === ch2 === ch3)) {
// Gray color space.
if (typeof ch1 === 'string') {
color = ch1 + ' G';
} else {
color = f2(ch1 / 255) + ' G';
}
} else if (ch4 === undefined) {
// RGB
if (typeof ch1 === 'string') {
color = [ch1, ch2, ch3, 'RG'].join(' ');
} else {
color = [f2(ch1 / 255), f2(ch2 / 255), f2(ch3 / 255), 'RG'].join(' ');
}
} else {
// CMYK
if (typeof ch1 === 'string') {
color = [ch1, ch2, ch3, ch4, 'K'].join(' ');
} else {
color = [f2(ch1), f2(ch2), f2(ch3), f2(ch4), 'K'].join(' ');
}
}
out(color);
return this;
};
/**
* Sets the fill color for upcoming elements.
*
* Depending on the number of arguments given, Gray, RGB, or CMYK
* color space is implied.
*
* When only ch1 is given, "Gray" color space is implied and it
* must be a value in the range from 0.00 (solid black) to to 1.00 (white)
* if values are communicated as String types, or in range from 0 (black)
* to 255 (white) if communicated as Number type.
* The RGB-like 0-255 range is provided for backward compatibility.
*
* When only ch1,ch2,ch3 are given, "RGB" color space is implied and each
* value must be in the range from 0.00 (minimum intensity) to to 1.00
* (max intensity) if values are communicated as String types, or
* from 0 (min intensity) to to 255 (max intensity) if values are communicated
* as Number types.
* The RGB-like 0-255 range is provided for backward compatibility.
*
* When ch1,ch2,ch3,ch4 are given, "CMYK" color space is implied and each
* value must be a in the range from 0.00 (0% concentration) to to
* 1.00 (100% concentration)
*
* Because JavaScript treats fixed point numbers badly (rounds to
* floating point nearest to binary representation) it is highly advised to
* communicate the fractional numbers as String types, not JavaScript Number type.
*
* @param {Number|String} ch1 Color channel value
* @param {Number|String} ch2 Color channel value
* @param {Number|String} ch3 Color channel value
* @param {Number|String} ch4 Color channel value
*
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setFillColor
*/
API.setFillColor = function(ch1, ch2, ch3, ch4) {
var color;
if (ch2 === undefined || (ch4 === undefined && ch1 === ch2 === ch3)) {
// Gray color space.
if (typeof ch1 === 'string') {
color = ch1 + ' g';
} else {
color = f2(ch1 / 255) + ' g';
}
} else if (ch4 === undefined) {
// RGB
if (typeof ch1 === 'string') {
color = [ch1, ch2, ch3, 'rg'].join(' ');
} else {
color = [f2(ch1 / 255), f2(ch2 / 255), f2(ch3 / 255), 'rg'].join(' ');
}
} else {
// CMYK
if (typeof ch1 === 'string') {
color = [ch1, ch2, ch3, ch4, 'k'].join(' ');
} else {
color = [f2(ch1), f2(ch2), f2(ch3), f2(ch4), 'k'].join(' ');
}
}
out(color);
return this;
};
/**
* Sets the text color for upcoming elements.
* If only one, first argument is given,
* treats the value as gray-scale color value.
*
* @param {Number} r Red channel color value in range 0-255 or {String} r color value in hexadecimal, example: '#FFFFFF'
* @param {Number} g Green channel color value in range 0-255
* @param {Number} b Blue channel color value in range 0-255
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setTextColor
*/
API.setTextColor = function(r, g, b) {
if ((typeof r === 'string') && /^#[0-9A-Fa-f]{6}$/.test(r)) {
var hex = parseInt(r.substr(1), 16);
r = (hex >> 16) & 255;
g = (hex >> 8) & 255;
b = (hex & 255);
}
if ((r === 0 && g === 0 && b === 0) || (typeof g === 'undefined')) {
textColor = f3(r / 255) + ' g';
} else {
textColor = [f3(r / 255), f3(g / 255), f3(b / 255), 'rg'].join(' ');
}
return this;
};
/**
* Is an Object providing a mapping from human-readable to
* integer flag values designating the varieties of line cap
* and join styles.
*
* @returns {Object}
* @fieldOf jsPDF#
* @name CapJoinStyles
*/
API.CapJoinStyles = {
0 : 0,
'butt' : 0,
'but' : 0,
'miter' : 0,
1 : 1,
'round' : 1,
'rounded' : 1,
'circle' : 1,
2 : 2,
'projecting' : 2,
'project' : 2,
'square' : 2,
'bevel' : 2
};
/**
* Sets the line cap styles
* See {jsPDF.CapJoinStyles} for variants
*
* @param {String|Number} style A string or number identifying the type of line cap
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setLineCap
*/
API.setLineCap = function(style) {
var id = this.CapJoinStyles[style];
if (id === undefined) {
throw new Error("Line cap style of '" + style + "' is not recognized. See or extend .CapJoinStyles property for valid styles");
}
lineCapID = id;
out(id + ' J');
return this;
};
/**
* Sets the line join styles
* See {jsPDF.CapJoinStyles} for variants
*
* @param {String|Number} style A string or number identifying the type of line join
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name setLineJoin
*/
API.setLineJoin = function(style) {
var id = this.CapJoinStyles[style];
if (id === undefined) {
throw new Error("Line join style of '" + style + "' is not recognized. See or extend .CapJoinStyles property for valid styles");
}
lineJoinID = id;
out(id + ' j');
return this;
};
// Output is both an internal (for plugins) and external function
API.output = output;
/**
* Saves as PDF document. An alias of jsPDF.output('save', 'filename.pdf')
* @param {String} filename The filename including extension.
*
* @function
* @returns {jsPDF}
* @methodOf jsPDF#
* @name save
*/
API.save = function(filename) {
API.output('save', filename);
};
// applying plugins (more methods) ON TOP of built-in API.
// this is intentional as we allow plugins to override
// built-ins
for (var plugin in jsPDF.API) {
if (jsPDF.API.hasOwnProperty(plugin)) {
if (plugin === 'events' && jsPDF.API.events.length) {
(function(events, newEvents) {
// jsPDF.API.events is a JS Array of Arrays
// where each Array is a pair of event name, handler
// Events were added by plugins to the jsPDF instantiator.
// These are always added to the new instance and some ran
// during instantiation.
var eventname,handler_and_args,i;
for (i = newEvents.length - 1; i !== -1; i--) {
// subscribe takes 3 args: 'topic', function, runonce_flag
// if undefined, runonce is false.
// users can attach callback directly,
// or they can attach an array with [callback, runonce_flag]
// that's what the "apply" magic is for below.
eventname = newEvents[i][0];
handler_and_args = newEvents[i][1];
events.subscribe.apply(
events,
[eventname].concat(
typeof handler_and_args === 'function' ?
[handler_and_args] : handler_and_args));
}
}(events, jsPDF.API.events));
} else {
API[plugin] = jsPDF.API[plugin];
}
}
}
//////////////////////////////////////////////////////
// continuing initialization of jsPDF Document object
//////////////////////////////////////////////////////
// Add the first page automatically
addFonts();
activeFontKey = 'F1';
_addPage();
events.publish('initialized');
return API;
}
/**
* jsPDF.API is a STATIC property of jsPDF class.
* jsPDF.API is an object you can add methods and properties to.
* The methods / properties you add will show up in new jsPDF objects.
*
* One property is prepopulated. It is the 'events' Object. Plugin authors can add topics,
* callbacks to this object. These will be reassigned to all new instances of jsPDF.
* Examples:
* jsPDF.API.events['initialized'] = function(){ 'this' is API object }
* jsPDF.API.events['addFont'] = function(added_font_object){ 'this' is API object }
*
* @static
* @public
* @memberOf jsPDF
* @name API
*
* @example
* jsPDF.API.mymethod = function(){
* // 'this' will be ref to internal API object. see jsPDF source
* // , so you can refer to built-in methods like so:
* // this.line(....)
* // this.text(....)
* }
* var pdfdoc = new jsPDF()
* pdfdoc.mymethod() // <- !!!!!!
*/
jsPDF.API = {events:[]};
jsPDF.version = "1.0.0-trunk";
if (typeof define === 'function' && define.amd) {
define('jsPDF', function() {
return jsPDF;
});
} else {
global.jsPDF = jsPDF;
}
return jsPDF;
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this));
/*
* Extracted from pdf.js
* https://github.com/andreasgal/pdf.js
*
* Copyright (c) 2011 Mozilla Foundation
*
* Contributors: Andreas Gal <gal@mozilla.com>
* Chris G Jones <cjones@mozilla.com>
* Shaon Barman <shaon.barman@gmail.com>
* Vivien Nicolas <21@vingtetun.org>
* Justin D'Arcangelo <justindarc@gmail.com>
* Yury Delendik
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.
*/
var DecodeStream = (function() {
function constructor() {
this.pos = 0;
this.bufferLength = 0;
this.eof = false;
this.buffer = null;
}
constructor.prototype = {
ensureBuffer: function decodestream_ensureBuffer(requested) {
var buffer = this.buffer;
var current = buffer ? buffer.byteLength : 0;
if (requested < current)
return buffer;
var size = 512;
while (size < requested)
size <<= 1;
var buffer2 = new Uint8Array(size);
for (var i = 0; i < current; ++i)
buffer2[i] = buffer[i];
return this.buffer = buffer2;
},
getByte: function decodestream_getByte() {
var pos = this.pos;
while (this.bufferLength <= pos) {
if (this.eof)
return null;
this.readBlock();
}
return this.buffer[this.pos++];
},
getBytes: function decodestream_getBytes(length) {
var pos = this.pos;
if (length) {
this.ensureBuffer(pos + length);
var end = pos + length;
while (!this.eof && this.bufferLength < end)
this.readBlock();
var bufEnd = this.bufferLength;
if (end > bufEnd)
end = bufEnd;
} else {
while (!this.eof)
this.readBlock();
var end = this.bufferLength;
}
this.pos = end;
return this.buffer.subarray(pos, end);
},
lookChar: function decodestream_lookChar() {
var pos = this.pos;
while (this.bufferLength <= pos) {
if (this.eof)
return null;
this.readBlock();
}
return String.fromCharCode(this.buffer[this.pos]);
},
getChar: function decodestream_getChar() {
var pos = this.pos;
while (this.bufferLength <= pos) {
if (this.eof)
return null;
this.readBlock();
}
return String.fromCharCode(this.buffer[this.pos++]);
},
makeSubStream: function decodestream_makeSubstream(start, length, dict) {
var end = start + length;
while (this.bufferLength <= end && !this.eof)
this.readBlock();
return new Stream(this.buffer, start, length, dict);
},
skip: function decodestream_skip(n) {
if (!n)
n = 1;
this.pos += n;
},
reset: function decodestream_reset() {
this.pos = 0;
}
};
return constructor;
})();
var FlateStream = (function() {
if (typeof Uint32Array === 'undefined') {
return undefined;
}
var codeLenCodeMap = new Uint32Array([
16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15
]);
var lengthDecode = new Uint32Array([
0x00003, 0x00004, 0x00005, 0x00006, 0x00007, 0x00008, 0x00009, 0x0000a,
0x1000b, 0x1000d, 0x1000f, 0x10011, 0x20013, 0x20017, 0x2001b, 0x2001f,
0x30023, 0x3002b, 0x30033, 0x3003b, 0x40043, 0x40053, 0x40063, 0x40073,
0x50083, 0x500a3, 0x500c3, 0x500e3, 0x00102, 0x00102, 0x00102
]);
var distDecode = new Uint32Array([
0x00001, 0x00002, 0x00003, 0x00004, 0x10005, 0x10007, 0x20009, 0x2000d,
0x30011, 0x30019, 0x40021, 0x40031, 0x50041, 0x50061, 0x60081, 0x600c1,
0x70101, 0x70181, 0x80201, 0x80301, 0x90401, 0x90601, 0xa0801, 0xa0c01,
0xb1001, 0xb1801, 0xc2001, 0xc3001, 0xd4001, 0xd6001
]);
var fixedLitCodeTab = [new Uint32Array([
0x70100, 0x80050, 0x80010, 0x80118, 0x70110, 0x80070, 0x80030, 0x900c0,
0x70108, 0x80060, 0x80020, 0x900a0, 0x80000, 0x80080, 0x80040, 0x900e0,
0x70104, 0x80058, 0x80018, 0x90090, 0x70114, 0x80078, 0x80038, 0x900d0,
0x7010c, 0x80068, 0x80028, 0x900b0, 0x80008, 0x80088, 0x80048, 0x900f0,
0x70102, 0x80054, 0x80014, 0x8011c, 0x70112, 0x80074, 0x80034, 0x900c8,
0x7010a, 0x80064, 0x80024, 0x900a8, 0x80004, 0x80084, 0x80044, 0x900e8,
0x70106, 0x8005c, 0x8001c, 0x90098, 0x70116, 0x8007c, 0x8003c, 0x900d8,
0x7010e, 0x8006c, 0x8002c, 0x900b8, 0x8000c, 0x8008c, 0x8004c, 0x900f8,
0x70101, 0x80052, 0x80012, 0x8011a, 0x70111, 0x80072, 0x80032, 0x900c4,
0x70109, 0x80062, 0x80022, 0x900a4, 0x80002, 0x80082, 0x80042, 0x900e4,
0x70105, 0x8005a, 0x8001a, 0x90094, 0x70115, 0x8007a, 0x8003a, 0x900d4,
0x7010d, 0x8006a, 0x8002a, 0x900b4, 0x8000a, 0x8008a, 0x8004a, 0x900f4,
0x70103, 0x80056, 0x80016, 0x8011e, 0x70113, 0x80076, 0x80036, 0x900cc,
0x7010b, 0x80066, 0x80026, 0x900ac, 0x80006, 0x80086, 0x80046, 0x900ec,
0x70107, 0x8005e, 0x8001e, 0x9009c, 0x70117, 0x8007e, 0x8003e, 0x900dc,
0x7010f, 0x8006e, 0x8002e, 0x900bc, 0x8000e, 0x8008e, 0x8004e, 0x900fc,
0x70100, 0x80051, 0x80011, 0x80119, 0x70110, 0x80071, 0x80031, 0x900c2,
0x70108, 0x80061, 0x80021, 0x900a2, 0x80001, 0x80081, 0x80041, 0x900e2,
0x70104, 0x80059, 0x80019, 0x90092, 0x70114, 0x80079, 0x80039, 0x900d2,
0x7010c, 0x80069, 0x80029, 0x900b2, 0x80009, 0x80089, 0x80049, 0x900f2,
0x70102, 0x80055, 0x80015, 0x8011d, 0x70112, 0x80075, 0x80035, 0x900ca,
0x7010a, 0x80065, 0x80025, 0x900aa, 0x80005, 0x80085, 0x80045, 0x900ea,
0x70106, 0x8005d, 0x8001d, 0x9009a, 0x70116, 0x8007d, 0x8003d, 0x900da,
0x7010e, 0x8006d, 0x8002d, 0x900ba, 0x8000d, 0x8008d, 0x8004d, 0x900fa,
0x70101, 0x80053, 0x80013, 0x8011b, 0x70111, 0x80073, 0x80033, 0x900c6,
0x70109, 0x80063, 0x80023, 0x900a6, 0x80003, 0x80083, 0x80043, 0x900e6,
0x70105, 0x8005b, 0x8001b, 0x90096, 0x70115, 0x8007b, 0x8003b, 0x900d6,
0x7010d, 0x8006b, 0x8002b, 0x900b6, 0x8000b, 0x8008b, 0x8004b, 0x900f6,
0x70103, 0x80057, 0x80017, 0x8011f, 0x70113, 0x80077, 0x80037, 0x900ce,
0x7010b, 0x80067, 0x80027, 0x900ae, 0x80007, 0x80087, 0x80047, 0x900ee,
0x70107, 0x8005f, 0x8001f, 0x9009e, 0x70117, 0x8007f, 0x8003f, 0x900de,
0x7010f, 0x8006f, 0x8002f, 0x900be, 0x8000f, 0x8008f, 0x8004f, 0x900fe,
0x70100, 0x80050, 0x80010, 0x80118, 0x70110, 0x80070, 0x80030, 0x900c1,
0x70108, 0x80060, 0x80020, 0x900a1, 0x80000, 0x80080, 0x80040, 0x900e1,
0x70104, 0x80058, 0x80018, 0x90091, 0x70114, 0x80078, 0x80038, 0x900d1,
0x7010c, 0x80068, 0x80028, 0x900b1, 0x80008, 0x80088, 0x80048, 0x900f1,
0x70102, 0x80054, 0x80014, 0x8011c, 0x70112, 0x80074, 0x80034, 0x900c9,
0x7010a, 0x80064, 0x80024, 0x900a9, 0x80004, 0x80084, 0x80044, 0x900e9,
0x70106, 0x8005c, 0x8001c, 0x90099, 0x70116, 0x8007c, 0x8003c, 0x900d9,
0x7010e, 0x8006c, 0x8002c, 0x900b9, 0x8000c, 0x8008c, 0x8004c, 0x900f9,
0x70101, 0x80052, 0x80012, 0x8011a, 0x70111, 0x80072, 0x80032, 0x900c5,
0x70109, 0x80062, 0x80022, 0x900a5, 0x80002, 0x80082, 0x80042, 0x900e5,
0x70105, 0x8005a, 0x8001a, 0x90095, 0x70115, 0x8007a, 0x8003a, 0x900d5,
0x7010d, 0x8006a, 0x8002a, 0x900b5, 0x8000a, 0x8008a, 0x8004a, 0x900f5,
0x70103, 0x80056, 0x80016, 0x8011e, 0x70113, 0x80076, 0x80036, 0x900cd,
0x7010b, 0x80066, 0x80026, 0x900ad, 0x80006, 0x80086, 0x80046, 0x900ed,
0x70107, 0x8005e, 0x8001e, 0x9009d, 0x70117, 0x8007e, 0x8003e, 0x900dd,
0x7010f, 0x8006e, 0x8002e, 0x900bd, 0x8000e, 0x8008e, 0x8004e, 0x900fd,
0x70100, 0x80051, 0x80011, 0x80119, 0x70110, 0x80071, 0x80031, 0x900c3,
0x70108, 0x80061, 0x80021, 0x900a3, 0x80001, 0x80081, 0x80041, 0x900e3,
0x70104, 0x80059, 0x80019, 0x90093, 0x70114, 0x80079, 0x80039, 0x900d3,
0x7010c, 0x80069, 0x80029, 0x900b3, 0x80009, 0x80089, 0x80049, 0x900f3,
0x70102, 0x80055, 0x80015, 0x8011d, 0x70112, 0x80075, 0x80035, 0x900cb,
0x7010a, 0x80065, 0x80025, 0x900ab, 0x80005, 0x80085, 0x80045, 0x900eb,
0x70106, 0x8005d, 0x8001d, 0x9009b, 0x70116, 0x8007d, 0x8003d, 0x900db,
0x7010e, 0x8006d, 0x8002d, 0x900bb, 0x8000d, 0x8008d, 0x8004d, 0x900fb,
0x70101, 0x80053, 0x80013, 0x8011b, 0x70111, 0x80073, 0x80033, 0x900c7,
0x70109, 0x80063, 0x80023, 0x900a7, 0x80003, 0x80083, 0x80043, 0x900e7,
0x70105, 0x8005b, 0x8001b, 0x90097, 0x70115, 0x8007b, 0x8003b, 0x900d7,
0x7010d, 0x8006b, 0x8002b, 0x900b7, 0x8000b, 0x8008b, 0x8004b, 0x900f7,
0x70103, 0x80057, 0x80017, 0x8011f, 0x70113, 0x80077, 0x80037, 0x900cf,
0x7010b, 0x80067, 0x80027, 0x900af, 0x80007, 0x80087, 0x80047, 0x900ef,
0x70107, 0x8005f, 0x8001f, 0x9009f, 0x70117, 0x8007f, 0x8003f, 0x900df,
0x7010f, 0x8006f, 0x8002f, 0x900bf, 0x8000f, 0x8008f, 0x8004f, 0x900ff
]), 9];
var fixedDistCodeTab = [new Uint32Array([
0x50000, 0x50010, 0x50008, 0x50018, 0x50004, 0x50014, 0x5000c, 0x5001c,
0x50002, 0x50012, 0x5000a, 0x5001a, 0x50006, 0x50016, 0x5000e, 0x00000,
0x50001, 0x50011, 0x50009, 0x50019, 0x50005, 0x50015, 0x5000d, 0x5001d,
0x50003, 0x50013, 0x5000b, 0x5001b, 0x50007, 0x50017, 0x5000f, 0x00000
]), 5];
function error(e) {
throw new Error(e)
}
function constructor(bytes) {
//var bytes = stream.getBytes();
var bytesPos = 0;
var cmf = bytes[bytesPos++];
var flg = bytes[bytesPos++];
if (cmf == -1 || flg == -1)
error('Invalid header in flate stream');
if ((cmf & 0x0f) != 0x08)
error('Unknown compression method in flate stream');
if ((((cmf << 8) + flg) % 31) != 0)
error('Bad FCHECK in flate stream');
if (flg & 0x20)
error('FDICT bit set in flate stream');
this.bytes = bytes;
this.bytesPos = bytesPos;
this.codeSize = 0;
this.codeBuf = 0;
DecodeStream.call(this);
}
constructor.prototype = Object.create(DecodeStream.prototype);
constructor.prototype.getBits = function(bits) {
var codeSize = this.codeSize;
var codeBuf = this.codeBuf;
var bytes = this.bytes;
var bytesPos = this.bytesPos;
var b;
while (codeSize < bits) {
if (typeof (b = bytes[bytesPos++]) == 'undefined')
error('Bad encoding in flate stream');
codeBuf |= b << codeSize;
codeSize += 8;
}
b = codeBuf & ((1 << bits) - 1);
this.codeBuf = codeBuf >> bits;
this.codeSize = codeSize -= bits;
this.bytesPos = bytesPos;
return b;
};
constructor.prototype.getCode = function(table) {
var codes = table[0];
var maxLen = table[1];
var codeSize = this.codeSize;
var codeBuf = this.codeBuf;
var bytes = this.bytes;
var bytesPos = this.bytesPos;
while (codeSize < maxLen) {
var b;
if (typeof (b = bytes[bytesPos++]) == 'undefined')
error('Bad encoding in flate stream');
codeBuf |= (b << codeSize);
codeSize += 8;
}
var code = codes[codeBuf & ((1 << maxLen) - 1)];
var codeLen = code >> 16;
var codeVal = code & 0xffff;
if (codeSize == 0 || codeSize < codeLen || codeLen == 0)
error('Bad encoding in flate stream');
this.codeBuf = (codeBuf >> codeLen);
this.codeSize = (codeSize - codeLen);
this.bytesPos = bytesPos;
return codeVal;
};
constructor.prototype.generateHuffmanTable = function(lengths) {
var n = lengths.length;
// find max code length
var maxLen = 0;
for (var i = 0; i < n; ++i) {
if (lengths[i] > maxLen)
maxLen = lengths[i];
}
// build the table
var size = 1 << maxLen;
var codes = new Uint32Array(size);
for (var len = 1, code = 0, skip = 2;
len <= maxLen;
++len, code <<= 1, skip <<= 1) {
for (var val = 0; val < n; ++val) {
if (lengths[val] == len) {
// bit-reverse the code
var code2 = 0;
var t = code;
for (var i = 0; i < len; ++i) {
code2 = (code2 << 1) | (t & 1);
t >>= 1;
}
// fill the table entries
for (var i = code2; i < size; i += skip)
codes[i] = (len << 16) | val;
++code;
}
}
}
return [codes, maxLen];
};
constructor.prototype.readBlock = function() {
function repeat(stream, array, len, offset, what) {
var repeat = stream.getBits(len) + offset;
while (repeat-- > 0)
array[i++] = what;
}
// read block header
var hdr = this.getBits(3);
if (hdr & 1)
this.eof = true;
hdr >>= 1;
if (hdr == 0) { // uncompressed block
var bytes = this.bytes;
var bytesPos = this.bytesPos;
var b;
if (typeof (b = bytes[bytesPos++]) == 'undefined')
error('Bad block header in flate stream');
var blockLen = b;
if (typeof (b = bytes[bytesPos++]) == 'undefined')
error('Bad block header in flate stream');
blockLen |= (b << 8);
if (typeof (b = bytes[bytesPos++]) == 'undefined')
error('Bad block header in flate stream');
var check = b;
if (typeof (b = bytes[bytesPos++]) == 'undefined')
error('Bad block header in flate stream');
check |= (b << 8);
if (check != (~blockLen & 0xffff))
error('Bad uncompressed block length in flate stream');
this.codeBuf = 0;
this.codeSize = 0;
var bufferLength = this.bufferLength;
var buffer = this.ensureBuffer(bufferLength + blockLen);
var end = bufferLength + blockLen;
this.bufferLength = end;
for (var n = bufferLength; n < end; ++n) {
if (typeof (b = bytes[bytesPos++]) == 'undefined') {
this.eof = true;
break;
}
buffer[n] = b;
}
this.bytesPos = bytesPos;
return;
}
var litCodeTable;
var distCodeTable;
if (hdr == 1) { // compressed block, fixed codes
litCodeTable = fixedLitCodeTab;
distCodeTable = fixedDistCodeTab;
} else if (hdr == 2) { // compressed block, dynamic codes
var numLitCodes = this.getBits(5) + 257;
var numDistCodes = this.getBits(5) + 1;
var numCodeLenCodes = this.getBits(4) + 4;
// build the code lengths code table
var codeLenCodeLengths = Array(codeLenCodeMap.length);
var i = 0;
while (i < numCodeLenCodes)
codeLenCodeLengths[codeLenCodeMap[i++]] = this.getBits(3);
var codeLenCodeTab = this.generateHuffmanTable(codeLenCodeLengths);
// build the literal and distance code tables
var len = 0;
var i = 0;
var codes = numLitCodes + numDistCodes;
var codeLengths = new Array(codes);
while (i < codes) {
var code = this.getCode(codeLenCodeTab);
if (code == 16) {
repeat(this, codeLengths, 2, 3, len);
} else if (code == 17) {
repeat(this, codeLengths, 3, 3, len = 0);
} else if (code == 18) {
repeat(this, codeLengths, 7, 11, len = 0);
} else {
codeLengths[i++] = len = code;
}
}
litCodeTable =
this.generateHuffmanTable(codeLengths.slice(0, numLitCodes));
distCodeTable =
this.generateHuffmanTable(codeLengths.slice(numLitCodes, codes));
} else {
error('Unknown block type in flate stream');
}
var buffer = this.buffer;
var limit = buffer ? buffer.length : 0;
var pos = this.bufferLength;
while (true) {
var code1 = this.getCode(litCodeTable);
if (code1 < 256) {
if (pos + 1 >= limit) {
buffer = this.ensureBuffer(pos + 1);
limit = buffer.length;
}
buffer[pos++] = code1;
continue;
}
if (code1 == 256) {
this.bufferLength = pos;
return;
}
code1 -= 257;
code1 = lengthDecode[code1];
var code2 = code1 >> 16;
if (code2 > 0)
code2 = this.getBits(code2);
var len = (code1 & 0xffff) + code2;
code1 = this.getCode(distCodeTable);
code1 = distDecode[code1];
code2 = code1 >> 16;
if (code2 > 0)
code2 = this.getBits(code2);
var dist = (code1 & 0xffff) + code2;
if (pos + len >= limit) {
buffer = this.ensureBuffer(pos + len);
limit = buffer.length;
}
for (var k = 0; k < len; ++k, ++pos)
buffer[pos] = buffer[pos - dist];
}
};
return constructor;
})();
// Generated by CoffeeScript 1.4.0
/*
# PNG.js
# Copyright (c) 2011 Devon Govett
# MIT LICENSE
#
# Permission is hereby granted, free of charge, to any person obtaining a copy of this
# software and associated documentation files (the "Software"), to deal in the Software
# without restriction, including without limitation the rights to use, copy, modify, merge,
# publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
# to whom the Software is furnished to do so, subject to the following conditions:
#
# The above copyright notice and this permission notice shall be included in all copies or
# substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
# BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
# DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
(function(global) {
var PNG;
PNG = (function() {
var APNG_BLEND_OP_OVER, APNG_BLEND_OP_SOURCE, APNG_DISPOSE_OP_BACKGROUND, APNG_DISPOSE_OP_NONE, APNG_DISPOSE_OP_PREVIOUS, makeImage, scratchCanvas, scratchCtx;
PNG.load = function(url, canvas, callback) {
var xhr,
_this = this;
if (typeof canvas === 'function') {
callback = canvas;
}
xhr = new XMLHttpRequest;
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
var data, png;
data = new Uint8Array(xhr.response || xhr.mozResponseArrayBuffer);
png = new PNG(data);
if (typeof (canvas != null ? canvas.getContext : void 0) === 'function') {
png.render(canvas);
}
return typeof callback === "function" ? callback(png) : void 0;
};
return xhr.send(null);
};
APNG_DISPOSE_OP_NONE = 0;
APNG_DISPOSE_OP_BACKGROUND = 1;
APNG_DISPOSE_OP_PREVIOUS = 2;
APNG_BLEND_OP_SOURCE = 0;
APNG_BLEND_OP_OVER = 1;
function PNG(data) {
var chunkSize, colors, palLen, delayDen, delayNum, frame, i, index, key, section, palShort, text, _i, _j, _ref;
this.data = data;
this.pos = 8;
this.palette = [];
this.imgData = [];
this.transparency = {};
this.animation = null;
this.text = {};
frame = null;
while (true) {
chunkSize = this.readUInt32();
section = ((function() {
var _i, _results;
_results = [];
for (i = _i = 0; _i < 4; i = ++_i) {
_results.push(String.fromCharCode(this.data[this.pos++]));
}
return _results;
}).call(this)).join('');
switch (section) {
case 'IHDR':
this.width = this.readUInt32();
this.height = this.readUInt32();
this.bits = this.data[this.pos++];
this.colorType = this.data[this.pos++];
this.compressionMethod = this.data[this.pos++];
this.filterMethod = this.data[this.pos++];
this.interlaceMethod = this.data[this.pos++];
break;
case 'acTL':
this.animation = {
numFrames: this.readUInt32(),
numPlays: this.readUInt32() || Infinity,
frames: []
};
break;
case 'PLTE':
this.palette = this.read(chunkSize);
break;
case 'fcTL':
if (frame) {
this.animation.frames.push(frame);
}
this.pos += 4;
frame = {
width: this.readUInt32(),
height: this.readUInt32(),
xOffset: this.readUInt32(),
yOffset: this.readUInt32()
};
delayNum = this.readUInt16();
delayDen = this.readUInt16() || 100;
frame.delay = 1000 * delayNum / delayDen;
frame.disposeOp = this.data[this.pos++];
frame.blendOp = this.data[this.pos++];
frame.data = [];
break;
case 'IDAT':
case 'fdAT':
if (section === 'fdAT') {
this.pos += 4;
chunkSize -= 4;
}
data = (frame != null ? frame.data : void 0) || this.imgData;
for (i = _i = 0; 0 <= chunkSize ? _i < chunkSize : _i > chunkSize; i = 0 <= chunkSize ? ++_i : --_i) {
data.push(this.data[this.pos++]);
}
break;
case 'tRNS':
this.transparency = {};
switch (this.colorType) {
case 3:
palLen = this.palette.length/3;
this.transparency.indexed = this.read(chunkSize);
if(this.transparency.indexed.length > palLen)
throw new Error('More transparent colors than palette size');
/*
* According to the PNG spec trns should be increased to the same size as palette if shorter
*/
//palShort = 255 - this.transparency.indexed.length;
palShort = palLen - this.transparency.indexed.length;
if (palShort > 0) {
for (i = _j = 0; 0 <= palShort ? _j < palShort : _j > palShort; i = 0 <= palShort ? ++_j : --_j) {
this.transparency.indexed.push(255);
}
}
break;
case 0:
this.transparency.grayscale = this.read(chunkSize)[0];
break;
case 2:
this.transparency.rgb = this.read(chunkSize);
}
break;
case 'tEXt':
text = this.read(chunkSize);
index = text.indexOf(0);
key = String.fromCharCode.apply(String, text.slice(0, index));
this.text[key] = String.fromCharCode.apply(String, text.slice(index + 1));
break;
case 'IEND':
if (frame) {
this.animation.frames.push(frame);
}
this.colors = (function() {
switch (this.colorType) {
case 0:
case 3:
case 4:
return 1;
case 2:
case 6:
return 3;
}
}).call(this);
this.hasAlphaChannel = (_ref = this.colorType) === 4 || _ref === 6;
colors = this.colors + (this.hasAlphaChannel ? 1 : 0);
this.pixelBitlength = this.bits * colors;
this.colorSpace = (function() {
switch (this.colors) {
case 1:
return 'DeviceGray';
case 3:
return 'DeviceRGB';
}
}).call(this);
this.imgData = new Uint8Array(this.imgData);
return;
default:
this.pos += chunkSize;
}
this.pos += 4;
if (this.pos > this.data.length) {
throw new Error("Incomplete or corrupt PNG file");
}
}
return;
}
PNG.prototype.read = function(bytes) {
var i, _i, _results;
_results = [];
for (i = _i = 0; 0 <= bytes ? _i < bytes : _i > bytes; i = 0 <= bytes ? ++_i : --_i) {
_results.push(this.data[this.pos++]);
}
return _results;
};
PNG.prototype.readUInt32 = function() {
var b1, b2, b3, b4;
b1 = this.data[this.pos++] << 24;
b2 = this.data[this.pos++] << 16;
b3 = this.data[this.pos++] << 8;
b4 = this.data[this.pos++];
return b1 | b2 | b3 | b4;
};
PNG.prototype.readUInt16 = function() {
var b1, b2;
b1 = this.data[this.pos++] << 8;
b2 = this.data[this.pos++];
return b1 | b2;
};
PNG.prototype.decodePixels = function(data) {
var abyte, c, col, i, left, length, p, pa, paeth, pb, pc, pixelBytes, pixels, pos, row, scanlineLength, upper, upperLeft, _i, _j, _k, _l, _m;
if (data == null) {
data = this.imgData;
}
if (data.length === 0) {
return new Uint8Array(0);
}
data = new FlateStream(data);
data = data.getBytes();
pixelBytes = this.pixelBitlength / 8;
scanlineLength = pixelBytes * this.width;
pixels = new Uint8Array(scanlineLength * this.height);
length = data.length;
row = 0;
pos = 0;
c = 0;
while (pos < length) {
switch (data[pos++]) {
case 0:
for (i = _i = 0; _i < scanlineLength; i = _i += 1) {
pixels[c++] = data[pos++];
}
break;
case 1:
for (i = _j = 0; _j < scanlineLength; i = _j += 1) {
abyte = data[pos++];
left = i < pixelBytes ? 0 : pixels[c - pixelBytes];
pixels[c++] = (abyte + left) % 256;
}
break;
case 2:
for (i = _k = 0; _k < scanlineLength; i = _k += 1) {
abyte = data[pos++];
col = (i - (i % pixelBytes)) / pixelBytes;
upper = row && pixels[(row - 1) * scanlineLength + col * pixelBytes + (i % pixelBytes)];
pixels[c++] = (upper + abyte) % 256;
}
break;
case 3:
for (i = _l = 0; _l < scanlineLength; i = _l += 1) {
abyte = data[pos++];
col = (i - (i % pixelBytes)) / pixelBytes;
left = i < pixelBytes ? 0 : pixels[c - pixelBytes];
upper = row && pixels[(row - 1) * scanlineLength + col * pixelBytes + (i % pixelBytes)];
pixels[c++] = (abyte + Math.floor((left + upper) / 2)) % 256;
}
break;
case 4:
for (i = _m = 0; _m < scanlineLength; i = _m += 1) {
abyte = data[pos++];
col = (i - (i % pixelBytes)) / pixelBytes;
left = i < pixelBytes ? 0 : pixels[c - pixelBytes];
if (row === 0) {
upper = upperLeft = 0;
} else {
upper = pixels[(row - 1) * scanlineLength + col * pixelBytes + (i % pixelBytes)];
upperLeft = col && pixels[(row - 1) * scanlineLength + (col - 1) * pixelBytes + (i % pixelBytes)];
}
p = left + upper - upperLeft;
pa = Math.abs(p - left);
pb = Math.abs(p - upper);
pc = Math.abs(p - upperLeft);
if (pa <= pb && pa <= pc) {
paeth = left;
} else if (pb <= pc) {
paeth = upper;
} else {
paeth = upperLeft;
}
pixels[c++] = (abyte + paeth) % 256;
}
break;
default:
throw new Error("Invalid filter algorithm: " + data[pos - 1]);
}
row++;
}
return pixels;
};
PNG.prototype.decodePalette = function() {
var c, i, length, palette, pos, ret, transparency, _i, _ref, _ref1;
palette = this.palette;
transparency = this.transparency.indexed || [];
ret = new Uint8Array((transparency.length || 0) + palette.length);
pos = 0;
length = palette.length;
c = 0;
for (i = _i = 0, _ref = palette.length; _i < _ref; i = _i += 3) {
ret[pos++] = palette[i];
ret[pos++] = palette[i + 1];
ret[pos++] = palette[i + 2];
ret[pos++] = (_ref1 = transparency[c++]) != null ? _ref1 : 255;
}
return ret;
};
PNG.prototype.copyToImageData = function(imageData, pixels) {
var alpha, colors, data, i, input, j, k, length, palette, v, _ref;
colors = this.colors;
palette = null;
alpha = this.hasAlphaChannel;
if (this.palette.length) {
palette = (_ref = this._decodedPalette) != null ? _ref : this._decodedPalette = this.decodePalette();
colors = 4;
alpha = true;
}
data = imageData.data || imageData;
length = data.length;
input = palette || pixels;
i = j = 0;
if (colors === 1) {
while (i < length) {
k = palette ? pixels[i / 4] * 4 : j;
v = input[k++];
data[i++] = v;
data[i++] = v;
data[i++] = v;
data[i++] = alpha ? input[k++] : 255;
j = k;
}
} else {
while (i < length) {
k = palette ? pixels[i / 4] * 4 : j;
data[i++] = input[k++];
data[i++] = input[k++];
data[i++] = input[k++];
data[i++] = alpha ? input[k++] : 255;
j = k;
}
}
};
PNG.prototype.decode = function() {
var ret;
ret = new Uint8Array(this.width * this.height * 4);
this.copyToImageData(ret, this.decodePixels());
return ret;
};
try {
scratchCanvas = global.document.createElement('canvas');
scratchCtx = scratchCanvas.getContext('2d');
} catch(e) {
return -1;
}
makeImage = function(imageData) {
var img;
scratchCtx.width = imageData.width;
scratchCtx.height = imageData.height;
scratchCtx.clearRect(0, 0, imageData.width, imageData.height);
scratchCtx.putImageData(imageData, 0, 0);
img = new Image;
img.src = scratchCanvas.toDataURL();
return img;
};
PNG.prototype.decodeFrames = function(ctx) {
var frame, i, imageData, pixels, _i, _len, _ref, _results;
if (!this.animation) {
return;
}
_ref = this.animation.frames;
_results = [];
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
frame = _ref[i];
imageData = ctx.createImageData(frame.width, frame.height);
pixels = this.decodePixels(new Uint8Array(frame.data));
this.copyToImageData(imageData, pixels);
frame.imageData = imageData;
_results.push(frame.image = makeImage(imageData));
}
return _results;
};
PNG.prototype.renderFrame = function(ctx, number) {
var frame, frames, prev;
frames = this.animation.frames;
frame = frames[number];
prev = frames[number - 1];
if (number === 0) {
ctx.clearRect(0, 0, this.width, this.height);
}
if ((prev != null ? prev.disposeOp : void 0) === APNG_DISPOSE_OP_BACKGROUND) {
ctx.clearRect(prev.xOffset, prev.yOffset, prev.width, prev.height);
} else if ((prev != null ? prev.disposeOp : void 0) === APNG_DISPOSE_OP_PREVIOUS) {
ctx.putImageData(prev.imageData, prev.xOffset, prev.yOffset);
}
if (frame.blendOp === APNG_BLEND_OP_SOURCE) {
ctx.clearRect(frame.xOffset, frame.yOffset, frame.width, frame.height);
}
return ctx.drawImage(frame.image, frame.xOffset, frame.yOffset);
};
PNG.prototype.animate = function(ctx) {
var doFrame, frameNumber, frames, numFrames, numPlays, _ref,
_this = this;
frameNumber = 0;
_ref = this.animation, numFrames = _ref.numFrames, frames = _ref.frames, numPlays = _ref.numPlays;
return (doFrame = function() {
var f, frame;
f = frameNumber++ % numFrames;
frame = frames[f];
_this.renderFrame(ctx, f);
if (numFrames > 1 && frameNumber / numFrames < numPlays) {
return _this.animation._timeout = setTimeout(doFrame, frame.delay);
}
})();
};
PNG.prototype.stopAnimation = function() {
var _ref;
return clearTimeout((_ref = this.animation) != null ? _ref._timeout : void 0);
};
PNG.prototype.render = function(canvas) {
var ctx, data;
if (canvas._png) {
canvas._png.stopAnimation();
}
canvas._png = this;
canvas.width = this.width;
canvas.height = this.height;
ctx = canvas.getContext("2d");
if (this.animation) {
this.decodeFrames(ctx);
return this.animate(ctx);
} else {
data = ctx.createImageData(this.width, this.height);
this.copyToImageData(data, this.decodePixels());
return ctx.putImageData(data, 0, 0);
}
};
return PNG;
})();
global.PNG = PNG;
})(typeof window !== "undefined" && window || this);
/* FileSaver.js
* A saveAs() FileSaver implementation.
* 2014-07-25
*
* By Eli Grey, http://eligrey.com
* License: X11/MIT
* See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
*/
/*global self */
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs = saveAs
// IE 10+ (native saveAs)
|| (typeof navigator !== "undefined" &&
navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
// Everyone else
|| (function(view) {
"use strict";
// IE <10 is explicitly unsupported
if (typeof navigator !== "undefined" &&
/MSIE [1-9]\./.test(navigator.userAgent)) {
return;
}
var
doc = view.document
// only get URL when necessary in case Blob.js hasn't overridden it yet
, get_URL = function() {
return view.URL || view.webkitURL || view;
}
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
, can_use_save_link = !view.externalHost && "download" in save_link
, click = function(node) {
var event = doc.createEvent("MouseEvents");
event.initMouseEvent(
"click", true, false, view, 0, 0, 0, 0, 0
, false, false, false, false, 0, null
);
node.dispatchEvent(event);
}
, webkit_req_fs = view.webkitRequestFileSystem
, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
, throw_outside = function(ex) {
(view.setImmediate || view.setTimeout)(function() {
throw ex;
}, 0);
}
, force_saveable_type = "application/octet-stream"
, fs_min_size = 0
// See https://code.google.com/p/chromium/issues/detail?id=375297#c7 for
// the reasoning behind the timeout and revocation flow
, arbitrary_revoke_timeout = 10
, revoke = function(file) {
var revoker = function() {
if (typeof file === "string") { // file is an object URL
get_URL().revokeObjectURL(file);
} else { // file is a File
file.remove();
}
};
if (view.chrome) {
revoker();
} else {
setTimeout(revoker, arbitrary_revoke_timeout);
}
}
, dispatch = function(filesaver, event_types, event) {
event_types = [].concat(event_types);
var i = event_types.length;
while (i--) {
var listener = filesaver["on" + event_types[i]];
if (typeof listener === "function") {
try {
listener.call(filesaver, event || filesaver);
} catch (ex) {
throw_outside(ex);
}
}
}
}
, FileSaver = function(blob, name) {
// First try a.download, then web filesystem, then object URLs
var
filesaver = this
, type = blob.type
, blob_changed = false
, object_url
, target_view
, dispatch_all = function() {
dispatch(filesaver, "writestart progress write writeend".split(" "));
}
// on any filesys errors revert to saving with object URLs
, fs_error = function() {
// don't create more object URLs than needed
if (blob_changed || !object_url) {
object_url = get_URL().createObjectURL(blob);
}
if (target_view) {
target_view.location.href = object_url;
} else {
var new_tab = view.open(object_url, "_blank");
if (new_tab == undefined && typeof safari !== "undefined") {
//Apple do not allow window.open, see http://bit.ly/1kZffRI
view.location.href = object_url
}
}
filesaver.readyState = filesaver.DONE;
dispatch_all();
revoke(object_url);
}
, abortable = function(func) {
return function() {
if (filesaver.readyState !== filesaver.DONE) {
return func.apply(this, arguments);
}
};
}
, create_if_not_found = {create: true, exclusive: false}
, slice
;
filesaver.readyState = filesaver.INIT;
if (!name) {
name = "download";
}
if (can_use_save_link) {
object_url = get_URL().createObjectURL(blob);
save_link.href = object_url;
save_link.download = name;
click(save_link);
filesaver.readyState = filesaver.DONE;
dispatch_all();
revoke(object_url);
return;
}
// Object and web filesystem URLs have a problem saving in Google Chrome when
// viewed in a tab, so I force save with application/octet-stream
// http://code.google.com/p/chromium/issues/detail?id=91158
// Update: Google errantly closed 91158, I submitted it again:
// https://code.google.com/p/chromium/issues/detail?id=389642
if (view.chrome && type && type !== force_saveable_type) {
slice = blob.slice || blob.webkitSlice;
blob = slice.call(blob, 0, blob.size, force_saveable_type);
blob_changed = true;
}
// Since I can't be sure that the guessed media type will trigger a download
// in WebKit, I append .download to the filename.
// https://bugs.webkit.org/show_bug.cgi?id=65440
if (webkit_req_fs && name !== "download") {
name += ".download";
}
if (type === force_saveable_type || webkit_req_fs) {
target_view = view;
}
if (!req_fs) {
fs_error();
return;
}
fs_min_size += blob.size;
req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {
fs.root.getDirectory("saved", create_if_not_found, abortable(function(dir) {
var save = function() {
dir.getFile(name, create_if_not_found, abortable(function(file) {
file.createWriter(abortable(function(writer) {
writer.onwriteend = function(event) {
target_view.location.href = file.toURL();
filesaver.readyState = filesaver.DONE;
dispatch(filesaver, "writeend", event);
revoke(file);
};
writer.onerror = function() {
var error = writer.error;
if (error.code !== error.ABORT_ERR) {
fs_error();
}
};
"writestart progress write abort".split(" ").forEach(function(event) {
writer["on" + event] = filesaver["on" + event];
});
writer.write(blob);
filesaver.abort = function() {
writer.abort();
filesaver.readyState = filesaver.DONE;
};
filesaver.readyState = filesaver.WRITING;
}), fs_error);
}), fs_error);
};
dir.getFile(name, {create: false}, abortable(function(file) {
// delete file if it already exists
file.remove();
save();
}), abortable(function(ex) {
if (ex.code === ex.NOT_FOUND_ERR) {
save();
} else {
fs_error();
}
}));
}), fs_error);
}), fs_error);
}
, FS_proto = FileSaver.prototype
, saveAs = function(blob, name) {
return new FileSaver(blob, name);
}
;
FS_proto.abort = function() {
var filesaver = this;
filesaver.readyState = filesaver.DONE;
dispatch(filesaver, "abort");
};
FS_proto.readyState = FS_proto.INIT = 0;
FS_proto.WRITING = 1;
FS_proto.DONE = 2;
FS_proto.error =
FS_proto.onwritestart =
FS_proto.onprogress =
FS_proto.onwrite =
FS_proto.onabort =
FS_proto.onerror =
FS_proto.onwriteend =
null;
return saveAs;
}(
typeof self !== "undefined" && self
|| typeof window !== "undefined" && window
|| this.content
));
// `self` is undefined in Firefox for Android content script context
// while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window
if (typeof module !== "undefined" && module !== null) {
module.exports = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
define([], function() {
return saveAs;
});
}