Created
July 26, 2024 18:33
-
-
Save iamdanre/11bd8471a9edaee7cfb66ef665c7f1c3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| <input type="file" multiple class="my-image-field" /> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h2>Before</h2> | |
| <img src="" id="before" alt="Before" /> | |
| </div> | |
| <div class="col-md-6"> | |
| <h2>After</h2> | |
| <img src="" id="after" alt="After" /> | |
| </div> | |
| </div> | |
| */ | |
| <script> | |
| // https://pqina.nl/blog/compress-image-before-upload/#saving-the-compressed-image-back-to-the-file-input | |
| const compressImage = async (file, { quality = 1, type = file.type }) => { | |
| // Get as image data | |
| const imageBitmap = await createImageBitmap(file); | |
| // Draw to canvas | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = imageBitmap.width; | |
| canvas.height = imageBitmap.height; | |
| const ctx = canvas.getContext('2d'); | |
| ctx.drawImage(imageBitmap, 0, 0); | |
| // Turn into Blob | |
| const blob = await new Promise((resolve) => | |
| canvas.toBlob(resolve, type, quality) | |
| ); | |
| // Turn Blob into File | |
| return new File([blob], file.name, { | |
| type: blob.type, | |
| }); | |
| }; | |
| // Get the selected file from the file input | |
| const input = document.querySelector('.my-image-field'); | |
| input.addEventListener('change', async (e) => { | |
| // Get the files | |
| const { files } = e.target; | |
| // No files selected | |
| if (!files.length) return; | |
| // console.info("Before compression", files); | |
| console.log("Before compression", files[0].size); | |
| document.getElementById('before').src = URL.createObjectURL(files[0]); | |
| // We'll store the files in this data transfer object | |
| const dataTransfer = new DataTransfer(); | |
| // For every file in the files list | |
| for (const file of files) { | |
| // We don't have to compress files that aren't images | |
| if (!file.type.startsWith('image')) { | |
| // Ignore this file, but do add it to our result | |
| dataTransfer.items.add(file); | |
| continue; | |
| } | |
| // We compress the file by 50% | |
| const compressedFile = await compressImage(file, { | |
| quality: 0.5, | |
| // type: 'image/jpeg', | |
| type: file.type, | |
| }); | |
| // Save back the compressed file instead of the original file | |
| dataTransfer.items.add(compressedFile); | |
| } | |
| console.log("After compression", dataTransfer.files); | |
| // Set value of the file input to our new files list | |
| e.target.files = dataTransfer.files; | |
| // dump the files to the console | |
| // console.log("After compression", e.target.files); | |
| console.log("After compression", e.target.files[0].size); | |
| document.getElementById('after').src = URL.createObjectURL(e.target.files[0]); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment