小程序开发实战:PDF转换为图片工具开发

news2024/10/27 9:31:07

目录

一、开发思路

1.1 申请微信小程序

1.2 编写后端接口

1.3 后端接口部署

1.4 微信小程序前端页面开发

1.5 运行效果

1.6 小程序部署上线


图片

今天给大家分享小程序开发系列,PDF转换为图片工具的开发实战,感兴趣的朋友可以一起来学习一下!

一、开发思路

  • 申请微信小程序

  • 编写后端接口

  • 后端接口部署

  • 微信小程序前端页面开发

  • 微信小程序部署上线

1.1 申请微信小程序

关于如何申请微信小程序这里就不过多介绍了,大家可以参考腾讯官方的文档,里面介绍的非常详细。

图片

1.2 编写后端接口

这里使用Java编程语言的SpringBoot框架来快速搭建WebAPI服务。因为涉及到PDF转换为图片,这里使用spire.pdf来实现。首先引入依赖项

      <dependency>
          <groupId>e-iceblue</groupId>
           <artifactId>spire.pdf.free</artifactId>
           <version>2.6.3</version>
           <scope>provided</scope>
       </dependency>

新建PdfUtils.java工具类库用来实现PDF转换为图片的功能

思路:通过微信小程序传递过来的文件转换为InputStream输出流,然后保存到服务器端,因为PDF可能涉及有多页,每一页单独为一个图片文件,然后调用图片拼接的方法实现所有页面图片合并为一张长图。注意:免费的spire.pdf支持10页之内的pdf转换,大家如果更高需求,可以考虑购买收费版。

主要代码如下:转换方法主函数

 
   /**
    * 根据文件流转换为图片
    *
    * @param stream
    * @return
    */
   public String pdftoimage(InputStream stream, String fileNameOld) {
   Date currentDate = new Date();
   SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss_SSS"); // 指定日期格式,包含毫秒

   String formattedDate = sdf.format(currentDate);
   String pathPath = "/mnt/files/" + formattedDate + "_" + fileNameOld;
   // 4、最终生成的doc所在的目录,默认是和引入的一个地方,开源时对外提供下载的接口。
   saveInputStreamToFile(stream, pathPath);

   String fileName = "result" + formattedDate + ".png";
   String desPath = "/mnt/files/" + fileName; // 构造文件名
   String sux = fileNameOld + "_" + formattedDate;// 临时文件前缀

   boolean result = false;
   try {
       // 0、判断输入的是否是pdf文件
       //第一步:判断输入的是否合法
       //boolean flag = isPDFFile(srcPath);
       //第二步:在输入的路径下新建文件夹
       boolean flag1 = create();

       if (flag1) {
           // 1、加载pdf
           PdfDocument pdf = new PdfDocument();
           //pdf.loadFromStream(stream);
           pdf.loadFromFile(pathPath);
           PdfPageCollection num = pdf.getPages();

           // 2、如果pdf的页数小于11,那么直接进行转化
           if (num.getCount() <= 10) {
               try {
                   for (int i = 0; i < pdf.getPages().getCount(); i++) {
                       BufferedImage image = pdf.saveAsImage(i, PdfImageType.Bitmap, 300, 300);
                       String imgTemp = imgPath + sux + (i + 1) + ".png"; // 构造输出文件路径
                       ImageIO.write(image, "PNG", new File(imgTemp));
                  }
                   pdf.close();
                   System.out.println("PDF转图片完成!");
                   MergeWordDocument.mergeImage(imgPath, desPath, sux);
                   clearFiles(imgPath, formattedDate);
                   clearFiles(pathPath, formattedDate);
              } catch (IOException e) {
                   e.printStackTrace();
                   System.out.println("PDF转图片失败: " + e.getMessage());
              }
          }
           // 3、否则输入的页数比较多,就开始进行切分再转化
           else {
               try {
                   for (int i = 0; i < 10; i++) {
                       BufferedImage image = pdf.saveAsImage(i, PdfImageType.Bitmap, 300, 300);
                       String imgTemp = imgPath + sux + (i + 1) + ".png"; // 构造输出文件路径
                       ImageIO.write(image, "PNG", new File(imgTemp));
                  }
                   pdf.close();
                   System.out.println("PDF转图片完成!");
                   MergeWordDocument.mergeImage(imgPath, desPath, sux);

              } catch (IOException e) {
                   e.printStackTrace();
                   System.out.println("PDF转图片失败: " + e.getMessage());
              } finally {
                   //clearFiles(imgPath);
                   clearFiles(pathPath, formattedDate);
              }
          }
      } else {
           System.out.println("输入的不是pdf文件");
           fileName = "";
           return fileName;
      }
  } catch (Exception e) {
       fileName = "";
       e.printStackTrace();
  } finally {
       //4、把刚刚缓存的split和doc删除
       if (result == true) {
           clearFiles(pathPath, formattedDate);
           clearFiles(splitPath, formattedDate);
           clearFiles(docPath, formattedDate);
      }
  }
   return fileName;
}

保存PDF文件到本地,然后使用后删除

/**
* 保存原始的pdf文件为了方便拆分
*
* @param inputStream
* @param filePath
*/
public static void saveInputStreamToFile(InputStream inputStream, String filePath) {

   // 使用try-with-resources自动关闭流
   try (FileOutputStream outputStream = new FileOutputStream(new File(filePath))) {
       byte[] buffer = new byte[1024];
       int length;

       // 读取输入流并写入到输出流
       while ((length = inputStream.read(buffer)) > 0) {
           outputStream.write(buffer, 0, length);
      }

       System.out.println("文件保存成功!");
  } catch (FileNotFoundException e) {
       e.printStackTrace();
  } catch (IOException e) {
       e.printStackTrace();
  }
}

多张图片合并逻辑

/**
* 多张图片合并之后的逻辑
* @param imagePath
* @param desPath
* @return
*/
public static boolean mergeImage(String imagePath, String desPath,String sux) {
   try {
       File folder = new File(imagePath);
       // 包含文件前缀的文件 简单解决并发的问题
       File[] imageFiles = folder.listFiles((dir, name) ->
              (name.toLowerCase().endsWith(".png") || name.toLowerCase().endsWith(".jpg") && name.contains(sux)));

       if (imageFiles != null && imageFiles.length > 0) {
           int maxWidth = 0;
           int totalHeight = 0;

           // 预先计算最大宽度和总高度
           for (File imageFile : imageFiles) {
               BufferedImage image = ImageIO.read(imageFile);
               maxWidth = Math.max(maxWidth, image.getWidth());
               totalHeight += image.getHeight();
               image.flush(); // 尝试释放资源
          }

           // 创建合并后的图片,仅初始化一次
           BufferedImage mergedImage = new BufferedImage(maxWidth, totalHeight, BufferedImage.TYPE_INT_ARGB);
           Graphics2D g2d = mergedImage.createGraphics();

           int currentY = 0;
           for (File imageFile : imageFiles) {
               BufferedImage image = ImageIO.read(imageFile);
               g2d.drawImage(image, 0, currentY, null);
               currentY += image.getHeight();
               image.flush(); // 处理完后释放当前图片资源
          }

           g2d.dispose();

           // 保存合并后的图片
           ImageIO.write(mergedImage, "PNG", new File(desPath));
           System.out.println("图片合并完成!");
           for (File file : imageFiles){
               if (file.exists()) {
                   if (file.delete()) {
                       System.out.println("文件 " + file.getName() + " 已被删除");
                  } else {
                       System.out.println("无法删除文件 " + file.getName());
                  }
              } else {
                   System.out.println("文件 " + file.getName() + " 不存在");
              }
          }

      } else {
           System.out.println("输入文件夹中没有图片文件!");
      }
  } catch (IOException e) {
       e.printStackTrace();
       System.out.println("图片合并失败: " + e.getMessage());
  }
   return true;
}

新建控制器PdfApi.java

用来接收小程序调用传递过来的参数,需要判断传递过来的文件是否为图片格式,然后调用转换方法即可。

 /**
    * pdf转图片 多页转一张图
    * @param uploadFile
    * @return
    * @throws IOException
    */
   @PostMapping("pdfconvertimage")
   public String upload(@RequestPart("file") MultipartFile uploadFile) throws IOException {
       if (null == uploadFile) {
           return null;
      }
       // BMP、JPG、JPEG、PNG、GIF
       String fileName = uploadFile.getOriginalFilename().toLowerCase();
       if (!fileName.endsWith(".pdf")) {
           return null;
      }
       //String image= PdfUtils.pdf(uploadFile.getInputStream(),Integer.valueOf(type));
       String image= PdfUtils.pdfToPng(uploadFile.getInputStream(),fileName);
       // 返回响应实体
       return image;
  }
 

1.3 后端接口部署

