基于JavaScript編寫一個圖片轉(zhuǎn)PDF轉(zhuǎn)換器
這是一個簡單的 JavaScript 項目,可以將圖片轉(zhuǎn)換為 PDF 文件。你可以從本地選擇任何一張圖片,只需點擊一下即可將其轉(zhuǎn)換為 PDF 文件。但是除了圖片之外,其他文件不可以在此處轉(zhuǎn)換為 PDF。我使用 HTML 添加了不同的元素并創(chuàng)建了一個輸入框來選擇圖像。
我們從 HTML 中獲得不同類型的輸入。其中之一是文件。文件輸入將幫助你從設(shè)備中選擇任何文件。這里我們僅用 = ".png, .jpg, .jpeg"選擇接受輸入中的圖像,因此只能選擇這些圖片。
JavaScript 實現(xiàn)圖片轉(zhuǎn) PDF
如你所見,已在漸變背景上創(chuàng)建了一個框。首先,這個盒子有一個小顯示器。你可以在該框中看到選定的圖像。這將使你知道要轉(zhuǎn)換為 PDF 的圖像。
但是,這里的問題是你不能一次選擇多個圖像。PDF 文件將由圖像創(chuàng)建。
如何使用 JavaScript 將圖像轉(zhuǎn)換為 pdf ?這個PDF轉(zhuǎn)換器有兩個按鈕。一鍵選擇圖片,一鍵轉(zhuǎn)換并下載為 PDF 文件。
當(dāng)你單擊上傳或選擇按鈕時,你可以從設(shè)備中選擇任何圖像。當(dāng)你點擊下載按鈕時,你的圖像將被轉(zhuǎn)換為 PDF 并下載。使用很少的 HTML、CSS 和 JavaScript 就可以很容易地構(gòu)建。
第一步: PDF Converter的基本結(jié)構(gòu)
項目的基本結(jié)構(gòu)是使用以下 HTML 和 CSS 創(chuàng)建的。首先,為網(wǎ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; }
第二步: 圖片預(yù)覽框
現(xiàn)在已經(jīng)創(chuàng)建了一個可以查看圖像的區(qū)域。這意味著可以在此處看到你將選擇轉(zhuǎn)換為 PDF 的圖像的預(yù)覽。這個盒子使用最大寬度: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)建了兩個按鈕。第一個按鈕是使用輸入創(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 中實現(xiàn)圖片轉(zhuǎn)換到 PDF
現(xiàn)在是時候使用 JavaScript 實現(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編寫一個圖片轉(zhuǎn)PDF轉(zhuǎn)換器的文章就介紹到這了,更多相關(guān)JavaScript 圖片轉(zhuǎn)PDF內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS 組件系列之BootstrapTable的treegrid功能
這篇文章主要介紹了JS 組件系列之BootstrapTable的treegrid功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06js分解url參數(shù)(面向?qū)ο?極簡主義法應(yīng)用)
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡主義法)和一個分解url參數(shù)面試題,我作了一下修改,記錄下來2012-08-08javascript封裝 Cookie 應(yīng)用接口
本文通過幾個簡單的示例向大家展示了javascript封裝cookie的注意事項及操作方法,非常的簡單實用,最后附上一則具體實例,有需要的小火把可以參考下。2015-08-08JavaScript forEach的幾種用法小結(jié)
forEach()是JavaScript中一個常用的方法,用于遍歷數(shù)組或類數(shù)組對象中的每個元素,本文就來介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價值,感興趣的可以了解一下2023-11-11JavaScript實現(xiàn)動態(tài)刪除列表框值的方法
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)刪除列表框值的方法,涉及javascript針對select列表框的遍歷與刪除操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08