From 83c4d27a60cc07a0d92ed5c14b3b08fce4853986 Mon Sep 17 00:00:00 2001 From: sidbxl Date: Tue, 30 Jan 2024 11:39:57 +0100 Subject: [PATCH] modified: img-converter/img-converter.html modified: img-converter/script.js --- img-converter/img-converter.html | 12 ++--- img-converter/script.js | 79 ++++++++++++++------------------ 2 files changed, 41 insertions(+), 50 deletions(-) diff --git a/img-converter/img-converter.html b/img-converter/img-converter.html index 68dd46b..8058337 100644 --- a/img-converter/img-converter.html +++ b/img-converter/img-converter.html @@ -1,10 +1,12 @@ - GitHub Project Comparator + Super IMG Converter + + @@ -12,14 +14,12 @@

Super img converter

-
- Drop files here -
- - +
+
diff --git a/img-converter/script.js b/img-converter/script.js index 0f5012e..509bf0e 100644 --- a/img-converter/script.js +++ b/img-converter/script.js @@ -1,47 +1,38 @@ -document.getElementById('drop_zone').addEventListener('dragover', function(e) { - e.preventDefault(); - e.stopPropagation(); - e.dataTransfer.dropEffect = 'copy'; -}); +Dropzone.autoDiscover = false; +$(document).ready(function() { + // Turn the drop zone into a Dropzone + var myDropzone = new Dropzone('#drop_zone', { + url: function() {}, // Dummy function to prevent upload + acceptedFiles: 'image/*', // Only accept image files + autoProcessQueue: false, // Don't upload the files immediately + }); + + // When a file is added, convert and download it + myDropzone.on('addedfile', function(file) { + var outputFormat = document.getElementById('output_format').value; + convertAndDownload(file, outputFormat); + }); -document.getElementById('drop_zone').addEventListener('drop', function(e) { - e.preventDefault(); - e.stopPropagation(); - - var outputFormat = document.getElementById('output_format').value; - var files = e.dataTransfer.files; - - for (var i = 0; i < files.length; i++) { - if (files[i].type.startsWith('image/')) { // Check if the file is an image - convertAndDownload(files[i], outputFormat); - } else { - alert('Please drop an image file.'); - } - } -}); - -function convertAndDownload(file, outputFormat) { - var reader = new FileReader(); - reader.onload = function(e) { - var img = new Image(); - img.onload = function() { - var canvas = document.createElement('canvas'); - canvas.width = img.width; - canvas.height = img.height; - var ctx = canvas.getContext('2d'); - ctx.drawImage(img, 0, 0); - canvas.toBlob(function(blob) { - var link = document.createElement('a'); - link.href = URL.createObjectURL(blob); - link.download = file.name + '.' + outputFormat; - link.click(); - }, 'image/' + outputFormat); + function convertAndDownload(file, outputFormat) { + console.log("convertAndDownload function is called"); + var reader = new FileReader(); + reader.onload = function(e) { + var img = new Image(); + img.onload = function() { + var canvas = document.createElement('canvas'); + canvas.width = img.width; + canvas.height = img.height; + var ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0); + canvas.toBlob(function(blob) { + var link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = file.name + '.' + outputFormat; + link.click(); + }, 'image/' + outputFormat); + }; + img.src = e.target.result; }; - img.src = e.target.result; - }; - reader.readAsDataURL(file); -} - -document.getElementById('convert_button').addEventListener('click', function() { - alert('Please drop an image file into the drop zone.'); + reader.readAsDataURL(file); + } }); \ No newline at end of file