因为微信小程序调用第三方接口需要https域名形式,所以接口开发完成后,需要部署到云服务器,然后申请域名、申请SSL证书,确保接口可以通过https域名正常访问。并且在微信小程序开发设置配置request合法域名白名单,保证接口可以调通。

图片

1.4 微信小程序前端页面开发

打开微信开发者工具,然后微信小程序管理员扫码登录自己的微信小程序。这里主要给大家贴出主要的代码以及实现思路。具体界面如下:

上传方式:支持微信会话文件上传、直接输入PDF文件的URL,转换成功后可以点击下载按钮进行下载图片。

图片

wxml文件代码如下:


<view style="text-align: center;">
<image style="width: 98%;"  src="推广图片"></image>
</view>
<view class="selectSection">
    <text class="textmag">上传方式:</text>
    <radio-group bindchange="radioChange" class="radio-group">
        <label class="radio" wx:for="{{direction}}" wx:key="i">
            <icon class="radioIcon {{item.checked?'actIcon':''}}"></icon>
            <radio checked="{{item.checked}}" value="{{item.name}}"></radio>{{item.value}}
        </label>
    </radio-group>
</view>
<view class="container">
    <view wx:if="{{directionType==1}}" class="item"> <button style="width: 120px;" class="butss" bindtap="chooseFile">上传pdf文件</button></view>
    <view wx:if="{{directionType==2}}" class="item"> <button style="width: 120px;" class="butss" bindtap="chooseFileNew">生成图片</button></view>
    <view class="item"> <button style="width: 90px;" class="butss" bindtap="saveTap">下载</button></view>
    <view class="item"> <button style="width: 90px;" class="butss" bindtap="clearTap">清空</button></view>
</view>

<view style="padding: 20px;">
    <span style="color: red;font-size: 12px;">温馨提示:目前支持10页以内的pdf文件转换</span>
</view>
<view>
  <textarea  auto-height bindinput="handleInput" class="input-content" value="{{uploadUrl}}"  placeholder="请输入pdf文件url" wx:if="{{directionType==2}}"></textarea>
</view><view class="instruction"> 
    <span style="color: black;padding-left: 10px;">结果文件:{{data}}</span>
</view>

js主要代码:

 // 选择微信会话文件 然后直接调用上传接口
    chooseFile: function () {
        var that = this;
        wx.showLoading({
            title: '图片上传处理中,请稍后...',
        });
        wx.chooseMessageFile({
            count: 1,
            type: 'file',
            extension: ['pdf'], // 限定选择的文件格式为.doc, .docx, .pdf
            success: function (res) {
                const tempFilePath = res.tempFiles[0].path;
                if (res.tempFiles[0].size > 10 * 1024 * 1024) { // 限定文件大小为2MB
                    wx.showToast({
                        title: '文件大小超过限制,请选择小于10MB的文件',
                        icon: 'none'
                    });
                    return;
                }
                that.setData({
                    pdfPath: tempFilePath                })wx.uploadFile({
 url: '后端接口API',
 filePath: tempFilePath,
 formData: { 
 },
 name: 'file',
 success: function (res) {
 if (res.statusCode == "200") { 
 that.setData({
 imageUrl: res.data,// 直接可以访问的url
 data: res.data
 }); 
 wx.showToast({
 title: '转换成功',
 icon: 'success',
 duration: 2000
 });
 } else {
 wx.showToast({
 title: '转换失败,请联系管理员',
 icon: 'none',
 duration: 2000
 });
 }
 },
 fail: function (res) {
 wx.showToast({
 title: '上传失败',
 icon: 'none',
 duration: 2000
 });
 }
 });
 },
 fail: function (res) {
 console.error('选择文件失败', res);
 wx.showToast({
 title: '选择文件失败',
 icon: 'none',
 duration: 2000
 });
 }
 });
 },
 
 // 下载按钮事件
 saveTap: function () {
 if (this.data.imageUrl) {
 wx.downloadFile({
 url: this.data.imageUrl,
 success: function (res) {
 if (res.statusCode === 200) {
 var filePath = res.tempFilePath;
 // 调用保存图片方法
 wx.saveImageToPhotosAlbum({
 filePath: filePath,
 success: function (res) {
 wx.showToast({
 title: '保存成功',
 icon: 'success',
 duration: 2000
 });
 },
 fail: function (err) {
 console.error(err);
 wx.showToast({
 title: '保存失败',
 icon: 'none',
 duration: 2000
 });
 }
 });
 }
 },
 fail: function (err) {
 console.error(err);
 wx.showToast({
 title: '下载失败',
 icon: 'none',
 duration: 2000
 });
 }
 });
 } else {
 wx.showToast({
 title: '请先上传pdf文件,转换成功后再保存',
 icon: 'none',
 duration: 2000
 });
 }
 },


