diff --git a/img-converter/index.html b/img-converter/index.html new file mode 100644 index 0000000..68dd46b --- /dev/null +++ b/img-converter/index.html @@ -0,0 +1,26 @@ + + + + GitHub Project Comparator + + + + + + + + +
+

Super img converter

+
+ Drop files here +
+ + +
+
+ + \ No newline at end of file diff --git a/img-converter/script.js b/img-converter/script.js new file mode 100644 index 0000000..3a89794 --- /dev/null +++ b/img-converter/script.js @@ -0,0 +1,43 @@ +document.getElementById('drop_zone').addEventListener('dragover', function(e) { + e.preventDefault(); + e.stopPropagation(); + e.dataTransfer.dropEffect = 'copy'; +}); + +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++) { + convertAndDownload(files[i], outputFormat); + } +}); + +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); + }; + 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.'); +}); \ No newline at end of file diff --git a/img-converter/style.css b/img-converter/style.css new file mode 100644 index 0000000..e69de29