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

举报
孙叫兽 发表于 2021/03/29 01:29:22 2021/03/29
【摘要】 把官方的安装包搞下来,自己的PDF文件及index.html添加进去,上面的目录结构是未添加的,我先把PDF文件搞成canvas然后搞成图片,然后再图片上添加按钮对图片进行放大缩小操作,方便对用户行为进行录屏。 <!DOCTYPE HTML><html data-dpr="1" style="font-size: 37.5px;"><head> <meta charse...

把官方的安装包搞下来,自己的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>
  
 

文章来源: sunmenglei.blog.csdn.net,作者:孙叫兽,版权归原作者所有,如需转载,请联系作者。

原文链接:sunmenglei.blog.csdn.net/article/details/108739528

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。