1.5 运行效果

选择pdf文件上传

图片

转换成功之后的结果文件如下:

图片

然后可以点击下载按钮下载图片文件。整体转还原度还是很高的。

1.6 小程序部署上线

该步骤对于小程序开发的朋友来说,还是非常简单的,这里就不过多介绍了,大家有问题的话,欢迎沟通交流!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ECharts饼图-基础南丁格尔玫瑰图,附视频讲解与代码下载

引言&#xff1a; 在数据可视化的世界里&#xff0c;ECharts凭借其丰富的图表类型和强大的配置能力&#xff0c;成为了众多开发者的首选。今天&#xff0c;我将带大家一起实现一个饼图图表&#xff0c;通过该图表我们可以直观地展示和分析数据。此外&#xff0c;我还将提供详…

一、在cubemx下RTC配置调试实例测试

一、rtc的时钟有lse提供。 二、选择rtc唤醒与闹钟功能 内部参数介绍 闹钟配置 在配置时间时&#xff0c;注意将时间信息存储起来&#xff0c;防止复位后时间重新配置。 if(HAL_RTCEx_BKUPRead(&hrtc, RTC_BKP_DR0)! 0x55AA)//判断标志位是否配置过&#xff0c;没有则进…

qt EventFilter用途详解

一、概述 EventFilter是QObject类的一个事件过滤器&#xff0c;当使用installEventFilter方法为某个对象安装事件过滤器时&#xff0c;该对象的eventFilter函数就会被调用。通过重写eventFilter方法&#xff0c;开发者可以在事件处理过程中进行拦截和处理&#xff0c;实现对事…

WSL2 Ubuntu22.04编译安装LLVM

前提 这两天因为工作需要&#xff0c;要编译一个Debug版本的llvm。这里对编译安装过程进行一个简单的记录&#xff0c;同时也记录下这个过程中遇到的几个问题。 下载源码并编译 有关llvm编译安装的官方文档在这里。 从git仓库clone llvm的源码。 git clone https://github.c…

FPGA搭建PCIE3.0通信架构简单读写测试,基于XDMA中断模式,提供3套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的PCIE方案本博客方案的PCIE2.0版本 3、PCIE基础知识4、工程详细设计方案工程设计原理框图XDMA配置及使用XDMA中断模块数据缓存架构用户逻辑Windows版本XDMA驱动安装Linux版本XDMA驱动安装测试应用程序工程源码架构PCIE上板…

电磁场-Laplace算子与冲激函数的关系

csdn重新打一遍公式太麻烦了。欢迎转到我的知乎账号上查阅原版文章&#xff0c;也可后台私信我发送原版PDF或者markdown。 电磁场-Laplace算子与冲激函数的关系 - 知乎 下面的文章是一张超大的图片。

论1+2+3+4+... = -1/12 的不同算法

我们熟知自然数全加和&#xff0c; 推导过程如下&#xff0c; 这个解法并不难&#xff0c;非常容易看懂&#xff0c;但是并不容易真正理解。正负交错和无穷项计算&#xff0c;只需要保持方程的形态&#xff0c;就可以“预知”结果。但是这到底说的是什么意思&#xff1f;比如和…

C++扑克牌(poker)2024年CSP-J认证第二轮第一题 CCF信息学奥赛C++ 中小学初级组 第二轮真题解析

目录 C扑克牌&#xff08;poker&#xff09; 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、运行结果 五、考点分析 六、推荐资料 C扑克牌&#xff08;poker&#xff09; 2024年CSP-J认证第二轮第一题 一、题目要求 1、编程实现 小 P 从同学…

HarmonyOS 组件样式@Style 、 @Extend、自定义扩展(AttributeModifier、AttributeUpdater)

1. HarmonyOS Style 、 Extend、自定义扩展&#xff08;AttributeModifier、AttributeUpdater&#xff09; Styles装饰器&#xff1a;定义组件重用样式   ;Extend装饰器&#xff1a;定义扩展组件样式   自定义扩展&#xff1a;AttributeModifier、AttributeUpdater 1.1. 区…

HarmonyOS 5.0应用开发——应用打包HAP、HAR、HSP

