pdf文件渲染到canvas

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; // 图片srccanvas = 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; // 1330canvas1.width = viewport.width; // 930const 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/409446.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Linux中如何安装JDK

一、卸载JDK &#xff08;可以不删除&#xff0c;直接安装新的JDK&#xff0c;然后修改环境变量&#xff09; 1.1卸载使用yum安装的jdk 1.1.1卸载系统预安装的JDK 使用命令&#xff1a;yum list installed |grep java 注意&#xff1a;该命令只能查看使用yum命令安装的jav…

【架构-24】XML和JSON

XML&#xff08;可扩展标记语言&#xff09;和JSON&#xff08;JavaScript对象表示法&#xff09;是两种常用的数据格式&#xff0c;用于在不同系统之间传输和交换数据。它们各有优点和缺点&#xff0c;适用于不同的场景。下面是对XML和JSON的简要介绍以及它们之间的对比。 XM…

有关于算法备案的五大误区

有关于算法备案的五大误区 在这个数据为王的时代&#xff0c;算法已然成为推动社会前进的隐形巨轮。从搜索框中的每一次点击&#xff0c;到购物车里的每一件商品推荐&#xff0c;再到朋友圈里刷屏的动态&#xff0c;算法的身影无处不在&#xff0c;悄无声息地编织着我们的数字生…

提升文旅热度带动商家增收,抖音生活服务“心动大连”活动启动

8月22日&#xff0c;抖音心动之城大连系列活动&#xff08;下称“心动大连”&#xff09;启动仪式召开&#xff0c;主题为“遇见大连&#xff0c;心动无限”。活动由大连市人民政府指导&#xff0c;大连市文化和旅游局、抖音生活服务共同主办&#xff0c;旨在发挥抖音平台内容和…

opencv-python图像增强十六:图像马赛克

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、算法流程&#xff1a;二、算法实现&#xff1a;2.1 生成背板图&#xff1a;2.2 图片添加马赛克效果 三&#xff0c;整体代码实现&#xff1a;四&#xff0c…

点亮星星的世界:当小孩得了自闭症该怎么办

在这个丰富多彩的世界里&#xff0c;每一个孩子都是独一无二的天使。然而&#xff0c;有一些孩子却仿佛被困在了自己的小小世界中&#xff0c;难以与外界正常交流和互动。他们是自闭症儿童&#xff0c;他们的世界充满了挑战和困惑&#xff0c;也让家长们陷入了深深的担忧和焦虑…

UE5学习笔记17-让人物的视线和鼠标移动时的方向一致,并且不让人物模型旋转,只改变视线方向

一、创建标准动画帧 1.我想让人物在装备武器后根据鼠标的移动方向改变人物的视线方向&#xff0c;并且人物模型不会改变朝向 2.我的动画中存在一个四个方向瞄准的动画&#xff0c;将左下&#xff0c;坐上&#xff0c;左转&#xff0c;右上&#xff0c;右下&#xff0c;右转&…

Android - 音频参数合入

音频参数宏观来看分为两部分&#xff0c;audio和music。不管是哪个平台都需要分别合入这两部分。 A10 music参数 相关工程师调试后会提供 audio_para 文件&#xff0c;将该文件替换至对应工程下的文件编译即可 例: device/sprd/sharkle/sl8541e_1h10_32b/rootdir/system/et…

程序员失业跑滴滴,意外自学AI绘画成主业,月入过万不是梦!

一、突如其来的裁员 那是一个阴沉的下午&#xff0c;我像往常一样&#xff0c;在公司忙碌着。突然&#xff0c;HR叫我去会议室&#xff0c;告诉我由于公司业务调整&#xff0c;我所在的部门被整体裁撤。作为一名程序员&#xff0c;我从未想过自己会面临失业的困境。拿着那份补偿…

大语言模型-PDF文档解析

PDF解析能够提升大语言模型系统的信息处理能力和应用范围&#xff0c;为用户提供更加便捷、高效、个性化的服务体验。本文介绍三种常用的pdf解析方式&#xff1a;Open Parse、pdfplumber、PyMuPD。 一、Open Parse Open Parse是一个能够直观地识别文档布局并有效地对其进行分…

