pdf文件渲染到canvas

1、jQuery

2、Fabric.js

Fabric.js是一个对canvas进行封装的Javascript库,主要的功能包括在canvas上创建和填充图形,比如矩形、圆形、多边形;生成的图像自带缩放、旋转、拖拽等功能。

3、PDF.js

PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。

cpp 复制代码
<!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>
相关推荐
webmote5 小时前
做一个FabricJS.cc的中文文档网站——面向markdown编程
canvas·fabric·使用手册·中文·fabricjs
小黄人软件7 天前
【AI协作】让所有用电脑的场景都能在ChatGPT里完成。Canvas :新一代可视化交互,让AI易用易得
人工智能·chatgpt·canvas
柳晓黑胡椒10 天前
cesiusm实现 多图例展示+点聚合(base64图标)
css3·canvas·base64·cesium·animation
余生H17 天前
即时可玩web小游戏(二):打砖块(支持移动端版) - 集成InsCode快来阅读并即时体验吧~
前端·javascript·inscode·canvas·h5游戏
普兰店拉马努金24 天前
【Canvas与图标】牛皮纸文件袋图标
canvas·图标·文件袋·牛皮纸
德育处主任1 个月前
前端啊,拿Lottie炫个动画吧
前端·svg·canvas
GDAL1 个月前
深入剖析Canvas的getBoundingClientRect:精准定位与交互事件实现
canvas
剑亦未配妥1 个月前
使用js和canvas、html实现简单的俄罗斯方块小游戏
前端·javascript·canvas·1024程序员节
howard20051 个月前
2.1 HTML5 - Canvas标签
html5·canvas
普兰店拉马努金1 个月前
【Canvas与标牌】立入禁止标牌
canvas·警示·标识·立入禁止