new file: img-converter/index.html

new file: img-converter/script.js new file: img-converter/style.css
sidbxl · Jan 26, 2024 · 70726b3 · 70726b3
1 parent 1bf0c93
commit 70726b3
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 0 deletions.
diff --git a/img-converter/index.html b/img-converter/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>GitHub Project Comparator</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
+    <script src="script.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Super img converter</h1>
+        <div id="drop_zone" style="width: 300px; height: 200px; border: 1px solid black;">
+            Drop files here
+        </div>
+        <select id="output_format">
+            <option value="jpeg">JPEG</option>
+            <option value="png">PNG</option>
+        </select>
+        <button id="convert_button">Convert</button>
+    </div>
+    <div class="footer"></div>
+</body>
+</html>
diff --git a/img-converter/script.js 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.');
+});
diff --git a/img-converter/style.css b/img-converter/style.css