mac安装java17(jdk17)

1. 下载jdk17 官网下载&#xff1a;https://www.oracle.com/java/technologies/downloads 2. 直接安装 安装完后目录会存放在下面目录下 /Library/Java/JavaVirtualMachines 111111deMBP JavaVirtualMachines % ls jdk-11.0.227 jdk-17.jdk 3. 如果你已经安装过java&#…

kafka的12个重要概念

kafka的12个重要概念 1、服务器broker1.1、Broker 的主要功能1.2、Kafka Broker 的架构1.3、配置和管理1.4、高可用性和负载均衡1.5、总结 2、主题topic2.1、主要特点 3、事件Event4、生产者producer4.1、主要功能4.2、Producer 的配置选项4.3、Producer 的工作流程4.4、总结 5…

网页,html,Web端实现RTSP/RTMP实时推流视频和播放

随着技术的不断发展&#xff0c;实时流传输已经成为许多应用的重要组成部分。RTSP&#xff08;Real-Time Streaming Protocol&#xff09;作为一种实时流媒体传输协议&#xff0c;广泛应用于视频监控、直播等领域。然而&#xff0c;在Web端实现RTSP实时推流视频播放却面临一些挑…

谈下日本IT业现状以及未来的发展

日本IT业现状 市场规模与增长率&#xff1a; 根据最新数据&#xff0c;日本IT行业的市场规模在不断扩大。例如&#xff0c;2022年日本IT行业的总市值达到了约4500亿美元&#xff0c;年复合增长率约为3.5%。这表明该行业在经济中占据重要地位&#xff0c;并持续保持增长态势。就…

我忘记给我的代码备份了。。。。。。

ok啊&#xff0c;历经1个月&#xff0c;这个项目总算是快写完啦&#xff01;很烧脑&#xff0c;写这个脑细胞都不知道噶了多少&#xff0c;哎~ 虽然目前还有很大一部分可以改进&#xff0c;我觉得以我目前的能力能写成这样已经很不错了&#xff0c;还是学艺不精啊~ 实际上的话…

分享一个基于python新闻订阅与分享平台flask新闻发布系统(源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…

SpringBoot集成kafka开发-消息消费的分区策略(消费者如何判断从哪个分区中消费消息的?)

这里写目录标题 1、kafak消息者消费消息的4种分区策略2、kafka默认的消费分区策略1-RangeAssignor&#xff08;均匀分配、默认分配策略&#xff09;2.1、代码验证RangeAssignor的消息分区策略2.1.1、消费者2.1.2、生产者2.1.3、kafak配置类2.1.4、对象实体类2.1.5、项目配置文件…

卸载通过pip安装的所有Python包的详细指南

卸载所有通过pip安装的Python包的方法总结&#xff08;Windows系统&#xff09; 方法 1: 使用 pip freeze 和 requirements.txt 步骤: 导出依赖到requirements.txt文件: pip freeze > requirements.txt这个命令会将当前环境中所有已安装的Python包及其版本号输出到requirem…

Django | 从中间件的角度来认识Django发送邮件功能

文章目录 概要中间件中间件 ---> 钩子实现中间件demo 邮件发送过程Django如何做邮件服务配置流程 中间件结合邮件服务实现告警 概要 摘要 业务告警 邮件验证 密码找回 邮件告警 中间件 中间件 —> ‘钩子’ 例如 访问路由 的次数【请求】 中间件类须实现下列五个方法…

ubuntu系统在线安装下载firefox-esr流览器

1、在线firefox流览器 Firefox ESR(Extended Support Release)是火狐浏览器的长期支持版本&#xff0c;针对同一个主版本提供一年左右的安全性与稳定性支持。如果您因为火狐浏览器改版而导致有原本能用的功能变得不能使用的话(例如Firefox 64.0把RSS订阅的功能拿掉了)&#xf…