javascript
/
tentone.escher.js
дзеркало https://github.com/tentone/escher.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>PDF & TIFF</title>
</head>
<body>
	<script type="text/javascript" src="../build/escher.js"></script>
	<script type="text/javascript" src="./lib/pdf.js"></script>
	<script type="text/javascript" src="./lib/tiff.min.js"></script>
	<script type="text/javascript">

		// Division
		var division = document.createElement("div");
		division.style.position = "absolute";
		division.style.width = "100%";
		division.style.height = "100%";
		division.style.top = "0px";
		division.style.left = "0px";
		division.style.overflow = "hidden";
		document.body.appendChild(division);

		// Canvas
		var canvas = document.createElement("canvas");
		canvas.style.position = "absolute";
		canvas.style.width = "100%";
		canvas.style.height = "100%";
		canvas.style.top = "0px";
		canvas.style.left = "0px";
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		division.appendChild(canvas);

		// Prevent context menu events
		document.body.oncontextmenu = function(event)
		{
			event.preventDefault();
			return false;
		};

		// Resize canvas on window resize
		window.onresize = function()
		{
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		};

		var group = new Escher.Object2D();

		//Draw TIFF image example
		var xhr = new XMLHttpRequest();
		xhr.responseType = "arraybuffer";
		xhr.open("GET", "images/kofax.tif");
		xhr.onload = function (e)
		{
			var tiff = new Tiff({buffer: xhr.response});
			var width = tiff.width();
			var height = tiff.height();

			var tiffCanvas = tiff.toCanvas();

			if(tiffCanvas)
			{
				var tiffObject = new Escher.Object2D();
				tiffObject.layer = -1;
				tiffObject.draw = function(context, viewport, canvas)
				{
					context.drawImage(tiffCanvas, 0, 0);
				};
				group.add(tiffObject);
			}
		};
		xhr.send();

		//Draw PDF example
		var task = pdfjsLib.getDocument("./images/vrml.pdf");

		task.promise.then(function(pdf)
		{
			var numPages = pdf._pdfInfo.numPages;

			//console.log(pdf);

			if(numPages > 0)
			{
				var positionY = 0;

				for(var p = 1; p <= numPages; p++)
				{	
					pdf.getPage(p).then(function(page)
					{	
						//console.log(page);

						var scale = 5.0;
						var pdfViewport = page.getViewport(scale);

						//console.log(pdfViewport);

						var offCanvas = document.createElement("canvas");
						offCanvas.width = pdfViewport.width;
						offCanvas.height = pdfViewport.height;
						var offContext = offCanvas.getContext("2d");

						page.render(
						{
							canvasContext: offContext,
							viewport: pdfViewport,
							intent: "display",
							renderInteractiveForms: false,
							enableWebGL: false,
							background: "rgba(255,255,255,0)"

						}).promise.then(function()
						{				
							var pdfObject = new Escher.Box();
							pdfObject.box.min.set(pdfViewport.offsetX, pdfViewport.offsetY);
							pdfObject.box.max.set(pdfViewport.width + pdfViewport.offsetX, pdfViewport.height + pdfViewport.offsetY);
							pdfObject.draggable = true;
							pdfObject.scale.set(1 / scale, 1 / scale);
							pdfObject.position.y = positionY;
							pdfObject.draw = function(context, viewport, canvas)
							{
								context.drawImage(offCanvas, 0, 0, pdfViewport.width, pdfViewport.height, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
							};
							group.add(pdfObject);

							Escher.Helpers.boxResizeTool(pdfObject);

							// Move bellow other pages
							positionY += pdfViewport.height / scale;
						});
					});
				}
			}
		});

		// Viewport
		var viewport = new Escher.Viewport(canvas);

		// Renderer
		var renderer = new Escher.Renderer(canvas);
		renderer.createRenderLoop(group, viewport);
	</script>
</body>
</html>