欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用JavaScript將圖片合并為PDF的實(shí)現(xiàn)

 更新時(shí)間：2024年07月02日 09:34:17   作者：xulihang  
在日常工作中,我們可能需要拍攝一些照片并將圖像合并到PDF文件中,這可以通過許多應(yīng)用來完成,Dynamsoft Document Viewer讓這一操作更加方便,在本文中,我們將使用Dynamsoft Document Viewer創(chuàng)建一個(gè)Web應(yīng)用,用JavaScript將圖像合并到PDF中,需要的朋友可以參考下

介紹

在日常工作中，我們可能需要拍攝一些照片并將圖像合并到PDF文件中。這可以通過許多應(yīng)用來完成。Dynamsoft Document Viewer讓這一操作更加方便，因?yàn)樗梢栽跒g覽器中執(zhí)行。可以集成該操作到我們的在線網(wǎng)站、CRM系統(tǒng)中。

在本文中，我們將使用Dynamsoft Document Viewer創(chuàng)建一個(gè)Web應(yīng)用，用JavaScript將圖像合并到PDF中。

新建HTML文件

創(chuàng)建一個(gè)包含以下模板的新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>

添加依賴項(xiàng)

在頁(yè)面中包含Dynamsoft Document Viewer。

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

選擇文件

接下來，選擇要合并的文件。

添加用于選擇多個(gè)文件的input元素。

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

然后，我們可以使用以下JavaScript獲取所選文件：

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

將圖像合并為PDF

在頁(yè)面中添加按鈕以執(zhí)行合并圖像到PDF的操作。

HTML：

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

JavaScript：

使用許可證初始化Dynamsoft Document Viewer?？梢栽?a rel="external nofollow" target="_blank">此處申請(qǐng)?jiān)S可證。

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創(chuàng)建新的文檔實(shí)例。

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();

通過以下函數(shù)下載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>

使用以下代碼啟動(dòng)它。

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

我們可以旋轉(zhuǎn)、裁剪、重新排序和刪除圖像，并為圖像應(yīng)用濾鏡。

以上就是使用JavaScript將圖片合并為PDF的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript圖片合并為PDF的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論