Add files via upload

2026-09-03 06:25:43 +08:00 · 2022-07-24 14:17:44 +08:00
parent 96b43bf125
commit b575aba37b
1 changed files with 117 additions and 0 deletions
--- a/工具-20.图片-pdf转换器/pdf.html
+++ b/工具-20.图片-pdf转换器/pdf.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
+<title>PDF 转换器</title>
+<style>
+  *,*: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;
+}
+
+input{
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	z-index: 1;
+}
+.button{
+  display: flex;
+
+}
+#showImg{
+	display: block;
+	margin: 0 auto;
+	max-width: 400px;
+  min-height: 200px;
+  background: #174353;
+	border-radius: 5px;
+}
+
+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;
+}
+
+  </style>  
+</head>
+<body>
+
+<div class="container">
+
+	<img id="showImg" src="images/img.png">
+
+ <div class="button">
+   <div class="upload">
+    <input type="file" onChange="loadFile(event)" name="" accept=".png, .jpg, .jpeg">
+    上传图片
+  </div>
+	<button onClick="pdfDown()">下载PDF</button>
+</div>
+</div>
+
+
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
+<script>
+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) // free memory
+}
+};
+
+function pdfDown(){
+console.log(newImage)
+var doc = new jsPDF();
+doc.addImage(newImage,10,10);
+doc.save('ImgtoPDF.pdf')
+}
+
+</script>
+</body>
+</html>