【高心星出品】 目录 应用打包HAP、HAR、HSPModule类型HAPHAR创建HAR建立依赖HAR共享内容 HSP创建HSP建立依赖同上HSP共享内容同上 HAR VS HSP 应用打包HAP、HAR、HSP 一个应用通常会包含多种功能&#xff0c;将不同的功能特性按模块来划分和管理是一种良好的设计方式。在开发…

【哈工大_操作系统实验】Lab9 proc文件系统的实现

本节将更新哈工大《操作系统》课程第九个 Lab 实验 proc文件系统的实现。按照实验书要求&#xff0c;介绍了非常详细的实验操作流程&#xff0c;并提供了超级无敌详细的代码注释。 实验目的&#xff1a; 掌握虚拟文件系统的实现原理&#xff1b;实践文件、目录、文件系统等概念…

【C++开篇】

首先初阶的数据结构相信大家已经学习的差不多了&#xff0c;关于初阶数据结构排序的相关内容的总结随后我也会给大家分享出来。C语言和C有许多相同的地方&#xff0c;但也有许多不相同的地方。接下来的C部分&#xff0c;我们主要是针对C与C语言不同的地方来与大家进行分享。其中…

量子变分算法 (python qiskit)

背景 变分量子算法是用于观察嘈杂的近期设备上的量子计算效用的有前途的候选混合算法。变分算法的特点是使用经典优化算法迭代更新参数化试验解决方案或“拟设”。这些方法中最重要的是变分量子特征求解器 (VQE)&#xff0c;它旨在求解给定汉密尔顿量的基态&#xff0c;该汉密尔…

这是一篇vue3 的详细教程

Vue 3 详细教程 一、Vue 3 简介 Vue.js 是一款流行的 JavaScript 前端框架&#xff0c;用于构建用户界面。Vue 3 是其最新版本&#xff0c;带来了许多新特性和性能优化&#xff0c;使开发更加高效和灵活。 二、环境搭建 安装 Node.js 前往Node.js 官方网站下载并安装适合你…

WPF+MVVM案例实战(六)- 自定义分页控件实现

文章目录 1、项目准备2、功能实现1、分页控件 DataPager 实现2、分页控件数据模型与查询行为3、数据界面实现 3、运行效果4、源代码获取 1、项目准备 打开项目 Wpf_Examples&#xff0c;新建 PageBarWindow.xaml 界面、PageBarViewModel.cs ,在用户控件库 UserControlLib中创建…

WASM 使用说明23事(RUST实现)

文章目录 1. wasm是什么1.1 chatgpt定义如下:1.2 wasm关键特性&#xff1a; 2. wasm demo2.1 cargo 创建项目2.2 编写code2.3 安装wasm-pack2.4 编译 3.1 html页面引用wasm代码&#xff08;js引用&#xff09;3.2 访问页面4 导入js function4.1 编写lib.rs文件&#xff0c;内容…

UML 总结(基于《标准建模语言UML教程》)

定义 UML 又称为统一建模语言或标准建模语言&#xff0c;是一种标准的图形化建模语言&#xff0c;它是面向对象分析与设计的一种标准表示。尽管UML 本身没有对过程有任何定义&#xff0c;但UML 对任何使用它的方法&#xff08;或过程&#xff09;提出的要求是&#xff1a;支持用…

【含开题报告+文档+PPT+源码】基于vue框架的东升餐饮点餐管理平台的设计与实现

开题报告 在当前信息化社会背景下&#xff0c;餐饮行业正经历着由传统线下服务模式向线上线下深度融合的转变。随着移动互联网技术及大数据应用的飞速发展&#xff0c;用户对于餐饮服务平台的需求也日益多元化和个性化。他们期望能在一个集便捷、高效、个性化于一体的平台上完…

自动化测试工具Ranorex Studio(十六)-添加新Action

在Action表中&#xff0c;有两种手动添加action的方式。 一种方法是指定Action本身&#xff08;’添加新Action’&#xff09;&#xff0c;然后分配对应的对象库条目&#xff08;在多数情况下&#xff09;。 第二种方法是直接把对象库条目拖放到Action表内&#xff0c;然后生成…

力扣 中等 2466.统计构造好字符串的方案数

文章目录 题目介绍题解 题目介绍 题解 题意&#xff1a;每次可以爬 zero 或 one 个台阶&#xff0c;返回爬 low 到 high 个台阶的方案数。 和上题337.组合总和 &#xff08;链接&#xff09;的思路一样&#xff0c;只不过是将可以爬的台阶数从数组换成了两个数&#xff08;ze…