PDF.js如何添加放大缩小的功能，转换成图片应该如何实现？
【摘要】
把官方的安装包搞下来，自己的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）