基于JavaScript編寫一個圖片轉PDF轉換器

更新時間：2022年07月24日 08:37:35 作者：海擁

本文為大家介紹了一個簡單的 JavaScript 項目，可以將圖片轉換為 PDF 文件。你可以從本地選擇任何一張圖片，只需點擊一下即可將其轉換為 PDF 文件，感興趣的可以動手嘗試一下

這是一個簡單的 JavaScript 項目，可以將圖片轉換為 PDF 文件。你可以從本地選擇任何一張圖片，只需點擊一下即可將其轉換為 PDF 文件。但是除了圖片之外，其他文件不可以在此處轉換為 PDF。我使用 HTML 添加了不同的元素并創(chuàng)建了一個輸入框來選擇圖像。

我們從 HTML 中獲得不同類型的輸入。其中之一是文件。文件輸入將幫助你從設備中選擇任何文件。這里我們僅用 = ".png, .jpg, .jpeg"選擇接受輸入中的圖像，因此只能選擇這些圖片。

JavaScript 實現圖片轉 PDF

在線演示地址

如你所見，已在漸變背景上創(chuàng)建了一個框。首先，這個盒子有一個小顯示器。你可以在該框中看到選定的圖像。這將使你知道要轉換為 PDF 的圖像。

但是，這里的問題是你不能一次選擇多個圖像。PDF 文件將由圖像創(chuàng)建。

如何使用 JavaScript 將圖像轉換為 pdf ？這個PDF轉換器有兩個按鈕。一鍵選擇圖片，一鍵轉換并下載為 PDF 文件。

當你單擊上傳或選擇按鈕時，你可以從設備中選擇任何圖像。當你點擊下載按鈕時，你的圖像將被轉換為 PDF 并下載。使用很少的 HTML、CSS 和 JavaScript 就可以很容易地構建。

第一步： PDF Converter的基本結構

項目的基本結構是使用以下 HTML 和 CSS 創(chuàng)建的。首先，為網頁添加了漸變背景色。然后創(chuàng)建盒子。

<div class="container">

</div>

*,
*:after,
*:before{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}

body{
 font-family: arial;
 font-size: 16px;
 margin: 0;
 background: linear-gradient(133deg, #4abeb2, #3c57d2);
 color: #000;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
}

.container{
  background: white;
  width: 450px;
  padding: 30px;
  border-radius: 5px;
}

第二步：圖片預覽框

現在已經創(chuàng)建了一個可以查看圖像的區(qū)域。這意味著可以在此處看到你將選擇轉換為 PDF 的圖像的預覽。這個盒子使用最大寬度：400px和最小高度：200px.

<img id="showImg" src="images/img.png">

#showImg{
 display: block;
 margin: 0 auto;
 max-width: 400px;
 min-height: 200px;
 background: #174353;
 border-radius: 5px;
}

第 3 步：圖像到 PDF 轉換器的按鈕

現在已經創(chuàng)建了兩個按鈕。第一個按鈕是使用輸入創(chuàng)建的，它將基本上選擇文件。第二個按鈕下載 PDF 文件。

 <div class="button">
   <div class="upload">
    <input type="file" onChange="loadFile(event)" name="" accept=".png, .jpg, .jpeg">
    上傳圖片
  </div>
	<button onClick="pdfDown()">下載PDF</button>
</div>

input{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 z-index: 1;
}

.button{
  display: flex;
}
button,.upload{
 width: 220px;
 margin: 50px 20px 10px 20px ;
 text-align: center;
 position: relative;
 padding: 10px 5px;
 font-size: 17px;
 outline: none;
 color: #fff;
 border: none;
 background-color: #023780;
 border-radius: 5px;
 display: block;
}

.upload{
 background: #a74901;
}

第 4 步：在 JavaScript 中實現圖片轉換到 PDF

現在是時候使用 JavaScript 實現圖片到 PDF 的轉換了。

var newImage, showImg;
function loadFile(event) {
  showImg = document.getElementById('showImg');
  showImg.src = URL.createObjectURL(event.target.files[0]);

  newImage = document.createElement('img');
  newImage.src = URL.createObjectURL(event.target.files[0]);

  showImg.onload = function() {
    URL.revokeObjectURL(showImg.src) 
}
};

function pdfDown(){
  console.log(newImage)
  var doc = new jsPDF();
  doc.addImage(newImage,10,10);
  doc.save('ImgToPDF.pdf')
}