Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Most working, but once you add the font-css file to the web page, there is no font drawn at all

Browse Source
This commit is contained in:
Julian Viereck 2011-06-22 01:28:17 +02:00
parent 986ef148c4
commit e15328800a
5 changed files with 235 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
canvas_proxy.js
View File

@ -42,11 +42,17 @@ function CanvasProxy(width, height) {
"stroke", "stroke",
"clip", "clip",
"measureText", "measureText",
"isPointInPath" "isPointInPath",
"$setCurrentX",
"$addCurrentX",
"$saveCurrentX",
"$restoreCurrentX",
"$showText"
]; ];
function buildFuncCall(name) { function buildFuncCall(name) {
return function() { return function() {
console.log("funcCall", name) // console.log("funcCall", name)
stack.push([name, Array.prototype.slice.call(arguments)]); stack.push([name, Array.prototype.slice.call(arguments)]);
} }
} }
@ -103,6 +109,8 @@ function CanvasProxy(width, height) {
} }
CanvasProxy.prototype.flush = function() { CanvasProxy.prototype.flush = function() {
// postMessage("log");
// postMessage(JSON.stringify([this.$stack.length]));
postMessage("canvas_proxy_stack"); postMessage("canvas_proxy_stack");
postMessage(JSON.stringify(this.$stack)); postMessage(JSON.stringify(this.$stack));
this.$stack.length = 0; this.$stack.length = 0;

20
fonts.js
View File

@ -759,7 +759,9 @@ var Font = (function () {
var data = this.font; var data = this.font;
var fontName = this.name; var fontName = this.name;
var isWorker = (typeof window == "undefined");
/** Hack begin */ /** Hack begin */
if (!isWorker) {
// Actually there is not event when a font has finished downloading so // Actually there is not event when a font has finished downloading so
// the following code are a dirty hack to 'guess' when a font is ready // the following code are a dirty hack to 'guess' when a font is ready
@ -828,15 +830,28 @@ var Font = (function () {
if (debug) if (debug)
ctx.fillText(testString, 20, 50); ctx.fillText(testString, 20, 50);
}, 30, this); }, 30, this);
}
/** Hack end */ /** Hack end */
//
// Get the base64 encoding of the binary font data // Get the base64 encoding of the binary font data
var str = ""; var str = "";
var length = data.length; var length = data.length;
for (var i = 0; i < length; ++i) for (var i = 0; i < length; ++i)
str += String.fromCharCode(data[i]); str += String.fromCharCode(data[i]);
if (isWorker) {
postMessage("font");
postMessage(JSON.stringify({
str: str,
mimetype: this.mimetype,
fontName: fontName,
}));
setTimeout(function() {
Fonts[fontName].loading = false;
}, kMaxWaitForFontFace);
} else {
var base64 = window.btoa(str); var base64 = window.btoa(str);
// Add the @font-face rule to the document // Add the @font-face rule to the document
@ -844,6 +859,9 @@ var Font = (function () {
var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}"; var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}";
var styleSheet = document.styleSheets[0]; var styleSheet = document.styleSheets[0];
styleSheet.insertRule(rule, styleSheet.length); styleSheet.insertRule(rule, styleSheet.length);
console.log("added font", fontName);
console.log(rule);
}
} }
}; };

28
pdf.js
View File

