v1

JMU-CS · Jan 4, 2019 · cb250e5 · cb250e5
1 parent d0f13a2
commit cb250e5
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="node_modules/dropzone/dist/dropzone.css">
+    <link rel="stylesheet" href="style/style.css">
+    <title>Madi-fy</title>
+</head>
+<body>
+    <nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-md">
+        <a class="navbar-brand" href="#">Madi-fy</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <span class="navbar-text text-center w-100">
+                Madi-fy your image by clicking or dropping it below.
+            </span>
+            <span class="navbar-text text-center w-100 removed">
+                Click on your madi-fyed image to download it, or madi-fy a new image by clicking or dropping it below
+            </span>
+            <!-- <ul class="navbar-nav mr-auto">
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Link</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false">
+                        Dropdown
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" href="#">Action</a>
+                        <a class="dropdown-item" href="#">Another action</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link disabled" href="#">Disabled</a>
+                </li>
+            </ul> -->
+        </div>
+    </nav>
+
+
+    <!-- <div class="editor-buttons"> -->
+        <form id="my-awesome-dropzone" class="dropzone dz-clickable" action="/dev/null">
+            <div class="preview-wrapper hidden mx-auto">
+                <canvas id="canvas" class="mx-auto"></canvas>
+                <p class="download-message">Click to save</p>
+            </div>
+            <!-- <label for="upload-file">Upload a Picture</label> -->
+            <input class="hidden dz-message" type="file" id="upload-file" placeholder="Upload a Picture" />
+            <!-- <button id="download-btn">Download Image</button> -->
+        </form>
+        <!-- <br /> -->
+        <!-- </div> -->
+
+
+    <script src="node_modules/caman/dist/caman.min.js"></script>
+    <script src="node_modules/@jmu-cs/customscale-camanjs-filter/index.js"></script>
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="node_modules/dropzone/dist/min/dropzone.min.js"></script>
+    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="js/index.js"></script>
+</body>
+</html>
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,65 @@
+var img = new Image()
+var canvas = document.getElementById('canvas')
+var ctx = canvas.getContext('2d')
+var fileName = ''
+
+Caman.allowRevert = false
+
+Dropzone.options.myAwesomeDropzone = {
+  autoProcessQueue: false,
+  autoQueue: false,
+  createImageThumbnails: false,
+  init: function () {
+    this.on("addedfile", function (file) {
+      var reader = new FileReader()
+      if (file) {
+        fileName = file.name
+        reader.readAsDataURL(file)
+      }
+      reader.addEventListener('load', function () {
+        img = new Image()
+        img.src = reader.result
+        img.onload = function () {
+          canvas.width = img.width
+          canvas.height = img.height
+          $(".preview-wrapper").css("width", img.width)
+          $(".preview-wrapper").css("height", img.height)
+          ctx.drawImage(img, 0, 0, img.width, img.height)
+          $('#canvas').removeAttr('data-caman-id')
+          Caman('#canvas', function () {
+            // this.revert(false)
+            this.customscale()
+            this.render()
+            $(".preview-wrapper").removeClass("hidden")
+            $(".navbar-text").toggleClass("removed")
+          })
+        }
+      }, false)
+    })
+  }
+}
+
+$('#canvas').on('click', function (e) {
+  var fileExtension = fileName.slice(fileName.lastIndexOf('.'))
+  if (fileExtension == '.jpg' || fileExtension == '.jpeg' || fileExtension == '.png') {
+    var actualName = fileName.substring(0, fileName.length - fileExtension.length)
+  }
+  download(canvas, actualName + '-madifyed.jpg')
+})
+
+function download (canvas, filename) {
+  var e
+  var lnk = document.createElement('a')
+
+  lnk.download = filename
+  lnk.href = canvas.toDataURL('image/jpeg', 0.8)
+
+  if (document.createEvent) {
+    e = document.createEvent('MouseEvents')
+    e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
+    lnk.dispatchEvent(e)
+  }
+  else if (lnk.fireEvent) {
+    lnk.fireEvent('onclick')
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "madify",
+  "version": "1.0.0",
+  "description": "Apply the \"Madi-fy\" (as in James Madison University) filter to the user's image.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://[email protected]:10022/lablablab/madify.git"
+  },
+  "author": "Michael Stewart",
+  "license": "ISC",
+  "dependencies": {
+    "@jmu-cs/customscale-camanjs-filter": "^1.0.0",
+    "bootstrap": "^4.1.3",
+    "caman": "^4.1.2",
+    "dropzone": "^5.5.1",
+    "jquery": "^3.3.1"
+  }
+}
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,52 @@
+.hidden {
+    visibility: hidden;
+}
+
+.navbar.bg-primary {
+    /* background: linear-gradient(to bottom right, #cbb677,#450084) !important; */
+    background: linear-gradient(to bottom right, #450084, 75%,#cbb677) !important;
+}
+
+.navbar-dark .navbar-brand {
+    /* color: #cbb677; */
+    font-family: Arvo;
+}
+
+.dropzone {
+    border: 2px dashed #450084;
+    border-radius: 5px;
+    background: white;
+    height: calc(100vh - 56px);
+    margin-top: 56px;
+}
+
+.preview-wrapper {
+    display: block;
+    position: relative;
+}
+.dropzone .dz-preview {
+    display: none;
+}
+
+.navbar-collapse {
+    margin-right: 84px;
+}
+
+.navbar-dark .navbar-text {
+    color: white;
+}
+
+#canvas {
+    /* display: block; */
+    position: absolute;
+}
+
+.download-message{
+    position: absolute;
+    background-color: black;
+    color: white;
+}
+
+.removed {
+    display:none;
+}