PDF.js如何添加放大缩小的功能，转换成图片应该如何实现？

把官方的安装包搞下来，自己的PDF文件及index.html添加进去，上面的目录结构是未添加的，我先把PDF文件搞成canvas然后搞成图片，然后再图片上添加按钮对图片进行放大缩小操作，方便对用户行为进行录屏。
<!DOCTYPE HTML>
<html data-dpr="1" style="font-size: 37.5px;">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<title>首页</title>
	<script type='text/javascript' src='js/pdfjs-2.5.207-dist/build/pdf.js'></script>
</head>
<style>
	/*pdf部分样式*/
	#pactera-imgs{
		background-color: #fff;
		position: absolute;
		z-index: 9999;
		top: 50px;
	}
	/*loading的样式*/
	#loading {  
	    position: fixed;  
	    left: 50px;  
	    top: 50px;  
	    width: 100%;  
	    height: auto;  
	    z-index: 9999;  
	    background:rgba(255,255,255,0.3);  
	    display: none;
	}
	#loading img{
	    width: 2rem;
	    height: 2rem;
	    position: fixed;
	    top: anto;
	    left: 50%;
	    margin-top:-1rem;
	    margin-left: -1rem;
		
	}
	
	
	/*#enlarge{
		float: left;
	}
	
	#letting{
		float: left;
	}*/
</style>
<body>
	
    <!--<button id="enlarge" onclick="functionA()">放大</button>
    <button id="letting" onclick="functionB()">缩小</button>-->

</body>
<script type="text/javascript">
/*<!--测试按钮PDF放大缩小功能-->*/
<script> 
	//PDF测试
	//PDF转成图片
	var loading = document.getElementById("loading");
	var url = "js/pdfjs-2.5.207-dist/zhuxian.pdf";
	pdfjsLib.GlobalWorkerOptions.workerSrc = 'js/pdfjs-2.5.207-dist/build/pdf.worker.js';
	//创建
	function createPdfContainer(id, className) {
	    var pdfContainer = document.getElementById('pactera-canvas');
	    var canvasNew = document.createElement('canvas');
//	    $("canvas").on("click",function() {
//			window.open(url);
//	    })
	    canvasNew.id = id;
	    canvasNew.className = className;
	    pdfContainer.appendChild(canvasNew);
	};
	var renderTask;
	//渲染pdf
	//建议给定pdf宽度
	var i = 1;
	var id = 'cw-pdf-' + 1;
	function renderPDF(pdf) {
	    pdf.getPage(i).then(function (page) {
	        var scale = 1.5;//修改清晰度 越高越清晰
	        var viewport = page.getViewport({ scale: scale, });
	
	        //
	        //  准备用于渲染的 canvas 元素
	        //
	
	        var canvas = document.getElementById(id);
	        var context = canvas.getContext('2d');
	        canvas.height = viewport.height;
	        canvas.width = viewport.width;
	
	        //
	        // 将 PDF 页面渲染到 canvas 上下文中
	        //
	        var renderContext = {
	            canvasContext: context,
	            viewport: viewport
	        };
	        renderTask = page.render(renderContext);
			var renderComplete = renderTask._internalRenderTask.callback;
			renderTask._internalRenderTask.callback = function(){
				renderComplete();
				if(i<pdf.numPages) {
					i++;
					id = 'cw-pdf-' + i;
					renderPDF(pdf);
				} else {
					convertCanvasToImage();
				}
			}
	       
	    });
	};
	//创建和pdf页数等同的canvas数
	function createSeriesCanvas(num, template) {
	    var id = '';
	    for (var j = 1; j <= num; j++) {
	        id = template + j;
	        createPdfContainer(id, 'pdfClass');
	    }
	}
	//读取pdf文件，并加载到页面中
	function loadPDF(fileURL) {
		loading.style="display:block;"
	    pdfjsLib.getDocument(fileURL).promise.then(function (pdf) {
	        //用 promise 获取页面
	        var idTemplate = 'cw-pdf-';
	        var pageNum = pdf.numPages;
	        //根据页码创建画布
	        createSeriesCanvas(pageNum, idTemplate);
	        //将pdf渲染到画布上去
			renderPDF(pdf);
	    });
	}
	loadPDF(url)
	
	function convertCanvasToImage() {
		var canvas = document.getElementById("pactera-canvas");
		var canvasChildren = canvas.children;
		var pacteraImgs = document.getElementById("pactera-imgs")
		for(var i = 0;i<canvasChildren.length;i++){
			var image = new Image();
			image.src = canvasChildren[i].toDataURL("image/png");
			image.width = getWindowClient().width;
			pacteraImgs.appendChild(image);
			loading.style="display:none;"
		}
	}
	function getWindowClient() {
        if(window.innerWidth!=undefined){
//                IE9+ 谷歌火狐
            return{
                width:window.innerWidth,
                height:window.innerHeight
            }
        }else{
            return {
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }

        }
//      functionA(){
//      	if(window.innerWidth!=undefined){
                IE9+ 谷歌火狐
//          return{
//              width:window.innerWidth*2,
//              height:window.innerHeight*2
//          }
//      }else{
//          return {
//              width:document.documentElement.clientWidth*2,
//              height:document.documentElement.clientHeight*2
//          }
//
//      	
//      }
//      functionB(){
//      	if(window.innerWidth!=undefined){
                IE9+ 谷歌火狐
//          return{
//              width:window.innerWidth/2,
//              height:window.innerHeight/2
//          }
//      }else{
//          return {
//              width:document.documentElement.clientWidth/2,
//              height:document.documentElement.clientHeight/2
//          }
//
//      	
//      }

    }
</script>
</html>
PDF.js如何添加放大缩小的功能，转换成图片应该如何实现？

猜你喜欢
