dynamically increasing height of div using input type range

READ OTHER POST

Image to PDF Comverter Script for blogger

मेरा परिचय।

मेरा नाम है प्रियांशू कश्यप और हमेशा की तरह आपका हमारी इस वेबसाइट में आपको स्वागत है।

नमस्कार दोस्तों आज मैं फिर से आपके लिये एक और बहतरीन का टूल लेकर आ चुका जो की है IMG TO PDF CONVERTER टूल इसमें आप किसी भी फोटो काे पी0डी0एफ0 फीइल में बदल सकतें है और अगर आप इसे पाना चाहतें है और अपनी वेबसाइट में लगाना चाहतें है नीचे आपको इसका कोड मिल जायेगा। जाकर डाउनलोड कर सकतें है इसमें सिर्फ .PNG, .JPEG, .JPG फाइल ही सपोर्ट करेंगी या कहें की कनवर्ट करेंगी। तो जाईये अभी और जाकर डाउनलोड करिये अगर आपको पसन्द आये तो हमें जरूर बनाता।

PDF क्या हैं?

Credit: Adobe Acrobat

DEMO & Download

Demo

Copy Code

W3.CSS <!DOCTYPE html>  <script> function disableselect(e){ return false } function reEnable(){ return true } //if IE4+ document.oncontextmenu=new Function ("return false") //if NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script> <html> <script type="text/jscript"> function disableContextMenu() { window.frames["fraDisabled"].document.oncontextmenu = function(){alert("No way!"); return false;}; // Or use this // document.getElementById("fraDisabled").contentWindow.document.oncontextmenu = function(){alert("No way!"); return false;};; } </script> <body bgcolor="#FFFFFF" onload="disableContextMenu();" oncontextmenu="return false"> <div style="width:528px;height:473px;background-color:transparent;position:absolute;top:0px;"> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1"> <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: transparent; color: #000; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .container{ background: #ccc; 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: transparent; border-radius: 5px; } button,.upload{ width: 220px; margin: 50px 20px 10px 20px ; text-align: center; position: relative; padding: 10px 5px; font-size: 17px; outline: ridge; color: #fff; border: none; background-color: blue; border-radius: 5px; display: block; } .upload{ background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5); } </style> </head> <body> <div class="container"> <img id="showImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_KT0CKy3TT660JhEToYdGp2Va_2RHFvrWvI4vKPmmk93UhIhe5-MGfChMy82XSXepfaGZ-oj8ti1TbCwVnQVydcQn__Fa8C1EkiHNqFkrXVykFI8P0ajSNKQPqaaNKM6DCSpYmGqu8uXV/s400/pngpng.png"> <div class="button"> <div class="upload"> <input type="file" onChange="loadFile(event)" name="" accept=".png, .png, .jpg,.jpg, .jpeg"> CHOOSE IMAGE </div> <button onClick="pdfDown()">DOWNLOAD 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('pomsd-ImgToPDF.pdf') } </script> </body> </html>

इन्हे भी देखें

इसी तरह की Scripts,Codes, पाने के लिये हमारे साथ जुडें रहें और एसी तरह से हमें प्यार और सर्पाेर्ट बनायें रखें मैं आपके लिये नई नई जानकारियाँ आप तक पहुँचाता पहुँगा।

Adsvertiment