Make it possible to select a background image

zzzmisa · Sep 10, 2022 · 2cf5545 · 2cf5545
1 parent 215da1d
commit 2cf5545
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 16 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 zzzmisa
+Copyright (c) 2022-present zzzmisa
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,7 @@
 .screenshot-area {
-  /* 自身の中央寄せ */
+  position: relative;
+
+  /* 自身の中央寄せ*/
   margin: 0px auto;
 
   /* コンテンツの中央寄せ */
@@ -37,3 +39,13 @@
 .screenshot-area .devicons {
   font-size: 90px;
 }
+
+.photo_area {
+  background-size: cover;
+  background-position: center center;
+  opacity: 0.3;
+}
+
+.message_area {
+  position: absolute;
+}
diff --git a/en/index.html b/en/index.html
@@ -64,13 +64,15 @@ <h2 class="subtitle">Generator of simple featured images</h2>
       <div class="column is-8">
         <div class="box" id="preview">
           <div style="overflow: auto;">
-            <div class="screenshot-area" v-bind:style="[cssForScreenshotArea,cssForPreview]">
-              <div id="append_area"><i v-bind:class="icon"></i><br><span v-text="title_en"><span></div>
+            <div id="screenshot-area" class="screenshot-area" v-bind:style="[cssForScreenshotArea,cssForPreview]">
+              <div class="photo_area" v-bind:style="[cssForPhotoArea]"></div>
+              <div class="message_area"><i v-bind:class="icon"></i><br><span v-text="title_en"><span></div>
             </div>
             <div style="position: absolute; opacity: 0.0; left:-2000px;">
-              <div id="screenshot-area" class="screenshot-area" v-bind:style="[cssForScreenshotArea]">
-                <div><i v-bind:class="icon"></i><br><span v-text="title_en"><span></div>
-              </div>
+              <div  class="screenshot-area" v-bind:style="[cssForScreenshotArea]">
+                <div class="photo_area" v-bind:style="[cssForPhotoArea]"></div>
+                <div class="message_area"><i v-bind:class="icon"></i><br><span v-text="title_en"><span></div>
+                </div>
             </div>
           </div>
         </div>
@@ -176,9 +178,30 @@ <h2 class="subtitle">Generator of simple featured images</h2>
           </div>
           <!-- ...gradientsModal -->
           <div class="field">
-            <a class="button is-primary" v-on:click="download" v-bind:class='{"is-downloading":isDownloading}'>Download</a>
+            <label class="label">Background image</label>
+            <div class="file mb-2">
+              <label class="file-label">
+                <input class="file-input" type="file" @change="selectImage" >
+                <span class="file-cta">
+                  <span class="file-icon">
+                    <i class="fas fa-upload"></i>
+                  </span>
+                  <span class="file-label">
+                    Choose a file…
+                  </span>
+                </span>
+              </label>
+            </div>
+            <div class="preview-item">
+              <div v-if="imageData">
+                <span v-text="imageName"></span>
+                <button class="delete is-medium" @click="removeImage"></button>
+              </div>
+            </div>
+          </div>
+          <div class="field mt-5">
+            <a class="button is-primary is-fullwidth" v-on:click="download" v-bind:class='{"is-downloading":isDownloading}'>Download</a>
           </div>
-          <hr>
           <details>
             <summary class="mb-4">Advanced settings</summary>
             <div class="field">

diff --git a/index.html b/index.html
@@ -64,13 +64,15 @@ <h2 class="subtitle">アイキャッチ画像が簡単に作れるジェネレ
       <div class="column is-8">
         <div class="box" id="preview">
           <div style="overflow: auto;">
-            <div class="screenshot-area" v-bind:style="[cssForScreenshotArea,cssForPreview]">
-              <div id="append_area"><i v-bind:class="icon"></i><br><span v-text="title"><span></div>
+            <div id="screenshot-area" class="screenshot-area" v-bind:style="[cssForScreenshotArea,cssForPreview]">
+              <div class="photo_area" v-bind:style="[cssForPhotoArea]"></div>
+              <div class="message_area"><i v-bind:class="icon"></i><br><span v-text="title"><span></div>
             </div>
             <div style="position: absolute; opacity: 0.0; left:-2000px;">
-              <div id="screenshot-area" class="screenshot-area" v-bind:style="[cssForScreenshotArea]">
-                <div><i v-bind:class="icon"></i><br><span v-text="title"><span></div>
-              </div>
+              <div  class="screenshot-area" v-bind:style="[cssForScreenshotArea]">
+                <div class="photo_area" v-bind:style="[cssForPhotoArea]"></div>
+                <div class="message_area"><i v-bind:class="icon"></i><br><span v-text="title"><span></div>
+                </div>
             </div>
           </div>
         </div>
@@ -176,7 +178,29 @@ <h2 class="subtitle">アイキャッチ画像が簡単に作れるジェネレ
           </div>
           <!-- ...gradientsModal -->
           <div class="field">
-            <a class="button is-primary" v-on:click="download" v-bind:class='{"is-downloading":isDownloading}'>ダウンロード</a>
+            <label class="label">背景画像</label>
+            <div class="file mb-2">
+              <label class="file-label">
+                <input class="file-input" type="file" @change="selectImage" >
+                <span class="file-cta">
+                  <span class="file-icon">
+                    <i class="fas fa-upload"></i>
+                  </span>
+                  <span class="file-label">
+                    Choose a file…
+                  </span>
+                </span>
+              </label>
+            </div>
+            <div class="preview-item">
+              <div v-if="imageData">
+                <span v-text="imageName"></span>
+                <button class="delete is-medium" @click="removeImage"></button>
+              </div>
+            </div>
+          </div>
+          <div class="field mt-5">
+            <a class="button is-primary is-fullwidth" v-on:click="download" v-bind:class='{"is-downloading":isDownloading}'>ダウンロード</a>
           </div>
           <hr>
           <details>

diff --git a/js/index.js b/js/index.js
@@ -1,7 +1,7 @@
 import icons from "./icons.js";
 import webgradients from "./webgradients.js";
 
-var app = new Vue({
+const app = new Vue({
   el: "#app",
   data: {
     iconsModalFlg: false,
@@ -15,6 +15,8 @@ var app = new Vue({
     keyword: "",
     isDownloading: false,
     zoomPercentage: 100,
+    imageData: "",
+    imageName: "",
   },
   mounted() {
     var w = document.getElementById("preview").clientWidth;
@@ -62,6 +64,13 @@ var app = new Vue({
         background: "linear-gradient(" + this.color + ")",
       };
     },
+    cssForPhotoArea: function () {
+      return {
+        width: this.width + "px",
+        height: this.height + "px",
+        backgroundImage: "url(" + this.imageData + ")",
+      };
+    },
     searchedIcons: function () {
       const options = {
         threshold: 0.3,
@@ -75,6 +84,21 @@ var app = new Vue({
     },
   },
   methods: {
+    selectImage: function (e) {
+      const files = e.target.files || e.dataTransfer.files;
+
+      const reader = new FileReader();
+      reader.onload = (ee) => {
+        this.imageData = ee.target.result;
+        e.target.value = "";
+      };
+      reader.readAsDataURL(files[0]);
+
+      this.imageName = files[0].name;
+    },
+    removeImage: function () {
+      this.imageData = "";
+    },
     download: function () {
       if (this.isDownloading) return;
       this.isDownloading = true;