Advertisement
vendetta25

kamera.html

Aug 1st, 2024
29
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.05 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document Photo Upload</title>
  7. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  8. <style>
  9. .upload-box {
  10. border: 2px dashed #000;
  11. text-align: center;
  12. margin-top: 20px;
  13. cursor: pointer;
  14. width: 200px; /* Set the desired width */
  15. height: 200px; /* Set the desired height */
  16. background-size: cover; /* Ensure the background image covers the entire box */
  17. background-repeat: no-repeat; /* Prevent repeating the background image */
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="container mt-5">
  23. <ul class="nav nav-tabs">
  24. <li class="nav-item">
  25. <a class="nav-link active" href="#">SEBELUM</a>
  26. </li>
  27. <li class="nav-item">
  28. <a class="nav-link" href="#">SEMENTARA</a>
  29. </li>
  30. <li class="nav-item">
  31. <a class="nav-link" href="#">SELESAI</a>
  32. </li>
  33. </ul>
  34. <div id="beforeWork" class="upload-box" onclick="handleFileUpload()">
  35. <h5>Sebelum Pekerjaan</h5>
  36. <!-- Hidden file input to handle file uploads -->
  37. <input type="file" id="fileInput" onchange="displayPhoto(event)" hidden>
  38. </div>
  39. <p>KLIK AREA KOTAK INI UNTUK MENGUPLOAD ATAU MENGAMBIL FOTO</p>
  40. <button onclick="savePhoto()">SIMPAN</button>
  41. </div>
  42. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  43. <script>
  44. function handleFileUpload() {
  45. const fileInput = document.getElementById('fileInput');
  46. fileInput.click();
  47. }
  48.  
  49. function displayPhoto(event) {
  50. const selectedFile = event.target.files[0];
  51. if (selectedFile) {
  52. // Display the photo (set as background image)
  53. const uploadBox = document.getElementById('beforeWork');
  54. uploadBox.style.backgroundImage = `url(${URL.createObjectURL(selectedFile)})`;
  55. }
  56. }
  57.  
  58. function savePhoto() {
  59. const selectedFile = document.getElementById('fileInput').files[0];
  60. if (selectedFile) {
  61. // Create a new FileReader
  62. const reader = new FileReader();
  63.  
  64. // Define what to do when the file is read
  65. reader.onload = function(event) {
  66. // Create an image element to display the photo
  67. const image = new Image();
  68. image.src = event.target.result;
  69.  
  70. // Draw the image on a canvas
  71. const canvas = document.createElement('canvas');
  72. const ctx = canvas.getContext('2d');
  73. canvas.width = image.width;
  74. canvas.height = image.height;
  75. ctx.drawImage(image, 0, 0);
  76.  
  77. // Add text "SEBELUM PEKERJAAN" to the image
  78. ctx.font = "20px Arial";
  79. ctx.fillStyle = "white";
  80. ctx.fillText("SEBELUM PEKERJAAN", 10, 30);
  81.  
  82. // Convert the canvas content to data URL and create a link to download
  83. const dataURL = canvas.toDataURL();
  84. const a = document.createElement('a');
  85. a.href = dataURL;
  86. a.download = selectedFile.name;
  87. a.click();
  88.  
  89. console.log('Photo saved with text:', selectedFile.name);
  90. };
  91.  
  92. // Read the file as a data URL
  93. reader.readAsDataURL(selectedFile);
  94. } else {
  95. console.log('No photo selected.');
  96. }
  97. }
  98. </script>
  99. </body>
  100. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement