当我尝试pdfjs和turnjs时为空白页

时间：2019-06-29 09:01:19

标签： javascript jquery

基本上，我正在尝试使用turnjs和pdfjs创建一个小型Web应用程序，该应用程序会将pdf转换为Turnjs翻书。

到目前为止，我甚至根本不打算展示一本翻页书，也很少说将pdf转换为pdf。

我的代码显示空白页，但没有控制台错误

但是，这两个部分在单独的页面中可以分别正常工作（将pdf转换为图像并打开包含页面图像的turnjs动画书），但我似乎无法将它们结合在一起.....

请帮助

这里：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css" />
<link href="https://usefulangle.com/sitecss/common.css?21" rel="stylesheet" type="text/css" />
<link href="https://usefulangle.com/sitecss/prism.css" rel="stylesheet" type="text/css" />
<script src="https://usefulangle.com/sitejs/jquery-2.1.1.min.js"></script>
<script src="http://usefulangle.com/sitejs/pdf.js"></script>
<script src="/turnjs4/lib/turn.js"></script>
<meta name="viewport" content="width = 1050, user-scalable = no" />

<script type="text/javascript" src="/turnjs4/extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="/turnjs4/lib/hash.js"></script>




<style type="text/css">

#upload-button {
	width: 150px;
	display: block;
	margin: 20px auto;
}

#file-to-upload {
	display: none;
}

#pdf-main-container {
	width: 400px;
	margin: 20px auto;
}

#pdf-loader {
	display: none;
	text-align: center;
	color: #999999;
	font-size: 13px;
	line-height: 100px;
	height: 100px;
}

#pdf-contents {
	display: none;
}

#pdf-meta {
	overflow: hidden;
	margin: 0 0 20px 0;
}

#pdf-buttons {
	float: left;
}

#page-count-container {
	float: right;
}

#pdf-current-page {
	display: inline;
}

#pdf-total-pages {
	display: inline;
}

#pdf-canvas {
	border: 1px solid rgba(0,0,0,0.2);
	box-sizing: border-box;
}

#page-loader {
	height: 100px;
	line-height: 100px;
	text-align: center;
	display: none;
	color: #999999;
	font-size: 13px;
}

#download-image {
	width: 150px;
	display: block;
	margin: 20px auto 0 auto;
	font-size: 13px;
	text-align: center;
}

</style>
</head>

<body>


	<div id="canvas">

		<div class="zoom-icon zoom-icon-in"></div>
		
		<div class="magazine-viewport">
			<div class="container">
				<div class="magazine">
					<!-- Next button -->
					<div ignore="1" class="next-button"></div>
					<!-- Previous button -->
					<div ignore="1" class="previous-button"></div>
				</div>
			</div>
		</div>

		<!-- Thumbnails -->
		<div class="thumbnails">
			<div>
				<ul>
					<li class="i">
						<img src="https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516__480.jpg" width="76" height="100" class="page-1">
						<span>1</span>
					</li>
					<li class="d">
						<img src="https://cdn.pixabay.com/photo/2016/03/06/16/23/background-1240686__480.png" width="76" height="100" class="page-2">
						<img src="https://cdn.pixabay.com/photo/2019/06/05/19/54/grass-4254426__480.jpg" width="76" height="100" class="page-3">
						<span>2-3</span>
					</li>

			<div>	
		</div>
		</div>
<button id="upload-button">Select PDF</button> 
<input type="file" id="file-to-upload" accept="application/pdf" />

<div id="pdf-main-container">
	<div id="pdf-loader">Loading document ...</div>
	<div id="pdf-contents">
		<div id="pdf-meta">
			<div id="pdf-buttons">
				<button id="pdf-prev">Previous</button>
				<button id="pdf-next">Next</button>
			</div>
			<div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages"></div></div>
		</div>
		<canvas id="pdf-canvas" width="400"></canvas>
		<div id="page-loader">Loading page ...</div>
		<a id="download-image" href="#">Download PNG</a>
		<button id="toflip">Convert to flip book</button>
	</div>
</div>
<script>

var __PDF_DOC,
	__CURRENT_PAGE,
	__TOTAL_PAGES,
	__PAGE_RENDERING_IN_PROGRESS = 0,
	__CANVAS = $('#pdf-canvas').get(0),
	__CANVAS_CTX = __CANVAS.getContext('2d');

function showPDF(pdf_url) {
	$("#pdf-loader").show();

	PDFJS.getDocument({ url: pdf_url }).then(function(pdf_doc) {
		__PDF_DOC = pdf_doc;
		__TOTAL_PAGES = __PDF_DOC.numPages;
		
		// Hide the pdf loader and show pdf container in HTML
		$("#pdf-loader").hide();
		$("#pdf-contents").show();
		$("#pdf-total-pages").text(__TOTAL_PAGES);

		// Show the first page
		showPage(1);
	}).catch(function(error) {
		// If error re-show the upload button
		$("#pdf-loader").hide();
		$("#upload-button").show();
		
		alert(error.message);
	});;
}

function showPage(page_no) {
	__PAGE_RENDERING_IN_PROGRESS = 1;
	__CURRENT_PAGE = page_no;

	// Disable Prev & Next buttons while page is being loaded
	$("#pdf-next, #pdf-prev").attr('disabled', 'disabled');

	// While page is being rendered hide the canvas and show a loading message
	$("#pdf-canvas").hide();
	$("#page-loader").show();
	$("#download-image").hide();

	// Update current page in HTML
	$("#pdf-current-page").text(page_no);
	
	// Fetch the page
	__PDF_DOC.getPage(page_no).then(function(page) {
		// As the canvas is of a fixed width we need to set the scale of the viewport accordingly
		var scale_required = __CANVAS.width / page.getViewport(1).width;

		// Get viewport of the page at required scale
		var viewport = page.getViewport(scale_required);

		// Set canvas height
		__CANVAS.height = viewport.height;

		var renderContext = {
			canvasContext: __CANVAS_CTX,
			viewport: viewport
		};
		
		// Render the page contents in the canvas
		page.render(renderContext).then(function() {
			__PAGE_RENDERING_IN_PROGRESS = 0;

			// Re-enable Prev & Next buttons
			$("#pdf-next, #pdf-prev").removeAttr('disabled');

			// Show the canvas and hide the page loader
			$("#pdf-canvas").show();
			$("#page-loader").hide();
			$("#download-image").show();
		});
	});
}

// Upon click this should should trigger click on the #file-to-upload file input element
// This is better than showing the not-good-looking file input element
$("#upload-button").on('click', function() {
	$("#file-to-upload").trigger('click');
});

// When user chooses a PDF file
$("#file-to-upload").on('change', function() {
	// Validate whether PDF
    if(['application/pdf'].indexOf($("#file-to-upload").get(0).files[0].type) == -1) {
        alert('Error : Not a PDF');
        return;
    }

	$("#upload-button").hide();

	// Send the object url of the pdf
	showPDF(URL.createObjectURL($("#file-to-upload").get(0).files[0]));
});

// Previous page of the PDF
$("#pdf-prev").on('click', function() {
	if(__CURRENT_PAGE != 1)
		showPage(--__CURRENT_PAGE);
});

// Next page of the PDF
$("#pdf-next").on('click', function() {
	if(__CURRENT_PAGE != __TOTAL_PAGES)
		showPage(++__CURRENT_PAGE);
});

// Download button
var i = 1;
$("#download-image").on('click', function() {
	$(this).attr('href', __CANVAS.toDataURL()).attr('download', 'page' + i +'.png');
	i++;
});


$("#toflip").on('click', function() 
{
    $(".main").append(" <b>Appended text</b>.");
});
</script>
<script type="text/javascript">

	function loadApp() {
	
		 $('#canvas').fadeIn(1000);
	
		 var flipbook = $('.magazine');
	
		 // Check if the CSS was already loaded
		
		if (flipbook.width()==0 || flipbook.height()==0) {
			setTimeout(loadApp, 10);
			return;
		}
		
		// Create the flipbook
	
		flipbook.turn({
				
				// Magazine width
	
				width: 922,
	
				// Magazine height
	
				height: 600,
	
				// Duration in millisecond
	
				duration: 1000,
	
				// Hardware acceleration
	
				acceleration: !isChrome(),
	
				// Enables gradients
	
				gradients: true,
				
				// Auto center this flipbook
	
				autoCenter: true,
	
				// Elevation from the edge of the flipbook when turning a                    page
	
				elevation: 50,
	
				// The number of pages
	
				pages: 12,
	
				// Events
	
				when: {
					turning: function(event, page, view) {
						
						var book = $(this),
						currentPage = book.turn('page'),
						pages = book.turn('pages');
				
						// Update the current URI
	
						Hash.go('page/' + page).update();
	
						// Show and hide navigation buttons
	
						disableControls(page);
						
	
						$('.thumbnails .page-'+currentPage).
							parent().
							removeClass('current');
	
						$('.thumbnails .page-'+page).
							parent().
							addClass('current');
					},
	
					turned: function(event, page, view) {
	
						disableControls(page);
	
						$(this).turn('center');
	
						if (page==1) { 
							$(this).turn('peel', 'br');
						}
	
					},
	
					missing: function (event, pages) {
	
						// Add pages that aren't in the magazine
	
						for (var i = 0; i < pages.length; i++)
							addPage(pages[i], $(this));
	
					}
				}
	
		});
	
		// Zoom.js
	
		$('.magazine-viewport').zoom({
			flipbook: $('.magazine'),
	
			max: function() { 
				
				return largeMagazineWidth()/$('.magazine').width();
	
			}, 
	
			when: {
	
				swipeLeft: function() {
	
					$(this).zoom('flipbook').turn('next');
	
				},
	
				swipeRight: function() {
					
					$(this).zoom('flipbook').turn('previous');
	
				},
	
				resize: function(event, scale, page, pageElement) {
	
					if (scale==1)
						loadSmallPage(page, pageElement);
					else
						loadLargePage(page, pageElement);
	
				},
	
				zoomIn: function () {
	
					$('.thumbnails').hide();
					$('.made').hide();
                   $('.magazine').removeClass('animated').addClass('zoom-        in');
					$('.zoom-icon').removeClass('zoom-icon- in').addClass('zoom-icon-out');
					
					if (!window.escTip && !$.isTouch) {
						escTip = true;
	
						$('<div />', {'class': 'exit-message'}).
							html('<div>Press ESC to exit</div>').
								appendTo($('body')).
								delay(2000).
								animate({opacity:0}, 500, function() {
									$(this).remove();
								});
					}
				},
	
				zoomOut: function () {
	
					$('.exit-message').hide();
					$('.thumbnails').fadeIn();
					$('.made').fadeIn();
					$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
	
					setTimeout(function(){
						$('.magazine').addClass('animated').removeClass('zoom-in');
						resizeViewport();
					}, 0);
	
				}
			}
		});
	
		// Zoom event
	
		if ($.isTouch)
			$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
		else
			$('.magazine-viewport').bind('zoom.tap', zoomTo);
	
	
		// Using arrow keys to turn the page
	
		$(document).keydown(function(e){
	
			var previous = 37, next = 39, esc = 27;
	
			switch (e.keyCode) {
				case previous:
	
					// left arrow
					$('.magazine').turn('previous');
					e.preventDefault();
	
				break;
				case next:
	
					//right arrow
					$('.magazine').turn('next');
					e.preventDefault();
	
				break;
				case esc:
					
					$('.magazine-viewport').zoom('zoomOut');	
					e.preventDefault();
	
				break;
			}
		});
	
		// URIs - Format #/page/1 
	
		Hash.on('^page\/([0-9]*)$', {
			yep: function(path, parts) {
				var page = parts[1];
	
				if (page!==undefined) {
					if ($('.magazine').turn('is'))
						$('.magazine').turn('page', page);
				}
	
			},
			nop: function(path) {
	
				if ($('.magazine').turn('is'))
					$('.magazine').turn('page', 1);
			}
		});
	
	
		$(window).resize(function() {
			resizeViewport();
		}).bind('orientationchange', function() {
			resizeViewport();
		});
	
		// Events for thumbnails
	
		$('.thumbnails').click(function(event) {
			
			var page;
	
			if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {
			
				$('.magazine').turn('page', page[1]);
			}
		});
	
		$('.thumbnails li').
			bind($.mouseEvents.over, function() {
				
				$(this).addClass('thumb-hover');
	
			}).bind($.mouseEvents.out, function() {
				
				$(this).removeClass('thumb-hover');
	
			});
	
		if ($.isTouch) {
		
			$('.thumbnails').
				addClass('thumbanils-touch').
				bind($.mouseEvents.move, function(event) {
					event.preventDefault();
				});
	
		} else {
	
			$('.thumbnails ul').mouseover(function() {
	
				$('.thumbnails').addClass('thumbnails-hover');
	
			}).mousedown(function() {
	
				return false;
	
			}).mouseout(function() {
	
				$('.thumbnails').removeClass('thumbnails-hover');
	
			});
	
		}
	
	
		// Regions
	
		if ($.isTouch) {
			$('.magazine').bind('touchstart', regionClick);
		} else {
			$('.magazine').click(regionClick);
		}
	
		// Events for the next button
	
		$('.next-button').bind($.mouseEvents.over, function() {
			
			$(this).addClass('next-button-hover');
	
		}).bind($.mouseEvents.out, function() {
			
			$(this).removeClass('next-button-hover');
	
		}).bind($.mouseEvents.down, function() {
			
			$(this).addClass('next-button-down');
	
		}).bind($.mouseEvents.up, function() {
			
			$(this).removeClass('next-button-down');
	
		}).click(function() {
			
			$('.magazine').turn('next');
	
		});
	
		// Events for the next button
		
		$('.previous-button').bind($.mouseEvents.over, function() {
			
			$(this).addClass('previous-button-hover');
	
		}).bind($.mouseEvents.out, function() {
			
			$(this).removeClass('previous-button-hover');
	
		}).bind($.mouseEvents.down, function() {
			
			$(this).addClass('previous-button-down');
	
		}).bind($.mouseEvents.up, function() {
			
			$(this).removeClass('previous-button-down');
	
		}).click(function() {
			
			$('.magazine').turn('previous');
	
		});
	
	
		resizeViewport();
	
		$('.magazine').addClass('animated');
	
	}
	
	// Zoom icon
	
	 $('.zoom-icon').bind('mouseover', function() { 
		 
		 if ($(this).hasClass('zoom-icon-in'))
			 $(this).addClass('zoom-icon-in-hover');
	
		 if ($(this).hasClass('zoom-icon-out'))
			 $(this).addClass('zoom-icon-out-hover');
	 
	 }).bind('mouseout', function() { 
		 
		  if ($(this).hasClass('zoom-icon-in'))
			 $(this).removeClass('zoom-icon-in-hover');
		 
		 if ($(this).hasClass('zoom-icon-out'))
			 $(this).removeClass('zoom-icon-out-hover');
	
	 }).bind('click', function() {
	
		 if ($(this).hasClass('zoom-icon-in'))
			 $('.magazine-viewport').zoom('zoomIn');
		 else if ($(this).hasClass('zoom-icon-out'))	
			$('.magazine-viewport').zoom('zoomOut');
	
	 });
	
	 $('#canvas').hide();
	
	
	// Load the HTML4 version if there's not CSS transform
	

	
	</script>

</body>

0 个答案:

没有答案
相关问题
最新问题