@ -2674,12 +2674,18 @@ var CanvasGraphics = (function() {
}, },
save: function() { save: function() {
this.ctx.save(); this.ctx.save();
if (this.ctx.$saveCurrentX) {
this.ctx.$saveCurrentX();
}
this.stateStack.push(this.current); this.stateStack.push(this.current);
this.current = new CanvasExtraState(); this.current = new CanvasExtraState();
}, },
restore: function() { restore: function() {
var prev = this.stateStack.pop(); var prev = this.stateStack.pop();
if (prev) { if (prev) {
if (this.ctx.$restoreCurrentX) {
this.ctx.$restoreCurrentX();
}
this.current = prev; this.current = prev;
this.ctx.restore(); this.ctx.restore();
} }
@ -2760,6 +2766,9 @@ var CanvasGraphics = (function() {
// Text // Text
beginText: function() { beginText: function() {
this.current.textMatrix = IDENTITY_MATRIX; this.current.textMatrix = IDENTITY_MATRIX;
if (this.ctx.$setCurrentX) {
this.ctx.$setCurrentX(0)
}
this.current.x = this.current.lineX = 0; this.current.x = this.current.lineX = 0;
this.current.y = this.current.lineY = 0; this.current.y = this.current.lineY = 0;
}, },
@ -2814,6 +2823,9 @@ var CanvasGraphics = (function() {
moveText: function (x, y) { moveText: function (x, y) {
this.current.x = this.current.lineX += x; this.current.x = this.current.lineX += x;
this.current.y = this.current.lineY += y; this.current.y = this.current.lineY += y;
if (this.ctx.$setCurrentX) {
this.ctx.$setCurrentX(this.current.x)
}
}, },
setLeadingMoveText: function(x, y) { setLeadingMoveText: function(x, y) {
this.setLeading(-y); this.setLeading(-y);
@ -2821,6 +2833,10 @@ var CanvasGraphics = (function() {
}, },
setTextMatrix: function(a, b, c, d, e, f) { setTextMatrix: function(a, b, c, d, e, f) {
this.current.textMatrix = [ a, b, c, d, e, f ]; this.current.textMatrix = [ a, b, c, d, e, f ];
if (this.ctx.$setCurrentX) {
this.$setCurrentX(0)
}
this.current.x = this.current.lineX = 0; this.current.x = this.current.lineX = 0;
this.current.y = this.current.lineY = 0; this.current.y = this.current.lineY = 0;
}, },
@ -2831,11 +2847,15 @@ var CanvasGraphics = (function() {
this.ctx.save(); this.ctx.save();
this.ctx.transform.apply(this.ctx, this.current.textMatrix); this.ctx.transform.apply(this.ctx, this.current.textMatrix);
this.ctx.scale(1, -1); this.ctx.scale(1, -1);
this.ctx.translate(0, -2 * this.current.y);
if (this.ctx.$showText) {
this.ctx.$showText(this.current.y, Fonts.charsToUnicode(text));
} else {
console.log(text, this.current.x);
text = Fonts.charsToUnicode(text); text = Fonts.charsToUnicode(text);
this.ctx.fillText(text, this.current.x, this.current.y); this.ctx.fillText(text, 0, 0);
this.current.x += this.ctx.measureText(text).width; this.current.x += this.ctx.measureText(text).width;
}
this.ctx.restore(); this.ctx.restore();
}, },
@ -2843,7 +2863,11 @@ var CanvasGraphics = (function() {
for (var i = 0; i < arr.length; ++i) { for (var i = 0; i < arr.length; ++i) {
var e = arr[i]; var e = arr[i];
if (IsNum(e)) { if (IsNum(e)) {
if (this.ctx.$addCurrentX) {
this.ctx.$addCurrentX(-e * 0.001 * this.current.fontSize)
} else {
this.current.x -= e * 0.001 * this.current.fontSize; this.current.x -= e * 0.001 * this.current.fontSize;
}
} else if (IsString(e)) { } else if (IsString(e)) {
this.showText(e); this.showText(e);
} else { } else {

95
viewer_worker.html
View File

@ -11,11 +11,63 @@ var myWorker = new Worker('worker.js');
const WAIT = 0; const WAIT = 0;
const CANVAS_PROXY_STACK = 1; const CANVAS_PROXY_STACK = 1;
const LOG = 2; const LOG = 2;
const FONT = 3;
var currentX = 0;
var currentXStack = [];
var special = {
"$setCurrentX": function(value) {
currentX = value;
},
"$addCurrentX": function(value) {
currentX += value;
},
"$saveCurrentX": function() {
currentXStack.push(currentX);
},
"$restoreCurrentX": function() {
currentX = currentXStack.pop();
},
"$showText": function(y, text) {
console.log(text, currentX, y, this.measureText(text).width);
this.translate(currentX, -1 * y);
this.fillText(text, 0, 0);
currentX += this.measureText(text).width;
}
}
function renderProxyCanvas(stack) {
// for (var i = 0; i < stack.length; i++) {
for (var i = 0; i < 1000; i++) {
var opp = stack[i];
if (opp[0] == "$") {
// console.log("set property", opp[1], opp[2]);
if (opp[1] == "font") {
ctx[opp[1]] = opp[2];
// console.log("font", opp[2]);
} else {
ctx[opp[1]] = opp[2];
}
} else if (opp[0] in special) {
// console.log("sepcial", opp[0], opp[1])
special[opp[0]].apply(ctx, opp[1]);
} else {
// console.log("execute", opp[0], opp[1]);
ctx[opp[0]].apply(ctx, opp[1]);
}
}
}
var onMessageState = WAIT; var onMessageState = WAIT;
myWorker.onmessage = function(event) { myWorker.onmessage = function(event) {
var data = event.data; var data = event.data;
console.log("onMessageRaw", data); // console.log("onMessageRaw", data);
switch (onMessageState) { switch (onMessageState) {
case WAIT: case WAIT:
if (typeof data != "string") { if (typeof data != "string") {
@ -28,11 +80,31 @@ myWorker.onmessage = function(event) {
case "canvas_proxy_stack": case "canvas_proxy_stack":
onMessageState = CANVAS_PROXY_STACK; onMessageState = CANVAS_PROXY_STACK;
return; return;
case "font":
onMessageState = FONT;
return;
default: default:
throw "unkown state: " + data throw "unkown state: " + data
} }
break; break;
case FONT:
data = JSON.parse(data);
var base64 = window.btoa(data.str);
// Add the @font-face rule to the document
var url = "url(data:" + data.mimetype + ";base64," + base64 + ");";
var rule = "@font-face { font-family:'" + data.fontName + "';src:" + url + "}";
var styleSheet = document.styleSheets[0];
// ONCE you uncomment this, there is no font painted at all :(
// styleSheet.insertRule(rule, styleSheet.length);
console.log("added font", data.fontName);
// console.log(rule);
onMessageState = WAIT;
break;
case LOG: case LOG:
console.log.apply(console, JSON.parse(data)); console.log.apply(console, JSON.parse(data));
onMessageState = WAIT; onMessageState = WAIT;
@ -40,17 +112,14 @@ myWorker.onmessage = function(event) {
case CANVAS_PROXY_STACK: case CANVAS_PROXY_STACK:
var stack = JSON.parse(data); var stack = JSON.parse(data);
for (var i = 0; i < stack.length; i++) { console.log("canvas stack", stack.length)
var opp = stack[i]; // console.log(stack.length);
if (opp[0] == "$") {
console.log("set property", opp[1], opp[2]);
ctx[opp[1]] = opp[2];
} else {
console.log("execute", opp[0], opp[1]);
ctx[opp[0]].apply(ctx, opp[1]);
}
}
onMessageState = WAIT; onMessageState = WAIT;
// return;
setTimeout(function() {
renderProxyCanvas(stack);
}, 2000);
break; break;
} }
} }
@ -75,6 +144,10 @@ function open(url) {
window.onload = function() { window.onload = function() {
var ctx = window.ctx = document.getElementById("canvas").getContext("2d"); var ctx = window.ctx = document.getElementById("canvas").getContext("2d");
ctx.save();
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
// for (var name in ctx) { // for (var name in ctx) {
// if (!(ctx[name] instanceof Function)) { // if (!(ctx[name] instanceof Function)) {
// console.log('"' + name + '": "' + ctx[name] + '",'); // console.log('"' + name + '": "' + ctx[name] + '",');

34
worker.js
View File

@ -40,6 +40,7 @@ var canvas = new CanvasProxy(1224, 1584);
// canvas.flush(); // canvas.flush();
log("test"); log("test");
var pageInterval;
onmessage = function(event) { onmessage = function(event) {
var data = event.data; var data = event.data;
var pdfDocument = new PDFDoc(new Stream(data)); var pdfDocument = new PDFDoc(new Stream(data));
@ -72,23 +73,26 @@ onmessage = function(event) {
fontsReady = false; fontsReady = false;
} }
function delayLoadFont() { // function delayLoadFont() {
for (var i = 0; i < count; i++) { // for (var i = 0; i < count; i++) {
if (Fonts[font.name].loading) // if (Fonts[font.name].loading)
return; // return;
} // }
clearInterval(pageInterval); // clearInterval(pageInterval);
// page.display(gfx);
//
// log("flush");
// canvas.flush();
// };
// if (fontsReady) {
// delayLoadFont();
// } else {
// pageInterval = setInterval(delayLoadFont, 10);
// }
page.display(gfx); page.display(gfx);
canvas.flush(); canvas.flush();
};
if (fontsReady) {
delayLoadFont();
} else {
pageInterval = setInterval(delayLoadFont, 10);
}
postMessage(page.code.src);
} }
// function open(url) { // function open(url) {