快捷導(dǎo)航

基于JavaScript編寫(xiě)一個(gè)圖片轉(zhuǎn)PDF轉(zhuǎn)換器

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

本文為大家介紹了一個(gè)簡(jiǎn)單的 JavaScript 項(xiàng)目，可以將圖片轉(zhuǎn)換為 PDF 文件。你可以從本地選擇任何一張圖片，只需點(diǎn)擊一下即可將其轉(zhuǎn)換為 PDF 文件，感興趣的可以動(dòng)手嘗試一下

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

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

JavaScript 實(shí)現(xiàn)圖片轉(zhuǎn) PDF

在線演示地址

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

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

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

當(dāng)你單擊上傳或選擇按鈕時(shí)，你可以從設(shè)備中選擇任何圖像。當(dāng)你點(diǎn)擊下載按鈕時(shí)，你的圖像將被轉(zhuǎn)換為 PDF 并下載。使用很少的 HTML、CSS 和 JavaScript 就可以很容易地構(gòu)建。

第一步： PDF Converter的基本結(jié)構(gòu)

項(xiàng)目的基本結(jié)構(gòu)是使用以下 HTML 和 CSS 創(chuàng)建的。首先，為網(wǎng)頁(yè)添加了漸變背景色。然后創(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;
}

第二步：圖片預(yù)覽框

現(xiàn)在已經(jīng)創(chuàng)建了一個(gè)可以查看圖像的區(qū)域。這意味著可以在此處看到你將選擇轉(zhuǎn)換為 PDF 的圖像的預(yù)覽。這個(gè)盒子使用最大寬度：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 轉(zhuǎn)換器的按鈕

現(xiàn)在已經(jīng)創(chuàng)建了兩個(gè)按鈕。第一個(gè)按鈕是使用輸入創(chuàng)建的，它將基本上選擇文件。第二個(gè)按鈕下載 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 中實(shí)現(xiàn)圖片轉(zhuǎn)換到 PDF

現(xiàn)在是時(shí)候使用 JavaScript 實(shí)現(xiàn)圖片到 PDF 的轉(zhuǎn)換了。

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')
}

到此這篇關(guān)于基于JavaScript編寫(xiě)一個(gè)圖片轉(zhuǎn)PDF轉(zhuǎn)換器的文章就介紹到這了,更多相關(guān)JavaScript 圖片轉(zhuǎn)PDF內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: