使用JavaScript将图片合并为PDF的实现

更新时间：2024年07月02日 09:34:17 作者：xulihang

在日常工作中,我们可能需要拍摄一些照片并将图像合并到PDF文件中,这可以通过许多应用来完成,Dynamsoft Document Viewer让这一操作更加方便,在本文中,我们将使用Dynamsoft Document Viewer创建一个Web应用,用JavaScript将图像合并到PDF中,需要的朋友可以参考下

介绍

在日常工作中，我们可能需要拍摄一些照片并将图像合并到PDF文件中。这可以通过许多应用来完成。Dynamsoft Document Viewer让这一操作更加方便，因为它可以在浏览器中执行。可以集成该操作到我们的在线网站、CRM系统中。

在本文中，我们将使用Dynamsoft Document Viewer创建一个Web应用，用JavaScript将图像合并到PDF中。

新建HTML文件

创建一个包含以下模板的新HTML文件。

<!DOCTYPE html>
<html>
<head>
  <title>Document Scanner</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  <style>
  </style>
</head>
<body>
  <h2>Merge Images into PDF</h2>
  <script>
  </script>
</body>
</html>

添加依赖项

在页面中包含Dynamsoft Document Viewer。

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.css" rel="external nofollow" >

选择文件

接下来，选择要合并的文件。

添加用于选择多个文件的input元素。

<input type="file" name="file" id="file" multiple="multiple">

然后，我们可以使用以下JavaScript获取所选文件：

let fileInput = document.getElementById("file");
let files = fileInput.files;

将图像合并为PDF

在页面中添加按钮以执行合并图像到PDF的操作。

HTML：

<button onclick="merge()">Merge into PDF</button>

JavaScript：

使用许可证初始化Dynamsoft Document Viewer。可以在此处申请许可证。

Dynamsoft.DDV.Core.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; // Public trial license which is valid for 24 hours
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/engine";// Lead to a folder containing the distributed WASM files
await Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init();
Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());

使用Dynamsoft Document Viewer的DocumentManager创建新的文档实例。

const doc = Dynamsoft.DDV.documentManager.createDocument();

以blob格式读取文件并将其加载到文档中。

let fileInput = document.getElementById("file");
let files = fileInput.files;
for (let index = 0; index < files.length; index++) {
  const file = files[index];
  const source = await readFileAsBlob(file);
  try {
    await doc.loadSource(source);  
  } catch (error) {
    console.log(error);
  }
}

function readFileAsBlob(file){
  return new Promise((resolve, reject) => {
    let fileReader = new FileReader();
    fileReader.onload = function(e){
      const blob = new Blob([new Uint8Array(e.target.result)], {type: file.type });
      resolve(blob);
    };
    fileReader.onerror = function () {
      reject();
    };
    fileReader.readAsArrayBuffer(file);
  })
}

将图像保存为PDF。

const blob = await doc.saveToPdf();

通过以下函数下载PDF。

function downloadBlob(blob){
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob);
  link.download = "scanned.pdf";
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(link.href);
}

使用编辑界面

Dynamsoft Document Viewer附带一系列组件。在合并到PDF文件之前，我们可以使用其EditViewer查看和编辑图像。

在HTML中添加容器。

<div id="container" style="height:480px;"></div>

使用以下代码启动它。

let editViewer = new Dynamsoft.DDV.EditViewer({
  container: "container",
});
editViewer.openDocument(doc.uid);

我们可以旋转、裁剪、重新排序和删除图像，并为图像应用滤镜。

以上就是使用JavaScript将图片合并为PDF的实现的详细内容，更多关于JavaScript图片合并为PDF的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS中confirm,alert,prompt函数使用区别分析
JS中confirm,alert,prompt函数使用区别分析，需要的朋友可以参考下。
2010-04-04
微信公众平台开发教程（四）实例入门：机器人回复(附源码)
本篇文章主要介绍了微信公众平台开发机器人，可以实现简单对话和查询天气等，有需要的可以了解一下。
2016-12-12
几句话带你理解JS中的this、闭包、原型链
在javascript前端开发阶段经常会遇到this，闭包，原型链知识，那么大家对这三种的基本知识理解吗？今天小编就带领大家一起学习this，闭包，原型链的知识，感兴趣的朋友一起看看吧
2016-09-09
详解js跨域请求的两种方式，支持post请求
原先一直以为要实现跨域请求只能用jsonp，只能支持GET请求，后来了解到使用POST请求也可以实现跨域，但是需要在服务器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers头，下面说明下两个不同的方法实现的方式和原理。
2018-05-05
微信小程序图片横向左右滑动案例
这篇文章主要为大家详细介绍了微信小程序图片横向左右滑动的案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Jquery把获取到的input值转换成json
本篇文章主要介绍了Jquery把获取到的input值转换成json的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
2017-05-05
eval的两组性能测试数据
最近对eval火爆的讨论，教主 @Franky 和灰大 @otakustay 也给了精彩的数据分析,刚好之前也做过类似的测试，我也跟风凑个热闹，提供两组数据供大家参考
2012-08-08
JS实现AES加密并与PHP互通的方法分析
这篇文章主要介绍了JS实现AES加密并与PHP互通的方法,结合实例形式分析了javascript与php的加密、解密算法相关操作技巧,需要的朋友可以参考下
2017-04-04
JavaScript实现随机点名程序
这篇文章主要为大家详细介绍了JavaScript实现随机点名程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
JS原型继承四步曲及原型继承图一览
下面小编就为大家分享一篇JS原型继承四步曲及原型继承图一览，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11