pdf文件渲染到canvas

漠河愁

于 2024-08-26 15:27:04 发布

阅读量99

点赞数

文章标签： pdf

本文链接：https://blog.csdn.net/lwaner/article/details/141564357

版权

1、jQuery
2、Fabric.js
Fabric.js是一个对canvas进行封装的Javascript库，主要的功能包括在canvas上创建和填充图形，比如矩形、圆形、多边形；生成的图像自带缩放、旋转、拖拽等功能。
3、PDF.js
PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="js/fabric.min.js"></script>
		
		<script type="text/javascript" src="js/pdf.min.js"></script>
		<script type="text/javascript" src="js/pdf.worker.min.js"></script>
	</head>
	<body>
		 <div>
			<input id="fileInput" type="file" accept="application/pdf,image/jpeg,image/png"/>
		  </div>
		  <canvas id="canvas" width="500" height="620" style="border: 1px solid #000;">
		</canvas>
	</body>
	<script type="text/javascript">
		var currentSrc; // 图片src
		canvas = new fabric.Canvas('canvas', {
		    backgroundColor: '#fff'
		})
		
		$('#fileInput').change(function(event) {
		    var file = event.target.files[0]; // 获取文件对象
		    if(file&&file.type=='image/jpeg' || file.type=='image/png'){
		        console.log('图',file)
		        var reader = new FileReader();
		        reader.onload = function(e) {
		            // 处理读取结果
		            currentSrc = e.target.result;
		            createImg(100,100)
		            console.log('currentSrc',currentSrc);
		        };
		        reader.readAsDataURL(file); // 正确使用文件对象调用方法
		    }else if(file.type=='application/pdf'){
		        console.log('file',file,)
		        new Promise((resolve, reject) => {
		            let reader = new FileReader()
		            reader.onloadend = function(e) { //读取完成触发，无论失败还是成功
		                resolve(e.target.result) //base64格式
		            }
		            reader.readAsDataURL(event.target.files[0])
		        }).then(resolve => {
					// 读取多张
					pdfToImage(resolve)
		        })
		    }
		});
		// 多张
		async function pdfToImage(pdfUrl) {
		    (await importPdfToFabric(pdfUrl)).map(async c => {
		        // console.log('c------',c);
		        const fabricImage = new fabric.Image(await c, {
		            top:50,
		            left:30,
		            scaleX: 0.45,
		            scaleY: 0.45
		        });
		        
		        // canvas.clear();	
		        canvas.add(fabricImage);
		        console.log('文件存储',canvas.toJSON())
		        // console.log('cccc',JSON.stringify(canvas))
		    })
		};
		async function importPdfToFabric(pdfUrl) {
		    var loadingTask = pdfjsLib.getDocument(pdfUrl);
		    return await loadingTask.promise.then(  async (pdf) => {
		        const numPages = pdf.numPages;
		        let nar = new Array(numPages).fill(0);
		        for(var ii=1;ii<=numPages;ii++){
		            nar[ii-1] = await pdfgetPage(ii,pdf)
		        }
		        return nar;
		    });
		}
		async function pdfgetPage(pageNumber,pdf) {
		    let rss;
		    await pdf.getPage(pageNumber).then((page) => {
		        // console.log('page',page,pageNumber);
		        const viewport = page.getViewport({ scale: window.devicePixelRatio });
		        const canvas1 = document.createElement('canvas');
		        const context = canvas1.getContext('2d');
		        canvas1.height = viewport.height; // 1330
		        canvas1.width = viewport.width; // 930
		        const renderContext = {
		            canvasContext: context,
		            viewport: viewport
		        };
		        const renderTask = page.render(renderContext);
		        rss = renderTask.promise.then(() => canvas1);
		
		    });
		    return rss;
		};

		// 绘制图片
		function createImg(top, left) {
		    var img = document.createElement("img");
		    img.onload = function () {
		        var canvasImage = new fabric.Image(img,  {
		            top : top,
		            left : left,
		            angle: 0,
		            opacity: 1,
		            scaleX: 0.1,
					scaleY: 0.1
		        })
		        canvas.add(canvasImage)
		        // console.log('canvas toJSON', canvas.toJSON(),canvasImage)
		    }
		    img.crossOrigin = 'Anonymous'; 
		    img.src = currentSrc;
		
		};
	</script>
</html>