pdf.js+turn.js实现电子书3d翻页效果

最新推荐文章于 2024-08-09 09:41:10 发布

qq_51035159

最新推荐文章于 2024-08-09 09:41:10 发布

阅读量614

点赞数 2

文章标签： javascript pdf 3d

本文链接：https://blog.csdn.net/qq_51035159/article/details/139418812

版权

网上查了很多资料最后终于弄好了，记录一下

<!DOCTYPE html>
<html>
<head>
    <title>电子书</title>
    <style>
        body,html{
            height: 100vh;
            width: 100vw;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        #flipbook {
            height: 900px;
            margin: 0 auto !important;
        }

        #flipbook .turn-page {
            background-color: white;
        }

        #flipbook .cover {
            background: #333;
        }

        #flipbook .cover h1 {
            color: white;
            text-align: center;
            font-size: 50px;
            line-height: 500px;
            margin: 0px;
        }

       #flipbook .loader {
            /* background-image: url(loader.gif); */
            width: 24px;
            height: 24px;
            display: block;
            position: absolute;
            top: 238px;
            left: 188px;
        }

        #flipbook .data {
            text-align: center;
            font-size: 40px;
            color: #999;
            line-height: 500px;
        }

        #flipbook .odd {
            background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
            background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
            background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
            background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
            box-shadow: 0 3px 15px #4d4c4c;
        }

        #flipbook .even {
            background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
            background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
            background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
            background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
            box-shadow: 0 3px 15px #4d4c4c;
        }
        .page {
            background-color: #fff;
        }
        .he{
            width: 1200px;
            height: 850px;
            margin: 0 auto;
            box-shadow: 0 3px 15px #4d4c4c;
            margin-bottom: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="he">
    <!-- <h1>电子书</h1> -->
    <div style="width: 1200px;height:850px;text-align: center;background-color: #fff;">
        <div id="flipbook" style="margin-left: 20%;background-color: #fff;"></div>
    </div>
</div>
<script src="../../common/libs/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./js/pdf.js"></script>
<script src="./js/pdf.worker.js"></script>
<script src="./js/turnjs4/extras/modernizr.2.5.3.min.js"></script>
<script>
    //定义一些参数
	var flipbook=$("#flipbook")
	var pagestr = 1,bid= 1, scale = 1, rotate = 90;
    window.onload=function(){
        let url = window.location.search.split('&')[0].split('=')[1]
        console.log(url);
        if (url) {
            //此处传递pdf路径
    	    getpdf(url)
        }
        else{
            return
        }
    }
    let num = 0
    //获取pdf
    function getpdf(url){
    	var loadingTask=pdfjsLib.getDocument(url)//获取pdf的文件信息
    	loadingTask.promise
		.then(function(pdf){
            num = pdf.numPages
            // console.log('num',num);
    		//根据总页数添加固定的div和canvas
    		for (let i = 1; i <= pdf.numPages;i++) {
					var id = 'canvaspage' + i
					var div =  '<canvas id="' + id + '" class="page"></canvas>'
					flipbook.append(div)
					setcanvas(i,pdf,id)
			}
            //调用turn
			yepnope({
					test : Modernizr.csstransforms,
					yep: ['./js/turnjs4/lib/turn.js'],
					complete: loadApp
			})
    	})
    }
    function setcanvas(i,pdf,id){
		pdf.getPage(i).then(function(page) {
			    var viewport = page.getViewport({scale:scale})
                var canvas = document.getElementById(id)
			    var context = canvas.getContext('2d')
 
 
				//根据宽高判断是否需要旋转
				if (viewport.height / viewport.width >= 1.42) {
 
					var newScale = 1440 / viewport.height
					var newViewport = page.getViewport({scale:newScale,rotation:rotate})
					var outputScale = window.devicePixelRatio
 
					canvas.width = Math.floor(newViewport.width * outputScale);
					canvas.height = Math.floor(newViewport.height * outputScale);
					canvas.style.width = Math.floor(newViewport.width) + "px";
					canvas.style.height = Math.floor(newViewport.height) + "px";
 
					var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] :
						null;
 
					var renderContext = {
						canvasContext: context,
						transform: transform,
						viewport: newViewport
			    	}
			   		page.render(renderContext)
 
					return ;
				}
 
				//根据每张图的宽高，按标准重新计算缩放比例
				var newScale = 900 / viewport.height
				
				var newViewport = page.getViewport({scale:newScale})
				var outputScale = window.devicePixelRatio
 
				canvas.width = Math.floor(newViewport.width * outputScale);
				canvas.height = Math.floor(newViewport.height * outputScale);
				canvas.style.width = Math.floor(newViewport.width) + "px";
				canvas.style.height = Math.floor(newViewport.height) + "px";
 
				var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] :
					null;
 
			    var renderContext = {
			        canvasContext: context,
					transform: transform,
			        viewport: newViewport
			    }
			   page.render(renderContext)
		})
	}

    //turn.js
	function loadApp() {
		$("#flipbook").turn({
			  width: 1200,
			  height: 850,
			  elevation: 50,
			  display: 'double',
			  autoCenter: true,
			  duration:1000,
			  gradients:true,
		})
	}
</script>
</body>
</html>