7ef7f95374
This reduces peak RSS by about 300 MiB on my Mac when scrolling slowly through the first 30 pages of a scanned black and white document.
2116 lines
68 KiB
JavaScript
2116 lines
68 KiB
JavaScript
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
|
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
|
|
/* Copyright 2012 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
/* globals error, PDFJS, assert, info, shadow, TextRenderingMode,
|
|
FONT_IDENTITY_MATRIX, Uint32ArrayView, IDENTITY_MATRIX, ImageData,
|
|
ImageKind, isArray, isNum, TilingPattern, OPS, Promise, Util, warn,
|
|
getShadingPatternFromIR, WebGLUtils */
|
|
|
|
'use strict';
|
|
|
|
// <canvas> contexts store most of the state we need natively.
|
|
// However, PDF needs a bit more state, which we store here.
|
|
|
|
// Minimal font size that would be used during canvas fillText operations.
|
|
var MIN_FONT_SIZE = 16;
|
|
var MAX_GROUP_SIZE = 4096;
|
|
|
|
var COMPILE_TYPE3_GLYPHS = true;
|
|
|
|
function createScratchCanvas(width, height) {
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
return canvas;
|
|
}
|
|
|
|
function addContextCurrentTransform(ctx) {
|
|
// If the context doesn't expose a `mozCurrentTransform`, add a JS based on.
|
|
if (!ctx.mozCurrentTransform) {
|
|
// Store the original context
|
|
ctx._scaleX = ctx._scaleX || 1.0;
|
|
ctx._scaleY = ctx._scaleY || 1.0;
|
|
ctx._originalSave = ctx.save;
|
|
ctx._originalRestore = ctx.restore;
|
|
ctx._originalRotate = ctx.rotate;
|
|
ctx._originalScale = ctx.scale;
|
|
ctx._originalTranslate = ctx.translate;
|
|
ctx._originalTransform = ctx.transform;
|
|
ctx._originalSetTransform = ctx.setTransform;
|
|
|
|
ctx._transformMatrix = [ctx._scaleX, 0, 0, ctx._scaleY, 0, 0];
|
|
ctx._transformStack = [];
|
|
|
|
Object.defineProperty(ctx, 'mozCurrentTransform', {
|
|
get: function getCurrentTransform() {
|
|
return this._transformMatrix;
|
|
}
|
|
});
|
|
|
|
Object.defineProperty(ctx, 'mozCurrentTransformInverse', {
|
|
get: function getCurrentTransformInverse() {
|
|
// Calculation done using WolframAlpha:
|
|
// http://www.wolframalpha.com/input/?
|
|
// i=Inverse+{{a%2C+c%2C+e}%2C+{b%2C+d%2C+f}%2C+{0%2C+0%2C+1}}
|
|
|
|
var m = this._transformMatrix;
|
|
var a = m[0], b = m[1], c = m[2], d = m[3], e = m[4], f = m[5];
|
|
|
|
var ad_bc = a * d - b * c;
|
|
var bc_ad = b * c - a * d;
|
|
|
|
return [
|
|
d / ad_bc,
|
|
b / bc_ad,
|
|
c / bc_ad,
|
|
a / ad_bc,
|
|
(d * e - c * f) / bc_ad,
|
|
(b * e - a * f) / ad_bc
|
|
];
|
|
}
|
|
});
|
|
|
|
ctx.save = function ctxSave() {
|
|
var old = this._transformMatrix;
|
|
this._transformStack.push(old);
|
|
this._transformMatrix = old.slice(0, 6);
|
|
|
|
this._originalSave();
|
|
};
|
|
|
|
ctx.restore = function ctxRestore() {
|
|
var prev = this._transformStack.pop();
|
|
if (prev) {
|
|
this._transformMatrix = prev;
|
|
this._originalRestore();
|
|
}
|
|
};
|
|
|
|
ctx.translate = function ctxTranslate(x, y) {
|
|
var m = this._transformMatrix;
|
|
m[4] = m[0] * x + m[2] * y + m[4];
|
|
m[5] = m[1] * x + m[3] * y + m[5];
|
|
|
|
this._originalTranslate(x, y);
|
|
};
|
|
|
|
ctx.scale = function ctxScale(x, y) {
|
|
var m = this._transformMatrix;
|
|
m[0] = m[0] * x;
|
|
m[1] = m[1] * x;
|
|
m[2] = m[2] * y;
|
|
m[3] = m[3] * y;
|
|
|
|
this._originalScale(x, y);
|
|
};
|
|
|
|
ctx.transform = function ctxTransform(a, b, c, d, e, f) {
|
|
var m = this._transformMatrix;
|
|
this._transformMatrix = [
|
|
m[0] * a + m[2] * b,
|
|
m[1] * a + m[3] * b,
|
|
m[0] * c + m[2] * d,
|
|
m[1] * c + m[3] * d,
|
|
m[0] * e + m[2] * f + m[4],
|
|
m[1] * e + m[3] * f + m[5]
|
|
];
|
|
|
|
ctx._originalTransform(a, b, c, d, e, f);
|
|
};
|
|
|
|
ctx.setTransform = function ctxSetTransform(a, b, c, d, e, f) {
|
|
this._transformMatrix = [a, b, c, d, e, f];
|
|
|
|
ctx._originalSetTransform(a, b, c, d, e, f);
|
|
};
|
|
|
|
ctx.rotate = function ctxRotate(angle) {
|
|
var cosValue = Math.cos(angle);
|
|
var sinValue = Math.sin(angle);
|
|
|
|
var m = this._transformMatrix;
|
|
this._transformMatrix = [
|
|
m[0] * cosValue + m[2] * sinValue,
|
|
m[1] * cosValue + m[3] * sinValue,
|
|
m[0] * (-sinValue) + m[2] * cosValue,
|
|
m[1] * (-sinValue) + m[3] * cosValue,
|
|
m[4],
|
|
m[5]
|
|
];
|
|
|
|
this._originalRotate(angle);
|
|
};
|
|
}
|
|
}
|
|
|
|
var CachedCanvases = (function CachedCanvasesClosure() {
|
|
var cache = {};
|
|
return {
|
|
getCanvas: function CachedCanvases_getCanvas(id, width, height,
|
|
trackTransform) {
|
|
var canvasEntry;
|
|
if (id in cache) {
|
|
canvasEntry = cache[id];
|
|
canvasEntry.canvas.width = width;
|
|
canvasEntry.canvas.height = height;
|
|
// reset canvas transform for emulated mozCurrentTransform, if needed
|
|
canvasEntry.context.setTransform(1, 0, 0, 1, 0, 0);
|
|
} else {
|
|
var canvas = createScratchCanvas(width, height);
|
|
var ctx = canvas.getContext('2d');
|
|
if (trackTransform) {
|
|
addContextCurrentTransform(ctx);
|
|
}
|
|
cache[id] = canvasEntry = {canvas: canvas, context: ctx};
|
|
}
|
|
return canvasEntry;
|
|
},
|
|
clear: function () {
|
|
for (var id in cache) {
|
|
var canvasEntry = cache[id];
|
|
// Zeroing the width and height causes Firefox to release graphics
|
|
// resources immediately, which can greatly reduce memory consumption.
|
|
canvasEntry.canvas.width = 0;
|
|
canvasEntry.canvas.height = 0;
|
|
delete cache[id];
|
|
}
|
|
}
|
|
};
|
|
})();
|
|
|
|
function compileType3Glyph(imgData) {
|
|
var POINT_TO_PROCESS_LIMIT = 1000;
|
|
|
|
var width = imgData.width, height = imgData.height;
|
|
var i, j, j0, width1 = width + 1;
|
|
var points = new Uint8Array(width1 * (height + 1));
|
|
var POINT_TYPES =
|
|
new Uint8Array([0, 2, 4, 0, 1, 0, 5, 4, 8, 10, 0, 8, 0, 2, 1, 0]);
|
|
|
|
// decodes bit-packed mask data
|
|
var lineSize = (width + 7) & ~7, data0 = imgData.data;
|
|
var data = new Uint8Array(lineSize * height), pos = 0, ii;
|
|
for (i = 0, ii = data0.length; i < ii; i++) {
|
|
var mask = 128, elem = data0[i];
|
|
while (mask > 0) {
|
|
data[pos++] = (elem & mask) ? 0 : 255;
|
|
mask >>= 1;
|
|
}
|
|
}
|
|
|
|
// finding iteresting points: every point is located between mask pixels,
|
|
// so there will be points of the (width + 1)x(height + 1) grid. Every point
|
|
// will have flags assigned based on neighboring mask pixels:
|
|
// 4 | 8
|
|
// --P--
|
|
// 2 | 1
|
|
// We are interested only in points with the flags:
|
|
// - outside corners: 1, 2, 4, 8;
|
|
// - inside corners: 7, 11, 13, 14;
|
|
// - and, intersections: 5, 10.
|
|
var count = 0;
|
|
pos = 0;
|
|
if (data[pos] !== 0) {
|
|
points[0] = 1;
|
|
++count;
|
|
}
|
|
for (j = 1; j < width; j++) {
|
|
if (data[pos] !== data[pos + 1]) {
|
|
points[j] = data[pos] ? 2 : 1;
|
|
++count;
|
|
}
|
|
pos++;
|
|
}
|
|
if (data[pos] !== 0) {
|
|
points[j] = 2;
|
|
++count;
|
|
}
|
|
for (i = 1; i < height; i++) {
|
|
pos = i * lineSize;
|
|
j0 = i * width1;
|
|
if (data[pos - lineSize] !== data[pos]) {
|
|
points[j0] = data[pos] ? 1 : 8;
|
|
++count;
|
|
}
|
|
// 'sum' is the position of the current pixel configuration in the 'TYPES'
|
|
// array (in order 8-1-2-4, so we can use '>>2' to shift the column).
|
|
var sum = (data[pos] ? 4 : 0) + (data[pos - lineSize] ? 8 : 0);
|
|
for (j = 1; j < width; j++) {
|
|
sum = (sum >> 2) + (data[pos + 1] ? 4 : 0) +
|
|
(data[pos - lineSize + 1] ? 8 : 0);
|
|
if (POINT_TYPES[sum]) {
|
|
points[j0 + j] = POINT_TYPES[sum];
|
|
++count;
|
|
}
|
|
pos++;
|
|
}
|
|
if (data[pos - lineSize] !== data[pos]) {
|
|
points[j0 + j] = data[pos] ? 2 : 4;
|
|
++count;
|
|
}
|
|
|
|
if (count > POINT_TO_PROCESS_LIMIT) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
pos = lineSize * (height - 1);
|
|
j0 = i * width1;
|
|
if (data[pos] !== 0) {
|
|
points[j0] = 8;
|
|
++count;
|
|
}
|
|
for (j = 1; j < width; j++) {
|
|
if (data[pos] !== data[pos + 1]) {
|
|
points[j0 + j] = data[pos] ? 4 : 8;
|
|
++count;
|
|
}
|
|
pos++;
|
|
}
|
|
if (data[pos] !== 0) {
|
|
points[j0 + j] = 4;
|
|
++count;
|
|
}
|
|
if (count > POINT_TO_PROCESS_LIMIT) {
|
|
return null;
|
|
}
|
|
|
|
// building outlines
|
|
var steps = new Int32Array([0, width1, -1, 0, -width1, 0, 0, 0, 1]);
|
|
var outlines = [];
|
|
for (i = 0; count && i <= height; i++) {
|
|
var p = i * width1;
|
|
var end = p + width;
|
|
while (p < end && !points[p]) {
|
|
p++;
|
|
}
|
|
if (p === end) {
|
|
continue;
|
|
}
|
|
var coords = [p % width1, i];
|
|
|
|
var type = points[p], p0 = p, pp;
|
|
do {
|
|
var step = steps[type];
|
|
do {
|
|
p += step;
|
|
} while (!points[p]);
|
|
|
|
pp = points[p];
|
|
if (pp !== 5 && pp !== 10) {
|
|
// set new direction
|
|
type = pp;
|
|
// delete mark
|
|
points[p] = 0;
|
|
} else { // type is 5 or 10, ie, a crossing
|
|
// set new direction
|
|
type = pp & ((0x33 * type) >> 4);
|
|
// set new type for "future hit"
|
|
points[p] &= (type >> 2 | type << 2);
|
|
}
|
|
|
|
coords.push(p % width1);
|
|
coords.push((p / width1) | 0);
|
|
--count;
|
|
} while (p0 !== p);
|
|
outlines.push(coords);
|
|
--i;
|
|
}
|
|
|
|
var drawOutline = function(c) {
|
|
c.save();
|
|
// the path shall be painted in [0..1]x[0..1] space
|
|
c.scale(1 / width, -1 / height);
|
|
c.translate(0, -height);
|
|
c.beginPath();
|
|
for (var i = 0, ii = outlines.length; i < ii; i++) {
|
|
var o = outlines[i];
|
|
c.moveTo(o[0], o[1]);
|
|
for (var j = 2, jj = o.length; j < jj; j += 2) {
|
|
c.lineTo(o[j], o[j+1]);
|
|
}
|
|
}
|
|
c.fill();
|
|
c.beginPath();
|
|
c.restore();
|
|
};
|
|
|
|
return drawOutline;
|
|
}
|
|
|
|
var CanvasExtraState = (function CanvasExtraStateClosure() {
|
|
function CanvasExtraState(old) {
|
|
// Are soft masks and alpha values shapes or opacities?
|
|
this.alphaIsShape = false;
|
|
this.fontSize = 0;
|
|
this.fontSizeScale = 1;
|
|
this.textMatrix = IDENTITY_MATRIX;
|
|
this.textMatrixScale = 1;
|
|
this.fontMatrix = FONT_IDENTITY_MATRIX;
|
|
this.leading = 0;
|
|
// Current point (in user coordinates)
|
|
this.x = 0;
|
|
this.y = 0;
|
|
// Start of text line (in text coordinates)
|
|
this.lineX = 0;
|
|
this.lineY = 0;
|
|
// Character and word spacing
|
|
this.charSpacing = 0;
|
|
this.wordSpacing = 0;
|
|
this.textHScale = 1;
|
|
this.textRenderingMode = TextRenderingMode.FILL;
|
|
this.textRise = 0;
|
|
// Default fore and background colors
|
|
this.fillColor = '#000000';
|
|
this.strokeColor = '#000000';
|
|
// Note: fill alpha applies to all non-stroking operations
|
|
this.fillAlpha = 1;
|
|
this.strokeAlpha = 1;
|
|
this.lineWidth = 1;
|
|
this.activeSMask = null; // nonclonable field (see the save method below)
|
|
|
|
this.old = old;
|
|
}
|
|
|
|
CanvasExtraState.prototype = {
|
|
clone: function CanvasExtraState_clone() {
|
|
return Object.create(this);
|
|
},
|
|
setCurrentPoint: function CanvasExtraState_setCurrentPoint(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
};
|
|
return CanvasExtraState;
|
|
})();
|
|
|
|
var CanvasGraphics = (function CanvasGraphicsClosure() {
|
|
// Defines the time the executeOperatorList is going to be executing
|
|
// before it stops and shedules a continue of execution.
|
|
var EXECUTION_TIME = 15;
|
|
// Defines the number of steps before checking the execution time
|
|
var EXECUTION_STEPS = 10;
|
|
|
|
function CanvasGraphics(canvasCtx, commonObjs, objs, imageLayer) {
|
|
this.ctx = canvasCtx;
|
|
this.current = new CanvasExtraState();
|
|
this.stateStack = [];
|
|
this.pendingClip = null;
|
|
this.pendingEOFill = false;
|
|
this.res = null;
|
|
this.xobjs = null;
|
|
this.commonObjs = commonObjs;
|
|
this.objs = objs;
|
|
this.imageLayer = imageLayer;
|
|
this.groupStack = [];
|
|
this.processingType3 = null;
|
|
// Patterns are painted relative to the initial page/form transform, see pdf
|
|
// spec 8.7.2 NOTE 1.
|
|
this.baseTransform = null;
|
|
this.baseTransformStack = [];
|
|
this.groupLevel = 0;
|
|
this.smaskStack = [];
|
|
this.smaskCounter = 0;
|
|
this.tempSMask = null;
|
|
if (canvasCtx) {
|
|
addContextCurrentTransform(canvasCtx);
|
|
}
|
|
}
|
|
|
|
function putBinaryImageData(ctx, imgData) {
|
|
if (typeof ImageData !== 'undefined' && imgData instanceof ImageData) {
|
|
ctx.putImageData(imgData, 0, 0);
|
|
return;
|
|
}
|
|
|
|
// Put the image data to the canvas in chunks, rather than putting the
|
|
// whole image at once. This saves JS memory, because the ImageData object
|
|
// is smaller. It also possibly saves C++ memory within the implementation
|
|
// of putImageData(). (E.g. in Firefox we make two short-lived copies of
|
|
// the data passed to putImageData()). |n| shouldn't be too small, however,
|
|
// because too many putImageData() calls will slow things down.
|
|
//
|
|
// Note: as written, if the last chunk is partial, the putImageData() call
|
|
// will (conceptually) put pixels past the bounds of the canvas. But
|
|
// that's ok; any such pixels are ignored.
|
|
|
|
var height = imgData.height, width = imgData.width;
|
|
var fullChunkHeight = 16;
|
|
var fracChunks = height / fullChunkHeight;
|
|
var fullChunks = Math.floor(fracChunks);
|
|
var totalChunks = Math.ceil(fracChunks);
|
|
var partialChunkHeight = height - fullChunks * fullChunkHeight;
|
|
|
|
var chunkImgData = ctx.createImageData(width, fullChunkHeight);
|
|
var srcPos = 0, destPos;
|
|
var src = imgData.data;
|
|
var dest = chunkImgData.data;
|
|
var i, j, thisChunkHeight, elemsInThisChunk;
|
|
|
|
// There are multiple forms in which the pixel data can be passed, and
|
|
// imgData.kind tells us which one this is.
|
|
if (imgData.kind === ImageKind.GRAYSCALE_1BPP) {
|
|
// Grayscale, 1 bit per pixel (i.e. black-and-white).
|
|
var srcLength = src.byteLength;
|
|
var dest32 = PDFJS.hasCanvasTypedArrays ? new Uint32Array(dest.buffer) :
|
|
new Uint32ArrayView(dest);
|
|
var dest32DataLength = dest32.length;
|
|
var fullSrcDiff = (width + 7) >> 3;
|
|
var white = 0xFFFFFFFF;
|
|
var black = (PDFJS.isLittleEndian || !PDFJS.hasCanvasTypedArrays) ?
|
|
0xFF000000 : 0x000000FF;
|
|
for (i = 0; i < totalChunks; i++) {
|
|
thisChunkHeight =
|
|
(i < fullChunks) ? fullChunkHeight : partialChunkHeight;
|
|
destPos = 0;
|
|
for (j = 0; j < thisChunkHeight; j++) {
|
|
var srcDiff = srcLength - srcPos;
|
|
var k = 0;
|
|
var kEnd = (srcDiff > fullSrcDiff) ? width : srcDiff * 8 - 7;
|
|
var kEndUnrolled = kEnd & ~7;
|
|
var mask = 0;
|
|
var srcByte = 0;
|
|
for (; k < kEndUnrolled; k += 8) {
|
|
srcByte = src[srcPos++];
|
|
dest32[destPos++] = (srcByte & 128) ? white : black;
|
|
dest32[destPos++] = (srcByte & 64) ? white : black;
|
|
dest32[destPos++] = (srcByte & 32) ? white : black;
|
|
dest32[destPos++] = (srcByte & 16) ? white : black;
|
|
dest32[destPos++] = (srcByte & 8) ? white : black;
|
|
dest32[destPos++] = (srcByte & 4) ? white : black;
|
|
dest32[destPos++] = (srcByte & 2) ? white : black;
|
|
dest32[destPos++] = (srcByte & 1) ? white : black;
|
|
}
|
|
for (; k < kEnd; k++) {
|
|
if (mask === 0) {
|
|
srcByte = src[srcPos++];
|
|
mask = 128;
|
|
}
|
|
|
|
dest32[destPos++] = (srcByte & mask) ? white : black;
|
|
mask >>= 1;
|
|
}
|
|
}
|
|
// We ran out of input. Make all remaining pixels transparent.
|
|
while (destPos < dest32DataLength) {
|
|
dest32[destPos++] = 0;
|
|
}
|
|
|
|
ctx.putImageData(chunkImgData, 0, i * fullChunkHeight);
|
|
}
|
|
} else if (imgData.kind === ImageKind.RGBA_32BPP) {
|
|
// RGBA, 32-bits per pixel.
|
|
|
|
j = 0;
|
|
elemsInThisChunk = width * fullChunkHeight * 4;
|
|
for (i = 0; i < fullChunks; i++) {
|
|
dest.set(src.subarray(srcPos, srcPos + elemsInThisChunk));
|
|
srcPos += elemsInThisChunk;
|
|
|
|
ctx.putImageData(chunkImgData, 0, j);
|
|
j += fullChunkHeight;
|
|
}
|
|
if (i < totalChunks) {
|
|
elemsInThisChunk = width * partialChunkHeight * 4;
|
|
dest.set(src.subarray(srcPos, srcPos + elemsInThisChunk));
|
|
ctx.putImageData(chunkImgData, 0, j);
|
|
}
|
|
|
|
} else if (imgData.kind === ImageKind.RGB_24BPP) {
|
|
// RGB, 24-bits per pixel.
|
|
thisChunkHeight = fullChunkHeight;
|
|
elemsInThisChunk = width * thisChunkHeight;
|
|
for (i = 0; i < totalChunks; i++) {
|
|
if (i >= fullChunks) {
|
|
thisChunkHeight =partialChunkHeight;
|
|
elemsInThisChunk = width * thisChunkHeight;
|
|
}
|
|
|
|
destPos = 0;
|
|
for (j = elemsInThisChunk; j--;) {
|
|
dest[destPos++] = src[srcPos++];
|
|
dest[destPos++] = src[srcPos++];
|
|
dest[destPos++] = src[srcPos++];
|
|
dest[destPos++] = 255;
|
|
}
|
|
ctx.putImageData(chunkImgData, 0, i * fullChunkHeight);
|
|
}
|
|
} else {
|
|
error('bad image kind: ' + imgData.kind);
|
|
}
|
|
}
|
|
|
|
function putBinaryImageMask(ctx, imgData) {
|
|
var height = imgData.height, width = imgData.width;
|
|
var fullChunkHeight = 16;
|
|
var fracChunks = height / fullChunkHeight;
|
|
var fullChunks = Math.floor(fracChunks);
|
|
var totalChunks = Math.ceil(fracChunks);
|
|
var partialChunkHeight = height - fullChunks * fullChunkHeight;
|
|
|
|
var chunkImgData = ctx.createImageData(width, fullChunkHeight);
|
|
var srcPos = 0;
|
|
var src = imgData.data;
|
|
var dest = chunkImgData.data;
|
|
|
|
for (var i = 0; i < totalChunks; i++) {
|
|
var thisChunkHeight =
|
|
(i < fullChunks) ? fullChunkHeight : partialChunkHeight;
|
|
|
|
// Expand the mask so it can be used by the canvas. Any required
|
|
// inversion has already been handled.
|
|
var destPos = 3; // alpha component offset
|
|
for (var j = 0; j < thisChunkHeight; j++) {
|
|
var mask = 0;
|
|
for (var k = 0; k < width; k++) {
|
|
if (!mask) {
|
|
var elem = src[srcPos++];
|
|
mask = 128;
|
|
}
|
|
dest[destPos] = (elem & mask) ? 0 : 255;
|
|
destPos += 4;
|
|
mask >>= 1;
|
|
}
|
|
}
|
|
ctx.putImageData(chunkImgData, 0, i * fullChunkHeight);
|
|
}
|
|
}
|
|
|
|
function copyCtxState(sourceCtx, destCtx) {
|
|
var properties = ['strokeStyle', 'fillStyle', 'fillRule', 'globalAlpha',
|
|
'lineWidth', 'lineCap', 'lineJoin', 'miterLimit',
|
|
'globalCompositeOperation', 'font'];
|
|
for (var i = 0, ii = properties.length; i < ii; i++) {
|
|
var property = properties[i];
|
|
if (property in sourceCtx) {
|
|
destCtx[property] = sourceCtx[property];
|
|
}
|
|
}
|
|
if ('setLineDash' in sourceCtx) {
|
|
destCtx.setLineDash(sourceCtx.getLineDash());
|
|
destCtx.lineDashOffset = sourceCtx.lineDashOffset;
|
|
} else if ('mozDash' in sourceCtx) {
|
|
destCtx.mozDash = sourceCtx.mozDash;
|
|
destCtx.mozDashOffset = sourceCtx.mozDashOffset;
|
|
}
|
|
}
|
|
|
|
function composeSMaskBackdrop(bytes, r0, g0, b0) {
|
|
var length = bytes.length;
|
|
for (var i = 3; i < length; i += 4) {
|
|
var alpha = bytes[i];
|
|
if (alpha === 0) {
|
|
bytes[i - 3] = r0;
|
|
bytes[i - 2] = g0;
|
|
bytes[i - 1] = b0;
|
|
} else if (alpha < 255) {
|
|
var alpha_ = 255 - alpha;
|
|
bytes[i - 3] = (bytes[i - 3] * alpha + r0 * alpha_) >> 8;
|
|
bytes[i - 2] = (bytes[i - 2] * alpha + g0 * alpha_) >> 8;
|
|
bytes[i - 1] = (bytes[i - 1] * alpha + b0 * alpha_) >> 8;
|
|
}
|
|
}
|
|
}
|
|
|
|
function composeSMaskAlpha(maskData, layerData) {
|
|
var length = maskData.length;
|
|
var scale = 1 / 255;
|
|
for (var i = 3; i < length; i += 4) {
|
|
var alpha = maskData[i];
|
|
layerData[i] = (layerData[i] * alpha * scale) | 0;
|
|
}
|
|
}
|
|
|
|
function composeSMaskLuminosity(maskData, layerData) {
|
|
var length = maskData.length;
|
|
for (var i = 3; i < length; i += 4) {
|
|
var y = ((maskData[i - 3] * 77) + // * 0.3 / 255 * 0x10000
|
|
(maskData[i - 2] * 152) + // * 0.59 ....
|
|
(maskData[i - 1] * 28)) | 0; // * 0.11 ....
|
|
layerData[i] = (layerData[i] * y) >> 16;
|
|
}
|
|
}
|
|
|
|
function genericComposeSMask(maskCtx, layerCtx, width, height,
|
|
subtype, backdrop) {
|
|
var hasBackdrop = !!backdrop;
|
|
var r0 = hasBackdrop ? backdrop[0] : 0;
|
|
var g0 = hasBackdrop ? backdrop[1] : 0;
|
|
var b0 = hasBackdrop ? backdrop[2] : 0;
|
|
|
|
var composeFn;
|
|
if (subtype === 'Luminosity') {
|
|
composeFn = composeSMaskLuminosity;
|
|
} else {
|
|
composeFn = composeSMaskAlpha;
|
|
}
|
|
|
|
// processing image in chunks to save memory
|
|
var PIXELS_TO_PROCESS = 65536;
|
|
var chunkSize = Math.min(height, Math.ceil(PIXELS_TO_PROCESS / width));
|
|
for (var row = 0; row < height; row += chunkSize) {
|
|
var chunkHeight = Math.min(chunkSize, height - row);
|
|
var maskData = maskCtx.getImageData(0, row, width, chunkHeight);
|
|
var layerData = layerCtx.getImageData(0, row, width, chunkHeight);
|
|
|
|
if (hasBackdrop) {
|
|
composeSMaskBackdrop(maskData.data, r0, g0, b0);
|
|
}
|
|
composeFn(maskData.data, layerData.data);
|
|
|
|
maskCtx.putImageData(layerData, 0, row);
|
|
}
|
|
}
|
|
|
|
function composeSMask(ctx, smask, layerCtx) {
|
|
var mask = smask.canvas;
|
|
var maskCtx = smask.context;
|
|
|
|
ctx.setTransform(smask.scaleX, 0, 0, smask.scaleY,
|
|
smask.offsetX, smask.offsetY);
|
|
|
|
var backdrop = smask.backdrop || null;
|
|
if (WebGLUtils.isEnabled) {
|
|
var composed = WebGLUtils.composeSMask(layerCtx.canvas, mask,
|
|
{subtype: smask.subtype, backdrop: backdrop});
|
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
ctx.drawImage(composed, smask.offsetX, smask.offsetY);
|
|
return;
|
|
}
|
|
genericComposeSMask(maskCtx, layerCtx, mask.width, mask.height,
|
|
smask.subtype, backdrop);
|
|
ctx.drawImage(mask, 0, 0);
|
|
}
|
|
|
|
var LINE_CAP_STYLES = ['butt', 'round', 'square'];
|
|
var LINE_JOIN_STYLES = ['miter', 'round', 'bevel'];
|
|
var NORMAL_CLIP = {};
|
|
var EO_CLIP = {};
|
|
|
|
CanvasGraphics.prototype = {
|
|
|
|
beginDrawing: function CanvasGraphics_beginDrawing(viewport, transparency) {
|
|
// For pdfs that use blend modes we have to clear the canvas else certain
|
|
// blend modes can look wrong since we'd be blending with a white
|
|
// backdrop. The problem with a transparent backdrop though is we then
|
|
// don't get sub pixel anti aliasing on text, so we fill with white if
|
|
// we can.
|
|
var width = this.ctx.canvas.width;
|
|
var height = this.ctx.canvas.height;
|
|
if (transparency) {
|
|
this.ctx.clearRect(0, 0, width, height);
|
|
} else {
|
|
this.ctx.mozOpaque = true;
|
|
this.ctx.save();
|
|
this.ctx.fillStyle = 'rgb(255, 255, 255)';
|
|
this.ctx.fillRect(0, 0, width, height);
|
|
this.ctx.restore();
|
|
}
|
|
|
|
var transform = viewport.transform;
|
|
|
|
this.ctx.save();
|
|
this.ctx.transform.apply(this.ctx, transform);
|
|
|
|
this.baseTransform = this.ctx.mozCurrentTransform.slice();
|
|
|
|
if (this.imageLayer) {
|
|
this.imageLayer.beginLayout();
|
|
}
|
|
},
|
|
|
|
executeOperatorList: function CanvasGraphics_executeOperatorList(
|
|
operatorList,
|
|
executionStartIdx, continueCallback,
|
|
stepper) {
|
|
var argsArray = operatorList.argsArray;
|
|
var fnArray = operatorList.fnArray;
|
|
var i = executionStartIdx || 0;
|
|
var argsArrayLen = argsArray.length;
|
|
|
|
// Sometimes the OperatorList to execute is empty.
|
|
if (argsArrayLen === i) {
|
|
return i;
|
|
}
|
|
|
|
var chunkOperations = (argsArrayLen - i > EXECUTION_STEPS &&
|
|
typeof continueCallback === 'function');
|
|
var endTime = chunkOperations ? Date.now() + EXECUTION_TIME : 0;
|
|
var steps = 0;
|
|
|
|
var commonObjs = this.commonObjs;
|
|
var objs = this.objs;
|
|
var fnId;
|
|
|
|
while (true) {
|
|
if (stepper !== undefined && i === stepper.nextBreakPoint) {
|
|
stepper.breakIt(i, continueCallback);
|
|
return i;
|
|
}
|
|
|
|
fnId = fnArray[i];
|
|
|
|
if (fnId !== OPS.dependency) {
|
|
this[fnId].apply(this, argsArray[i]);
|
|
} else {
|
|
var deps = argsArray[i];
|
|
for (var n = 0, nn = deps.length; n < nn; n++) {
|
|
var depObjId = deps[n];
|
|
var common = depObjId[0] === 'g' && depObjId[1] === '_';
|
|
var objsPool = common ? commonObjs : objs;
|
|
|
|
// If the promise isn't resolved yet, add the continueCallback
|
|
// to the promise and bail out.
|
|
if (!objsPool.isResolved(depObjId)) {
|
|
objsPool.get(depObjId, continueCallback);
|
|
return i;
|
|
}
|
|
}
|
|
}
|
|
|
|
i++;
|
|
|
|
// If the entire operatorList was executed, stop as were done.
|
|
if (i === argsArrayLen) {
|
|
return i;
|
|
}
|
|
|
|
// If the execution took longer then a certain amount of time and
|
|
// `continueCallback` is specified, interrupt the execution.
|
|
if (chunkOperations && ++steps > EXECUTION_STEPS) {
|
|
if (Date.now() > endTime) {
|
|
continueCallback();
|
|
return i;
|
|
}
|
|
steps = 0;
|
|
}
|
|
|
|
// If the operatorList isn't executed completely yet OR the execution
|
|
// time was short enough, do another execution round.
|
|
}
|
|
},
|
|
|
|
endDrawing: function CanvasGraphics_endDrawing() {
|
|
this.ctx.restore();
|
|
CachedCanvases.clear();
|
|
WebGLUtils.clear();
|
|
|
|
if (this.imageLayer) {
|
|
this.imageLayer.endLayout();
|
|
}
|
|
},
|
|
|
|
// Graphics state
|
|
setLineWidth: function CanvasGraphics_setLineWidth(width) {
|
|
this.current.lineWidth = width;
|
|
this.ctx.lineWidth = width;
|
|
},
|
|
setLineCap: function CanvasGraphics_setLineCap(style) {
|
|
this.ctx.lineCap = LINE_CAP_STYLES[style];
|
|
},
|
|
setLineJoin: function CanvasGraphics_setLineJoin(style) {
|
|
this.ctx.lineJoin = LINE_JOIN_STYLES[style];
|
|
},
|
|
setMiterLimit: function CanvasGraphics_setMiterLimit(limit) {
|
|
this.ctx.miterLimit = limit;
|
|
},
|
|
setDash: function CanvasGraphics_setDash(dashArray, dashPhase) {
|
|
var ctx = this.ctx;
|
|
if ('setLineDash' in ctx) {
|
|
ctx.setLineDash(dashArray);
|
|
ctx.lineDashOffset = dashPhase;
|
|
} else {
|
|
ctx.mozDash = dashArray;
|
|
ctx.mozDashOffset = dashPhase;
|
|
}
|
|
},
|
|
setRenderingIntent: function CanvasGraphics_setRenderingIntent(intent) {
|
|
// Maybe if we one day fully support color spaces this will be important
|
|
// for now we can ignore.
|
|
// TODO set rendering intent?
|
|
},
|
|
setFlatness: function CanvasGraphics_setFlatness(flatness) {
|
|
// There's no way to control this with canvas, but we can safely ignore.
|
|
// TODO set flatness?
|
|
},
|
|
setGState: function CanvasGraphics_setGState(states) {
|
|
for (var i = 0, ii = states.length; i < ii; i++) {
|
|
var state = states[i];
|
|
var key = state[0];
|
|
var value = state[1];
|
|
|
|
switch (key) {
|
|
case 'LW':
|
|
this.setLineWidth(value);
|
|
break;
|
|
case 'LC':
|
|
this.setLineCap(value);
|
|
break;
|
|
case 'LJ':
|
|
this.setLineJoin(value);
|
|
break;
|
|
case 'ML':
|
|
this.setMiterLimit(value);
|
|
break;
|
|
case 'D':
|
|
this.setDash(value[0], value[1]);
|
|
break;
|
|
case 'RI':
|
|
this.setRenderingIntent(value);
|
|
break;
|
|
case 'FL':
|
|
this.setFlatness(value);
|
|
break;
|
|
case 'Font':
|
|
this.setFont(value[0], value[1]);
|
|
break;
|
|
case 'CA':
|
|
this.current.strokeAlpha = state[1];
|
|
break;
|
|
case 'ca':
|
|
this.current.fillAlpha = state[1];
|
|
this.ctx.globalAlpha = state[1];
|
|
break;
|
|
case 'BM':
|
|
if (value && value.name && (value.name !== 'Normal')) {
|
|
var mode = value.name.replace(/([A-Z])/g,
|
|
function(c) {
|
|
return '-' + c.toLowerCase();
|
|
}
|
|
).substring(1);
|
|
this.ctx.globalCompositeOperation = mode;
|
|
if (this.ctx.globalCompositeOperation !== mode) {
|
|
warn('globalCompositeOperation "' + mode +
|
|
'" is not supported');
|
|
}
|
|
} else {
|
|
this.ctx.globalCompositeOperation = 'source-over';
|
|
}
|
|
break;
|
|
case 'SMask':
|
|
if (this.current.activeSMask) {
|
|
this.endSMaskGroup();
|
|
}
|
|
this.current.activeSMask = value ? this.tempSMask : null;
|
|
if (this.current.activeSMask) {
|
|
this.beginSMaskGroup();
|
|
}
|
|
this.tempSMask = null;
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
beginSMaskGroup: function CanvasGraphics_beginSMaskGroup() {
|
|
|
|
var activeSMask = this.current.activeSMask;
|
|
var drawnWidth = activeSMask.canvas.width;
|
|
var drawnHeight = activeSMask.canvas.height;
|
|
var cacheId = 'smaskGroupAt' + this.groupLevel;
|
|
var scratchCanvas = CachedCanvases.getCanvas(
|
|
cacheId, drawnWidth, drawnHeight, true);
|
|
|
|
var currentCtx = this.ctx;
|
|
var currentTransform = currentCtx.mozCurrentTransform;
|
|
this.ctx.save();
|
|
|
|
var groupCtx = scratchCanvas.context;
|
|
groupCtx.scale(1 / activeSMask.scaleX, 1 / activeSMask.scaleY);
|
|
groupCtx.translate(-activeSMask.offsetX, -activeSMask.offsetY);
|
|
groupCtx.transform.apply(groupCtx, currentTransform);
|
|
|
|
copyCtxState(currentCtx, groupCtx);
|
|
this.ctx = groupCtx;
|
|
this.setGState([
|
|
['BM', 'Normal'],
|
|
['ca', 1],
|
|
['CA', 1]
|
|
]);
|
|
this.groupStack.push(currentCtx);
|
|
this.groupLevel++;
|
|
},
|
|
endSMaskGroup: function CanvasGraphics_endSMaskGroup() {
|
|
var groupCtx = this.ctx;
|
|
this.groupLevel--;
|
|
this.ctx = this.groupStack.pop();
|
|
|
|
composeSMask(this.ctx, this.current.activeSMask, groupCtx);
|
|
this.ctx.restore();
|
|
},
|
|
save: function CanvasGraphics_save() {
|
|
this.ctx.save();
|
|
var old = this.current;
|
|
this.stateStack.push(old);
|
|
this.current = old.clone();
|
|
this.current.activeSMask = null;
|
|
},
|
|
restore: function CanvasGraphics_restore() {
|
|
if (this.stateStack.length !== 0) {
|
|
if (this.current.activeSMask !== null) {
|
|
this.endSMaskGroup();
|
|
}
|
|
|
|
this.current = this.stateStack.pop();
|
|
this.ctx.restore();
|
|
}
|
|
},
|
|
transform: function CanvasGraphics_transform(a, b, c, d, e, f) {
|
|
this.ctx.transform(a, b, c, d, e, f);
|
|
},
|
|
|
|
// Path
|
|
constructPath: function CanvasGraphics_constructPath(ops, args) {
|
|
var ctx = this.ctx;
|
|
var current = this.current;
|
|
var x = current.x, y = current.y;
|
|
for (var i = 0, j = 0, ii = ops.length; i < ii; i++) {
|
|
switch (ops[i] | 0) {
|
|
case OPS.moveTo:
|
|
x = args[j++];
|
|
y = args[j++];
|
|
ctx.moveTo(x, y);
|
|
break;
|
|
case OPS.lineTo:
|
|
x = args[j++];
|
|
y = args[j++];
|
|
ctx.lineTo(x, y);
|
|
break;
|
|
case OPS.curveTo:
|
|
x = args[j + 4];
|
|
y = args[j + 5];
|
|
ctx.bezierCurveTo(args[j], args[j + 1], args[j + 2], args[j + 3],
|
|
x, y);
|
|
j += 6;
|
|
break;
|
|
case OPS.curveTo2:
|
|
ctx.bezierCurveTo(x, y, args[j], args[j + 1],
|
|
args[j + 2], args[j + 3]);
|
|
x = args[j + 2];
|
|
y = args[j + 3];
|
|
j += 4;
|
|
break;
|
|
case OPS.curveTo3:
|
|
x = args[j + 2];
|
|
y = args[j + 3];
|
|
ctx.bezierCurveTo(args[j], args[j + 1], x, y, x, y);
|
|
j += 4;
|
|
break;
|
|
case OPS.closePath:
|
|
ctx.closePath();
|
|
break;
|
|
}
|
|
}
|
|
current.setCurrentPoint(x, y);
|
|
},
|
|
closePath: function CanvasGraphics_closePath() {
|
|
this.ctx.closePath();
|
|
},
|
|
rectangle: function CanvasGraphics_rectangle(x, y, width, height) {
|
|
if (width === 0) {
|
|
width = this.getSinglePixelWidth();
|
|
}
|
|
if (height === 0) {
|
|
height = this.getSinglePixelWidth();
|
|
}
|
|
|
|
this.ctx.rect(x, y, width, height);
|
|
},
|
|
stroke: function CanvasGraphics_stroke(consumePath) {
|
|
consumePath = typeof consumePath !== 'undefined' ? consumePath : true;
|
|
var ctx = this.ctx;
|
|
var strokeColor = this.current.strokeColor;
|
|
if (this.current.lineWidth === 0) {
|
|
ctx.lineWidth = this.getSinglePixelWidth();
|
|
}
|
|
// For stroke we want to temporarily change the global alpha to the
|
|
// stroking alpha.
|
|
ctx.globalAlpha = this.current.strokeAlpha;
|
|
if (strokeColor && strokeColor.hasOwnProperty('type') &&
|
|
strokeColor.type === 'Pattern') {
|
|
// for patterns, we transform to pattern space, calculate
|
|
// the pattern, call stroke, and restore to user space
|
|
ctx.save();
|
|
ctx.strokeStyle = strokeColor.getPattern(ctx, this);
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
} else {
|
|
ctx.stroke();
|
|
}
|
|
if (consumePath) {
|
|
this.consumePath();
|
|
}
|
|
// Restore the global alpha to the fill alpha
|
|
ctx.globalAlpha = this.current.fillAlpha;
|
|
},
|
|
closeStroke: function CanvasGraphics_closeStroke() {
|
|
this.closePath();
|
|
this.stroke();
|
|
},
|
|
fill: function CanvasGraphics_fill(consumePath) {
|
|
consumePath = typeof consumePath !== 'undefined' ? consumePath : true;
|
|
var ctx = this.ctx;
|
|
var fillColor = this.current.fillColor;
|
|
var needRestore = false;
|
|
|
|
if (fillColor && fillColor.hasOwnProperty('type') &&
|
|
fillColor.type === 'Pattern') {
|
|
ctx.save();
|
|
ctx.fillStyle = fillColor.getPattern(ctx, this);
|
|
needRestore = true;
|
|
}
|
|
|
|
if (this.pendingEOFill) {
|
|
if (ctx.mozFillRule !== undefined) {
|
|
ctx.mozFillRule = 'evenodd';
|
|
ctx.fill();
|
|
ctx.mozFillRule = 'nonzero';
|
|
} else {
|
|
try {
|
|
ctx.fill('evenodd');
|
|
} catch (ex) {
|
|
// shouldn't really happen, but browsers might think differently
|
|
ctx.fill();
|
|
}
|
|
}
|
|
this.pendingEOFill = false;
|
|
} else {
|
|
ctx.fill();
|
|
}
|
|
|
|
if (needRestore) {
|
|
ctx.restore();
|
|
}
|
|
if (consumePath) {
|
|
this.consumePath();
|
|
}
|
|
},
|
|
eoFill: function CanvasGraphics_eoFill() {
|
|
this.pendingEOFill = true;
|
|
this.fill();
|
|
},
|
|
fillStroke: function CanvasGraphics_fillStroke() {
|
|
this.fill(false);
|
|
this.stroke(false);
|
|
|
|
this.consumePath();
|
|
},
|
|
eoFillStroke: function CanvasGraphics_eoFillStroke() {
|
|
this.pendingEOFill = true;
|
|
this.fillStroke();
|
|
},
|
|
closeFillStroke: function CanvasGraphics_closeFillStroke() {
|
|
this.closePath();
|
|
this.fillStroke();
|
|
},
|
|
closeEOFillStroke: function CanvasGraphics_closeEOFillStroke() {
|
|
this.pendingEOFill = true;
|
|
this.closePath();
|
|
this.fillStroke();
|
|
},
|
|
endPath: function CanvasGraphics_endPath() {
|
|
this.consumePath();
|
|
},
|
|
|
|
// Clipping
|
|
clip: function CanvasGraphics_clip() {
|
|
this.pendingClip = NORMAL_CLIP;
|
|
},
|
|
eoClip: function CanvasGraphics_eoClip() {
|
|
this.pendingClip = EO_CLIP;
|
|
},
|
|
|
|
// Text
|
|
beginText: function CanvasGraphics_beginText() {
|
|
this.current.textMatrix = IDENTITY_MATRIX;
|
|
this.current.textMatrixScale = 1;
|
|
this.current.x = this.current.lineX = 0;
|
|
this.current.y = this.current.lineY = 0;
|
|
},
|
|
endText: function CanvasGraphics_endText() {
|
|
var paths = this.pendingTextPaths;
|
|
var ctx = this.ctx;
|
|
if (paths === undefined) {
|
|
ctx.beginPath();
|
|
return;
|
|
}
|
|
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
for (var i = 0; i < paths.length; i++) {
|
|
var path = paths[i];
|
|
ctx.setTransform.apply(ctx, path.transform);
|
|
ctx.translate(path.x, path.y);
|
|
path.addToPath(ctx, path.fontSize);
|
|
}
|
|
ctx.restore();
|
|
ctx.clip();
|
|
ctx.beginPath();
|
|
delete this.pendingTextPaths;
|
|
},
|
|
setCharSpacing: function CanvasGraphics_setCharSpacing(spacing) {
|
|
this.current.charSpacing = spacing;
|
|
},
|
|
setWordSpacing: function CanvasGraphics_setWordSpacing(spacing) {
|
|
this.current.wordSpacing = spacing;
|
|
},
|
|
setHScale: function CanvasGraphics_setHScale(scale) {
|
|
this.current.textHScale = scale / 100;
|
|
},
|
|
setLeading: function CanvasGraphics_setLeading(leading) {
|
|
this.current.leading = -leading;
|
|
},
|
|
setFont: function CanvasGraphics_setFont(fontRefName, size) {
|
|
var fontObj = this.commonObjs.get(fontRefName);
|
|
var current = this.current;
|
|
|
|
if (!fontObj) {
|
|
error('Can\'t find font for ' + fontRefName);
|
|
}
|
|
|
|
current.fontMatrix = (fontObj.fontMatrix ?
|
|
fontObj.fontMatrix : FONT_IDENTITY_MATRIX);
|
|
|
|
// A valid matrix needs all main diagonal elements to be non-zero
|
|
// This also ensures we bypass FF bugzilla bug #719844.
|
|
if (current.fontMatrix[0] === 0 ||
|
|
current.fontMatrix[3] === 0) {
|
|
warn('Invalid font matrix for font ' + fontRefName);
|
|
}
|
|
|
|
// The spec for Tf (setFont) says that 'size' specifies the font 'scale',
|
|
// and in some docs this can be negative (inverted x-y axes).
|
|
if (size < 0) {
|
|
size = -size;
|
|
current.fontDirection = -1;
|
|
} else {
|
|
current.fontDirection = 1;
|
|
}
|
|
|
|
this.current.font = fontObj;
|
|
this.current.fontSize = size;
|
|
|
|
if (fontObj.isType3Font) {
|
|
return; // we don't need ctx.font for Type3 fonts
|
|
}
|
|
|
|
var name = fontObj.loadedName || 'sans-serif';
|
|
var bold = fontObj.black ? (fontObj.bold ? 'bolder' : 'bold') :
|
|
(fontObj.bold ? 'bold' : 'normal');
|
|
|
|
var italic = fontObj.italic ? 'italic' : 'normal';
|
|
var typeface = '"' + name + '", ' + fontObj.fallbackName;
|
|
|
|
// Some font backends cannot handle fonts below certain size.
|
|
// Keeping the font at minimal size and using the fontSizeScale to change
|
|
// the current transformation matrix before the fillText/strokeText.
|
|
// See https://bugzilla.mozilla.org/show_bug.cgi?id=726227
|
|
var browserFontSize = size >= MIN_FONT_SIZE ? size : MIN_FONT_SIZE;
|
|
this.current.fontSizeScale = browserFontSize != MIN_FONT_SIZE ? 1.0 :
|
|
size / MIN_FONT_SIZE;
|
|
|
|
var rule = italic + ' ' + bold + ' ' + browserFontSize + 'px ' + typeface;
|
|
this.ctx.font = rule;
|
|
},
|
|
setTextRenderingMode: function CanvasGraphics_setTextRenderingMode(mode) {
|
|
this.current.textRenderingMode = mode;
|
|
},
|
|
setTextRise: function CanvasGraphics_setTextRise(rise) {
|
|
this.current.textRise = rise;
|
|
},
|
|
moveText: function CanvasGraphics_moveText(x, y) {
|
|
this.current.x = this.current.lineX += x;
|
|
this.current.y = this.current.lineY += y;
|
|
},
|
|
setLeadingMoveText: function CanvasGraphics_setLeadingMoveText(x, y) {
|
|
this.setLeading(-y);
|
|
this.moveText(x, y);
|
|
},
|
|
setTextMatrix: function CanvasGraphics_setTextMatrix(a, b, c, d, e, f) {
|
|
this.current.textMatrix = [a, b, c, d, e, f];
|
|
this.current.textMatrixScale = Math.sqrt(a * a + b * b);
|
|
|
|
this.current.x = this.current.lineX = 0;
|
|
this.current.y = this.current.lineY = 0;
|
|
},
|
|
nextLine: function CanvasGraphics_nextLine() {
|
|
this.moveText(0, this.current.leading);
|
|
},
|
|
|
|
paintChar: function CanvasGraphics_paintChar(character, x, y) {
|
|
var ctx = this.ctx;
|
|
var current = this.current;
|
|
var font = current.font;
|
|
var textRenderingMode = current.textRenderingMode;
|
|
var fontSize = current.fontSize / current.fontSizeScale;
|
|
var fillStrokeMode = textRenderingMode &
|
|
TextRenderingMode.FILL_STROKE_MASK;
|
|
var isAddToPathSet = !!(textRenderingMode &
|
|
TextRenderingMode.ADD_TO_PATH_FLAG);
|
|
|
|
var addToPath;
|
|
if (font.disableFontFace || isAddToPathSet) {
|
|
addToPath = font.getPathGenerator(this.commonObjs, character);
|
|
}
|
|
|
|
if (font.disableFontFace) {
|
|
ctx.save();
|
|
ctx.translate(x, y);
|
|
ctx.beginPath();
|
|
addToPath(ctx, fontSize);
|
|
if (fillStrokeMode === TextRenderingMode.FILL ||
|
|
fillStrokeMode === TextRenderingMode.FILL_STROKE) {
|
|
ctx.fill();
|
|
}
|
|
if (fillStrokeMode === TextRenderingMode.STROKE ||
|
|
fillStrokeMode === TextRenderingMode.FILL_STROKE) {
|
|
ctx.stroke();
|
|
}
|
|
ctx.restore();
|
|
} else {
|
|
if (fillStrokeMode === TextRenderingMode.FILL ||
|
|
fillStrokeMode === TextRenderingMode.FILL_STROKE) {
|
|
ctx.fillText(character, x, y);
|
|
}
|
|
if (fillStrokeMode === TextRenderingMode.STROKE ||
|
|
fillStrokeMode === TextRenderingMode.FILL_STROKE) {
|
|
ctx.strokeText(character, x, y);
|
|
}
|
|
}
|
|
|
|
if (isAddToPathSet) {
|
|
var paths = this.pendingTextPaths || (this.pendingTextPaths = []);
|
|
paths.push({
|
|
transform: ctx.mozCurrentTransform,
|
|
x: x,
|
|
y: y,
|
|
fontSize: fontSize,
|
|
addToPath: addToPath
|
|
});
|
|
}
|
|
},
|
|
|
|
get isFontSubpixelAAEnabled() {
|
|
// Checks if anti-aliasing is enabled when scaled text is painted.
|
|
// On Windows GDI scaled fonts looks bad.
|
|
var ctx = document.createElement('canvas').getContext('2d');
|
|
ctx.scale(1.5, 1);
|
|
ctx.fillText('I', 0, 10);
|
|
var data = ctx.getImageData(0, 0, 10, 10).data;
|
|
var enabled = false;
|
|
for (var i = 3; i < data.length; i += 4) {
|
|
if (data[i] > 0 && data[i] < 255) {
|
|
enabled = true;
|
|
break;
|
|
}
|
|
}
|
|
return shadow(this, 'isFontSubpixelAAEnabled', enabled);
|
|
},
|
|
|
|
showText: function CanvasGraphics_showText(glyphs) {
|
|
var current = this.current;
|
|
var font = current.font;
|
|
if (font.isType3Font) {
|
|
return this.showType3Text(glyphs);
|
|
}
|
|
|
|
var fontSize = current.fontSize;
|
|
if (fontSize === 0) {
|
|
return;
|
|
}
|
|
|
|
var ctx = this.ctx;
|
|
var fontSizeScale = current.fontSizeScale;
|
|
var charSpacing = current.charSpacing;
|
|
var wordSpacing = current.wordSpacing;
|
|
var fontDirection = current.fontDirection;
|
|
var textHScale = current.textHScale * fontDirection;
|
|
var glyphsLength = glyphs.length;
|
|
var vertical = font.vertical;
|
|
var defaultVMetrics = font.defaultVMetrics;
|
|
var widthAdvanceScale = fontSize * current.fontMatrix[0];
|
|
|
|
var simpleFillText =
|
|
current.textRenderingMode === TextRenderingMode.FILL &&
|
|
!font.disableFontFace;
|
|
|
|
ctx.save();
|
|
ctx.transform.apply(ctx, current.textMatrix);
|
|
ctx.translate(current.x, current.y + current.textRise);
|
|
|
|
if (fontDirection > 0) {
|
|
ctx.scale(textHScale, -1);
|
|
} else {
|
|
ctx.scale(textHScale, 1);
|
|
}
|
|
|
|
var lineWidth = current.lineWidth;
|
|
var scale = current.textMatrixScale;
|
|
if (scale === 0 || lineWidth === 0) {
|
|
lineWidth = this.getSinglePixelWidth();
|
|
} else {
|
|
lineWidth /= scale;
|
|
}
|
|
|
|
if (fontSizeScale != 1.0) {
|
|
ctx.scale(fontSizeScale, fontSizeScale);
|
|
lineWidth /= fontSizeScale;
|
|
}
|
|
|
|
ctx.lineWidth = lineWidth;
|
|
|
|
var x = 0, i;
|
|
for (i = 0; i < glyphsLength; ++i) {
|
|
var glyph = glyphs[i];
|
|
if (glyph === null) {
|
|
// word break
|
|
x += fontDirection * wordSpacing;
|
|
continue;
|
|
} else if (isNum(glyph)) {
|
|
x += -glyph * fontSize * 0.001;
|
|
continue;
|
|
}
|
|
|
|
var restoreNeeded = false;
|
|
var character = glyph.fontChar;
|
|
var accent = glyph.accent;
|
|
var scaledX, scaledY, scaledAccentX, scaledAccentY;
|
|
var width = glyph.width;
|
|
if (vertical) {
|
|
var vmetric, vx, vy;
|
|
vmetric = glyph.vmetric || defaultVMetrics;
|
|
vx = glyph.vmetric ? vmetric[1] : width * 0.5;
|
|
vx = -vx * widthAdvanceScale;
|
|
vy = vmetric[2] * widthAdvanceScale;
|
|
|
|
width = vmetric ? -vmetric[0] : width;
|
|
scaledX = vx / fontSizeScale;
|
|
scaledY = (x + vy) / fontSizeScale;
|
|
} else {
|
|
scaledX = x / fontSizeScale;
|
|
scaledY = 0;
|
|
}
|
|
|
|
if (font.remeasure && width > 0 && this.isFontSubpixelAAEnabled) {
|
|
// some standard fonts may not have the exact width, trying to
|
|
// rescale per character
|
|
var measuredWidth = ctx.measureText(character).width * 1000 /
|
|
fontSize * fontSizeScale;
|
|
var characterScaleX = width / measuredWidth;
|
|
restoreNeeded = true;
|
|
ctx.save();
|
|
ctx.scale(characterScaleX, 1);
|
|
scaledX /= characterScaleX;
|
|
}
|
|
|
|
if (simpleFillText && !accent) {
|
|
// common case
|
|
ctx.fillText(character, scaledX, scaledY);
|
|
} else {
|
|
this.paintChar(character, scaledX, scaledY);
|
|
if (accent) {
|
|
scaledAccentX = scaledX + accent.offset.x / fontSizeScale;
|
|
scaledAccentY = scaledY - accent.offset.y / fontSizeScale;
|
|
this.paintChar(accent.fontChar, scaledAccentX, scaledAccentY);
|
|
}
|
|
}
|
|
|
|
var charWidth = width * widthAdvanceScale + charSpacing * fontDirection;
|
|
x += charWidth;
|
|
|
|
if (restoreNeeded) {
|
|
ctx.restore();
|
|
}
|
|
}
|
|
if (vertical) {
|
|
current.y -= x * textHScale;
|
|
} else {
|
|
current.x += x * textHScale;
|
|
}
|
|
ctx.restore();
|
|
},
|
|
|
|
showType3Text: function CanvasGraphics_showType3Text(glyphs) {
|
|
// Type3 fonts - each glyph is a "mini-PDF"
|
|
var ctx = this.ctx;
|
|
var current = this.current;
|
|
var font = current.font;
|
|
var fontSize = current.fontSize;
|
|
var fontDirection = current.fontDirection;
|
|
var charSpacing = current.charSpacing;
|
|
var wordSpacing = current.wordSpacing;
|
|
var textHScale = current.textHScale * fontDirection;
|
|
var fontMatrix = current.fontMatrix || FONT_IDENTITY_MATRIX;
|
|
var glyphsLength = glyphs.length;
|
|
var i, glyph, width;
|
|
|
|
if (fontSize === 0) {
|
|
return;
|
|
}
|
|
|
|
ctx.save();
|
|
ctx.transform.apply(ctx, current.textMatrix);
|
|
ctx.translate(current.x, current.y);
|
|
|
|
ctx.scale(textHScale, 1);
|
|
|
|
for (i = 0; i < glyphsLength; ++i) {
|
|
glyph = glyphs[i];
|
|
if (glyph === null) {
|
|
// word break
|
|
this.ctx.translate(wordSpacing, 0);
|
|
current.x += wordSpacing * textHScale;
|
|
continue;
|
|
} else if (isNum(glyph)) {
|
|
var spacingLength = -glyph * 0.001 * fontSize;
|
|
this.ctx.translate(spacingLength, 0);
|
|
current.x += spacingLength * textHScale;
|
|
continue;
|
|
}
|
|
|
|
this.processingType3 = glyph;
|
|
this.save();
|
|
ctx.scale(fontSize, fontSize);
|
|
ctx.transform.apply(ctx, fontMatrix);
|
|
var operatorList = font.charProcOperatorList[glyph.operatorListId];
|
|
this.executeOperatorList(operatorList);
|
|
this.restore();
|
|
|
|
var transformed = Util.applyTransform([glyph.width, 0], fontMatrix);
|
|
width = ((transformed[0] * fontSize + charSpacing) * fontDirection);
|
|
|
|
ctx.translate(width, 0);
|
|
current.x += width * textHScale;
|
|
}
|
|
ctx.restore();
|
|
this.processingType3 = null;
|
|
},
|
|
|
|
// Type3 fonts
|
|
setCharWidth: function CanvasGraphics_setCharWidth(xWidth, yWidth) {
|
|
// We can safely ignore this since the width should be the same
|
|
// as the width in the Widths array.
|
|
},
|
|
setCharWidthAndBounds: function CanvasGraphics_setCharWidthAndBounds(xWidth,
|
|
yWidth,
|
|
llx,
|
|
lly,
|
|
urx,
|
|
ury) {
|
|
// TODO According to the spec we're also suppose to ignore any operators
|
|
// that set color or include images while processing this type3 font.
|
|
this.rectangle(llx, lly, urx - llx, ury - lly);
|
|
this.clip();
|
|
this.endPath();
|
|
},
|
|
|
|
// Color
|
|
getColorN_Pattern: function CanvasGraphics_getColorN_Pattern(IR) {
|
|
var pattern;
|
|
if (IR[0] === 'TilingPattern') {
|
|
var color = IR[1];
|
|
pattern = new TilingPattern(IR, color, this.ctx, this.objs,
|
|
this.commonObjs, this.baseTransform);
|
|
} else {
|
|
pattern = getShadingPatternFromIR(IR);
|
|
}
|
|
return pattern;
|
|
},
|
|
setStrokeColorN: function CanvasGraphics_setStrokeColorN(/*...*/) {
|
|
this.current.strokeColor = this.getColorN_Pattern(arguments);
|
|
},
|
|
setFillColorN: function CanvasGraphics_setFillColorN(/*...*/) {
|
|
this.current.fillColor = this.getColorN_Pattern(arguments);
|
|
},
|
|
setStrokeRGBColor: function CanvasGraphics_setStrokeRGBColor(r, g, b) {
|
|
var color = Util.makeCssRgb(arguments);
|
|
this.ctx.strokeStyle = color;
|
|
this.current.strokeColor = color;
|
|
},
|
|
setFillRGBColor: function CanvasGraphics_setFillRGBColor(r, g, b) {
|
|
var color = Util.makeCssRgb(arguments);
|
|
this.ctx.fillStyle = color;
|
|
this.current.fillColor = color;
|
|
},
|
|
|
|
shadingFill: function CanvasGraphics_shadingFill(patternIR) {
|
|
var ctx = this.ctx;
|
|
|
|
this.save();
|
|
var pattern = getShadingPatternFromIR(patternIR);
|
|
ctx.fillStyle = pattern.getPattern(ctx, this, true);
|
|
|
|
var inv = ctx.mozCurrentTransformInverse;
|
|
if (inv) {
|
|
var canvas = ctx.canvas;
|
|
var width = canvas.width;
|
|
var height = canvas.height;
|
|
|
|
var bl = Util.applyTransform([0, 0], inv);
|
|
var br = Util.applyTransform([0, height], inv);
|
|
var ul = Util.applyTransform([width, 0], inv);
|
|
var ur = Util.applyTransform([width, height], inv);
|
|
|
|
var x0 = Math.min(bl[0], br[0], ul[0], ur[0]);
|
|
var y0 = Math.min(bl[1], br[1], ul[1], ur[1]);
|
|
var x1 = Math.max(bl[0], br[0], ul[0], ur[0]);
|
|
var y1 = Math.max(bl[1], br[1], ul[1], ur[1]);
|
|
|
|
this.ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
|
|
} else {
|
|
// HACK to draw the gradient onto an infinite rectangle.
|
|
// PDF gradients are drawn across the entire image while
|
|
// Canvas only allows gradients to be drawn in a rectangle
|
|
// The following bug should allow us to remove this.
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=664884
|
|
|
|
this.ctx.fillRect(-1e10, -1e10, 2e10, 2e10);
|
|
}
|
|
|
|
this.restore();
|
|
},
|
|
|
|
// Images
|
|
beginInlineImage: function CanvasGraphics_beginInlineImage() {
|
|
error('Should not call beginInlineImage');
|
|
},
|
|
beginImageData: function CanvasGraphics_beginImageData() {
|
|
error('Should not call beginImageData');
|
|
},
|
|
|
|
paintFormXObjectBegin: function CanvasGraphics_paintFormXObjectBegin(matrix,
|
|
bbox) {
|
|
this.save();
|
|
this.baseTransformStack.push(this.baseTransform);
|
|
|
|
if (isArray(matrix) && 6 === matrix.length) {
|
|
this.transform.apply(this, matrix);
|
|
}
|
|
|
|
this.baseTransform = this.ctx.mozCurrentTransform;
|
|
|
|
if (isArray(bbox) && 4 === bbox.length) {
|
|
var width = bbox[2] - bbox[0];
|
|
var height = bbox[3] - bbox[1];
|
|
this.rectangle(bbox[0], bbox[1], width, height);
|
|
this.clip();
|
|
this.endPath();
|
|
}
|
|
},
|
|
|
|
paintFormXObjectEnd: function CanvasGraphics_paintFormXObjectEnd() {
|
|
this.restore();
|
|
this.baseTransform = this.baseTransformStack.pop();
|
|
},
|
|
|
|
beginGroup: function CanvasGraphics_beginGroup(group) {
|
|
this.save();
|
|
var currentCtx = this.ctx;
|
|
// TODO non-isolated groups - according to Rik at adobe non-isolated
|
|
// group results aren't usually that different and they even have tools
|
|
// that ignore this setting. Notes from Rik on implmenting:
|
|
// - When you encounter an transparency group, create a new canvas with
|
|
// the dimensions of the bbox
|
|
// - copy the content from the previous canvas to the new canvas
|
|
// - draw as usual
|
|
// - remove the backdrop alpha:
|
|
// alphaNew = 1 - (1 - alpha)/(1 - alphaBackdrop) with 'alpha' the alpha
|
|
// value of your transparency group and 'alphaBackdrop' the alpha of the
|
|
// backdrop
|
|
// - remove background color:
|
|
// colorNew = color - alphaNew *colorBackdrop /(1 - alphaNew)
|
|
if (!group.isolated) {
|
|
info('TODO: Support non-isolated groups.');
|
|
}
|
|
|
|
// TODO knockout - supposedly possible with the clever use of compositing
|
|
// modes.
|
|
if (group.knockout) {
|
|
warn('Knockout groups not supported.');
|
|
}
|
|
|
|
var currentTransform = currentCtx.mozCurrentTransform;
|
|
if (group.matrix) {
|
|
currentCtx.transform.apply(currentCtx, group.matrix);
|
|
}
|
|
assert(group.bbox, 'Bounding box is required.');
|
|
|
|
// Based on the current transform figure out how big the bounding box
|
|
// will actually be.
|
|
var bounds = Util.getAxialAlignedBoundingBox(
|
|
group.bbox,
|
|
currentCtx.mozCurrentTransform);
|
|
// Clip the bounding box to the current canvas.
|
|
var canvasBounds = [0,
|
|
0,
|
|
currentCtx.canvas.width,
|
|
currentCtx.canvas.height];
|
|
bounds = Util.intersect(bounds, canvasBounds) || [0, 0, 0, 0];
|
|
// Use ceil in case we're between sizes so we don't create canvas that is
|
|
// too small and make the canvas at least 1x1 pixels.
|
|
var offsetX = Math.floor(bounds[0]);
|
|
var offsetY = Math.floor(bounds[1]);
|
|
var drawnWidth = Math.max(Math.ceil(bounds[2]) - offsetX, 1);
|
|
var drawnHeight = Math.max(Math.ceil(bounds[3]) - offsetY, 1);
|
|
var scaleX = 1, scaleY = 1;
|
|
if (drawnWidth > MAX_GROUP_SIZE) {
|
|
scaleX = drawnWidth / MAX_GROUP_SIZE;
|
|
drawnWidth = MAX_GROUP_SIZE;
|
|
}
|
|
if (drawnHeight > MAX_GROUP_SIZE) {
|
|
scaleY = drawnHeight / MAX_GROUP_SIZE;
|
|
drawnHeight = MAX_GROUP_SIZE;
|
|
}
|
|
|
|
var cacheId = 'groupAt' + this.groupLevel;
|
|
if (group.smask) {
|
|
// Using two cache entries is case if masks are used one after another.
|
|
cacheId += '_smask_' + ((this.smaskCounter++) % 2);
|
|
}
|
|
var scratchCanvas = CachedCanvases.getCanvas(
|
|
cacheId, drawnWidth, drawnHeight, true);
|
|
var groupCtx = scratchCanvas.context;
|
|
|
|
// Since we created a new canvas that is just the size of the bounding box
|
|
// we have to translate the group ctx.
|
|
groupCtx.scale(1 / scaleX, 1 / scaleY);
|
|
groupCtx.translate(-offsetX, -offsetY);
|
|
groupCtx.transform.apply(groupCtx, currentTransform);
|
|
|
|
if (group.smask) {
|
|
// Saving state and cached mask to be used in setGState.
|
|
this.smaskStack.push({
|
|
canvas: scratchCanvas.canvas,
|
|
context: groupCtx,
|
|
offsetX: offsetX,
|
|
offsetY: offsetY,
|
|
scaleX: scaleX,
|
|
scaleY: scaleY,
|
|
subtype: group.smask.subtype,
|
|
backdrop: group.smask.backdrop
|
|
});
|
|
} else {
|
|
// Setup the current ctx so when the group is popped we draw it at the
|
|
// right location.
|
|
currentCtx.setTransform(1, 0, 0, 1, 0, 0);
|
|
currentCtx.translate(offsetX, offsetY);
|
|
currentCtx.scale(scaleX, scaleY);
|
|
}
|
|
// The transparency group inherits all off the current graphics state
|
|
// except the blend mode, soft mask, and alpha constants.
|
|
copyCtxState(currentCtx, groupCtx);
|
|
this.ctx = groupCtx;
|
|
this.setGState([
|
|
['BM', 'Normal'],
|
|
['ca', 1],
|
|
['CA', 1]
|
|
]);
|
|
this.groupStack.push(currentCtx);
|
|
this.groupLevel++;
|
|
},
|
|
|
|
endGroup: function CanvasGraphics_endGroup(group) {
|
|
this.groupLevel--;
|
|
var groupCtx = this.ctx;
|
|
this.ctx = this.groupStack.pop();
|
|
// Turn off image smoothing to avoid sub pixel interpolation which can
|
|
// look kind of blurry for some pdfs.
|
|
if (this.ctx.imageSmoothingEnabled !== undefined) {
|
|
this.ctx.imageSmoothingEnabled = false;
|
|
} else {
|
|
this.ctx.mozImageSmoothingEnabled = false;
|
|
}
|
|
if (group.smask) {
|
|
this.tempSMask = this.smaskStack.pop();
|
|
} else {
|
|
this.ctx.drawImage(groupCtx.canvas, 0, 0);
|
|
}
|
|
this.restore();
|
|
},
|
|
|
|
beginAnnotations: function CanvasGraphics_beginAnnotations() {
|
|
this.save();
|
|
this.current = new CanvasExtraState();
|
|
},
|
|
|
|
endAnnotations: function CanvasGraphics_endAnnotations() {
|
|
this.restore();
|
|
},
|
|
|
|
beginAnnotation: function CanvasGraphics_beginAnnotation(rect, transform,
|
|
matrix) {
|
|
this.save();
|
|
|
|
if (isArray(rect) && 4 === rect.length) {
|
|
var width = rect[2] - rect[0];
|
|
var height = rect[3] - rect[1];
|
|
this.rectangle(rect[0], rect[1], width, height);
|
|
this.clip();
|
|
this.endPath();
|
|
}
|
|
|
|
this.transform.apply(this, transform);
|
|
this.transform.apply(this, matrix);
|
|
},
|
|
|
|
endAnnotation: function CanvasGraphics_endAnnotation() {
|
|
this.restore();
|
|
},
|
|
|
|
paintJpegXObject: function CanvasGraphics_paintJpegXObject(objId, w, h) {
|
|
var domImage = this.objs.get(objId);
|
|
if (!domImage) {
|
|
warn('Dependent image isn\'t ready yet');
|
|
return;
|
|
}
|
|
|
|
this.save();
|
|
|
|
var ctx = this.ctx;
|
|
// scale the image to the unit square
|
|
ctx.scale(1 / w, -1 / h);
|
|
|
|
ctx.drawImage(domImage, 0, 0, domImage.width, domImage.height,
|
|
0, -h, w, h);
|
|
if (this.imageLayer) {
|
|
var currentTransform = ctx.mozCurrentTransformInverse;
|
|
var position = this.getCanvasPosition(0, 0);
|
|
this.imageLayer.appendImage({
|
|
objId: objId,
|
|
left: position[0],
|
|
top: position[1],
|
|
width: w / currentTransform[0],
|
|
height: h / currentTransform[3]
|
|
});
|
|
}
|
|
this.restore();
|
|
},
|
|
|
|
paintImageMaskXObject: function CanvasGraphics_paintImageMaskXObject(img) {
|
|
var ctx = this.ctx;
|
|
var width = img.width, height = img.height;
|
|
|
|
var glyph = this.processingType3;
|
|
|
|
if (COMPILE_TYPE3_GLYPHS && glyph && !('compiled' in glyph)) {
|
|
var MAX_SIZE_TO_COMPILE = 1000;
|
|
if (width <= MAX_SIZE_TO_COMPILE && height <= MAX_SIZE_TO_COMPILE) {
|
|
glyph.compiled =
|
|
compileType3Glyph({data: img.data, width: width, height: height});
|
|
} else {
|
|
glyph.compiled = null;
|
|
}
|
|
}
|
|
|
|
if (glyph && glyph.compiled) {
|
|
glyph.compiled(ctx);
|
|
return;
|
|
}
|
|
|
|
var maskCanvas = CachedCanvases.getCanvas('maskCanvas', width, height);
|
|
var maskCtx = maskCanvas.context;
|
|
maskCtx.save();
|
|
|
|
putBinaryImageMask(maskCtx, img);
|
|
|
|
maskCtx.globalCompositeOperation = 'source-in';
|
|
|
|
var fillColor = this.current.fillColor;
|
|
maskCtx.fillStyle = (fillColor && fillColor.hasOwnProperty('type') &&
|
|
fillColor.type === 'Pattern') ?
|
|
fillColor.getPattern(maskCtx, this) : fillColor;
|
|
maskCtx.fillRect(0, 0, width, height);
|
|
|
|
maskCtx.restore();
|
|
|
|
this.paintInlineImageXObject(maskCanvas.canvas);
|
|
},
|
|
|
|
paintImageMaskXObjectRepeat:
|
|
function CanvasGraphics_paintImageMaskXObjectRepeat(imgData, scaleX,
|
|
scaleY, positions) {
|
|
var width = imgData.width;
|
|
var height = imgData.height;
|
|
var ctx = this.ctx;
|
|
|
|
var maskCanvas = CachedCanvases.getCanvas('maskCanvas', width, height);
|
|
var maskCtx = maskCanvas.context;
|
|
maskCtx.save();
|
|
|
|
putBinaryImageMask(maskCtx, imgData);
|
|
|
|
maskCtx.globalCompositeOperation = 'source-in';
|
|
|
|
var fillColor = this.current.fillColor;
|
|
maskCtx.fillStyle = (fillColor && fillColor.hasOwnProperty('type') &&
|
|
fillColor.type === 'Pattern') ?
|
|
fillColor.getPattern(maskCtx, this) : fillColor;
|
|
maskCtx.fillRect(0, 0, width, height);
|
|
|
|
maskCtx.restore();
|
|
|
|
for (var i = 0, ii = positions.length; i < ii; i += 2) {
|
|
ctx.save();
|
|
ctx.transform(scaleX, 0, 0, scaleY, positions[i], positions[i + 1]);
|
|
ctx.scale(1, -1);
|
|
ctx.drawImage(maskCanvas.canvas, 0, 0, width, height,
|
|
0, -1, 1, 1);
|
|
ctx.restore();
|
|
}
|
|
},
|
|
|
|
paintImageMaskXObjectGroup:
|
|
function CanvasGraphics_paintImageMaskXObjectGroup(images) {
|
|
var ctx = this.ctx;
|
|
|
|
for (var i = 0, ii = images.length; i < ii; i++) {
|
|
var image = images[i];
|
|
var width = image.width, height = image.height;
|
|
|
|
var maskCanvas = CachedCanvases.getCanvas('maskCanvas', width, height);
|
|
var maskCtx = maskCanvas.context;
|
|
maskCtx.save();
|
|
|
|
putBinaryImageMask(maskCtx, image);
|
|
|
|
maskCtx.globalCompositeOperation = 'source-in';
|
|
|
|
var fillColor = this.current.fillColor;
|
|
maskCtx.fillStyle = (fillColor && fillColor.hasOwnProperty('type') &&
|
|
fillColor.type === 'Pattern') ?
|
|
fillColor.getPattern(maskCtx, this) : fillColor;
|
|
maskCtx.fillRect(0, 0, width, height);
|
|
|
|
maskCtx.restore();
|
|
|
|
ctx.save();
|
|
ctx.transform.apply(ctx, image.transform);
|
|
ctx.scale(1, -1);
|
|
ctx.drawImage(maskCanvas.canvas, 0, 0, width, height,
|
|
0, -1, 1, 1);
|
|
ctx.restore();
|
|
}
|
|
},
|
|
|
|
paintImageXObject: function CanvasGraphics_paintImageXObject(objId) {
|
|
var imgData = this.objs.get(objId);
|
|
if (!imgData) {
|
|
warn('Dependent image isn\'t ready yet');
|
|
return;
|
|
}
|
|
|
|
this.paintInlineImageXObject(imgData);
|
|
},
|
|
|
|
paintImageXObjectRepeat:
|
|
function CanvasGraphics_paintImageXObjectRepeat(objId, scaleX, scaleY,
|
|
positions) {
|
|
var imgData = this.objs.get(objId);
|
|
if (!imgData) {
|
|
warn('Dependent image isn\'t ready yet');
|
|
return;
|
|
}
|
|
|
|
var width = imgData.width;
|
|
var height = imgData.height;
|
|
var map = [];
|
|
for (var i = 0, ii = positions.length; i < ii; i += 2) {
|
|
map.push({transform: [scaleX, 0, 0, scaleY, positions[i],
|
|
positions[i + 1]], x: 0, y: 0, w: width, h: height});
|
|
}
|
|
this.paintInlineImageXObjectGroup(imgData, map);
|
|
},
|
|
|
|
paintInlineImageXObject:
|
|
function CanvasGraphics_paintInlineImageXObject(imgData) {
|
|
var width = imgData.width;
|
|
var height = imgData.height;
|
|
var ctx = this.ctx;
|
|
|
|
this.save();
|
|
// scale the image to the unit square
|
|
ctx.scale(1 / width, -1 / height);
|
|
|
|
var currentTransform = ctx.mozCurrentTransformInverse;
|
|
var a = currentTransform[0], b = currentTransform[1];
|
|
var widthScale = Math.max(Math.sqrt(a * a + b * b), 1);
|
|
var c = currentTransform[2], d = currentTransform[3];
|
|
var heightScale = Math.max(Math.sqrt(c * c + d * d), 1);
|
|
|
|
var imgToPaint, tmpCanvas;
|
|
// instanceof HTMLElement does not work in jsdom node.js module
|
|
if (imgData instanceof HTMLElement || !imgData.data) {
|
|
imgToPaint = imgData;
|
|
} else {
|
|
tmpCanvas = CachedCanvases.getCanvas('inlineImage', width, height);
|
|
var tmpCtx = tmpCanvas.context;
|
|
putBinaryImageData(tmpCtx, imgData);
|
|
imgToPaint = tmpCanvas.canvas;
|
|
}
|
|
|
|
var paintWidth = width, paintHeight = height;
|
|
var tmpCanvasId = 'prescale1';
|
|
// Vertial or horizontal scaling shall not be more than 2 to not loose the
|
|
// pixels during drawImage operation, painting on the temporary canvas(es)
|
|
// that are twice smaller in size
|
|
while ((widthScale > 2 && paintWidth > 1) ||
|
|
(heightScale > 2 && paintHeight > 1)) {
|
|
var newWidth = paintWidth, newHeight = paintHeight;
|
|
if (widthScale > 2 && paintWidth > 1) {
|
|
newWidth = Math.ceil(paintWidth / 2);
|
|
widthScale /= paintWidth / newWidth;
|
|
}
|
|
if (heightScale > 2 && paintHeight > 1) {
|
|
newHeight = Math.ceil(paintHeight / 2);
|
|
heightScale /= paintHeight / newHeight;
|
|
}
|
|
tmpCanvas = CachedCanvases.getCanvas(tmpCanvasId, newWidth, newHeight);
|
|
tmpCtx = tmpCanvas.context;
|
|
tmpCtx.clearRect(0, 0, newWidth, newHeight);
|
|
tmpCtx.drawImage(imgToPaint, 0, 0, paintWidth, paintHeight,
|
|
0, 0, newWidth, newHeight);
|
|
imgToPaint = tmpCanvas.canvas;
|
|
paintWidth = newWidth;
|
|
paintHeight = newHeight;
|
|
tmpCanvasId = tmpCanvasId === 'prescale1' ? 'prescale2' : 'prescale1';
|
|
}
|
|
ctx.drawImage(imgToPaint, 0, 0, paintWidth, paintHeight,
|
|
0, -height, width, height);
|
|
|
|
if (this.imageLayer) {
|
|
var position = this.getCanvasPosition(0, -height);
|
|
this.imageLayer.appendImage({
|
|
imgData: imgData,
|
|
left: position[0],
|
|
top: position[1],
|
|
width: width / currentTransform[0],
|
|
height: height / currentTransform[3]
|
|
});
|
|
}
|
|
this.restore();
|
|
},
|
|
|
|
paintInlineImageXObjectGroup:
|
|
function CanvasGraphics_paintInlineImageXObjectGroup(imgData, map) {
|
|
var ctx = this.ctx;
|
|
var w = imgData.width;
|
|
var h = imgData.height;
|
|
|
|
var tmpCanvas = CachedCanvases.getCanvas('inlineImage', w, h);
|
|
var tmpCtx = tmpCanvas.context;
|
|
putBinaryImageData(tmpCtx, imgData);
|
|
|
|
for (var i = 0, ii = map.length; i < ii; i++) {
|
|
var entry = map[i];
|
|
ctx.save();
|
|
ctx.transform.apply(ctx, entry.transform);
|
|
ctx.scale(1, -1);
|
|
ctx.drawImage(tmpCanvas.canvas, entry.x, entry.y, entry.w, entry.h,
|
|
0, -1, 1, 1);
|
|
if (this.imageLayer) {
|
|
var position = this.getCanvasPosition(entry.x, entry.y);
|
|
this.imageLayer.appendImage({
|
|
imgData: imgData,
|
|
left: position[0],
|
|
top: position[1],
|
|
width: w,
|
|
height: h
|
|
});
|
|
}
|
|
ctx.restore();
|
|
}
|
|
},
|
|
|
|
paintSolidColorImageMask:
|
|
function CanvasGraphics_paintSolidColorImageMask() {
|
|
this.ctx.fillRect(0, 0, 1, 1);
|
|
},
|
|
|
|
// Marked content
|
|
|
|
markPoint: function CanvasGraphics_markPoint(tag) {
|
|
// TODO Marked content.
|
|
},
|
|
markPointProps: function CanvasGraphics_markPointProps(tag, properties) {
|
|
// TODO Marked content.
|
|
},
|
|
beginMarkedContent: function CanvasGraphics_beginMarkedContent(tag) {
|
|
// TODO Marked content.
|
|
},
|
|
beginMarkedContentProps: function CanvasGraphics_beginMarkedContentProps(
|
|
tag, properties) {
|
|
// TODO Marked content.
|
|
},
|
|
endMarkedContent: function CanvasGraphics_endMarkedContent() {
|
|
// TODO Marked content.
|
|
},
|
|
|
|
// Compatibility
|
|
|
|
beginCompat: function CanvasGraphics_beginCompat() {
|
|
// TODO ignore undefined operators (should we do that anyway?)
|
|
},
|
|
endCompat: function CanvasGraphics_endCompat() {
|
|
// TODO stop ignoring undefined operators
|
|
},
|
|
|
|
// Helper functions
|
|
|
|
consumePath: function CanvasGraphics_consumePath() {
|
|
var ctx = this.ctx;
|
|
if (this.pendingClip) {
|
|
if (this.pendingClip === EO_CLIP) {
|
|
if (ctx.mozFillRule !== undefined) {
|
|
ctx.mozFillRule = 'evenodd';
|
|
ctx.clip();
|
|
ctx.mozFillRule = 'nonzero';
|
|
} else {
|
|
try {
|
|
ctx.clip('evenodd');
|
|
} catch (ex) {
|
|
// shouldn't really happen, but browsers might think differently
|
|
ctx.clip();
|
|
}
|
|
}
|
|
} else {
|
|
ctx.clip();
|
|
}
|
|
this.pendingClip = null;
|
|
}
|
|
ctx.beginPath();
|
|
},
|
|
getSinglePixelWidth: function CanvasGraphics_getSinglePixelWidth(scale) {
|
|
var inverse = this.ctx.mozCurrentTransformInverse;
|
|
// max of the current horizontal and vertical scale
|
|
return Math.sqrt(Math.max(
|
|
(inverse[0] * inverse[0] + inverse[1] * inverse[1]),
|
|
(inverse[2] * inverse[2] + inverse[3] * inverse[3])));
|
|
},
|
|
getCanvasPosition: function CanvasGraphics_getCanvasPosition(x, y) {
|
|
var transform = this.ctx.mozCurrentTransform;
|
|
return [
|
|
transform[0] * x + transform[2] * y + transform[4],
|
|
transform[1] * x + transform[3] * y + transform[5]
|
|
];
|
|
}
|
|
};
|
|
|
|
for (var op in OPS) {
|
|
CanvasGraphics.prototype[OPS[op]] = CanvasGraphics.prototype[op];
|
|
}
|
|
|
|
return CanvasGraphics;
|
|
})();
|
|
|