From 368f9486ad6b1583abfe2dad467793a28d8578de Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Mon, 22 Jan 2024 14:53:13 +0900 Subject: [PATCH 01/10] feat: add stub function loadHistories Please enter the commit message for your changes. Lines starting --- docs/js/app.js | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/js/app.js b/docs/js/app.js index 130d8d6..bebf084 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -1,11 +1,37 @@ "use strict"; +const MAX_HISTORY_NUM = 10 +const KEY_LOCALSTORAGE_KEY_PREFIX = 'lgtn_history_img' + const textPositionOffset = { top: [0, -100], middle: [0, 0], bottom: [0, 120], } +const loadHistoriesAsync = () => { + const imgHistories = [] + const startIndex = loadImgHistoryStartIndex() + for( let i = 0; i < MAX_HISTORY_NUM; i++){ + const num = (startIndex - i + MAX_HISTORY_NUM) % MAX_HISTORY_NUM + imgHistories.push(loadImgHistory(num)) + } + // TODO: history領域に画像をセットする処理など + console.log(imgHistories) +} + +const loadImgHistoryStartIndex = () => + localStorage.getItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}_index`) || 0 + +const loadImgHistory(num) = () => + localStorage.getItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}_${num}`) + +const savaImgHistoryStartIndex = (value) => + localStorage.setItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}_index`, value) + +const saveImgHistory(num, value) = () => + localStorage.getItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}_${num}`, value) + $(function () { var gCanvas = document.querySelector("canvas#output-image"); var gPastedImage = document.querySelector("img#pasted-image"); @@ -66,7 +92,7 @@ $(function () { const imgEl = document.querySelector("#pasted-image"); const fr = new FileReader(); fr.onload = function (e) { - const base64 = e.target.result; + const base64 = e.target.result imgEl.src = base64; }; fr.readAsDataURL(imageFile); From 67fbf8843145bc9e51ef7a2f279dfee00172b9ce Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Sun, 18 Feb 2024 21:54:38 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20history=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=E3=81=AE=E5=A4=96=E5=BD=A2=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/index.html | 209 ++++++++++++++++++++++++++++++------------------ docs/js/app.js | 36 ++++----- 2 files changed, 149 insertions(+), 96 deletions(-) diff --git a/docs/index.html b/docs/index.html index 156c7da..4515c5f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,85 +1,142 @@ + + + + LGTN Generator + + + + + + + - - - - LGTN Generator - - - - - - - - - -
-

LGTN Generator v0.5.0

-
-
- クリップボードにコピーした画像をペーストしてください。 -
-
-
-
- - + +
+

LGTN Generator v0.5.0

+
+
+ クリップボードにコピーした画像をペーストしてください。 +
-
- - +
+
+ + +
+
+ + +
-
-
-
- - +
+
+ + +
+
+ + +
+
+ + +
-
- - + + + + +
+

History

+
+
+ -
- - +
+ + diff --git a/docs/js/app.js b/docs/js/app.js index bebf084..a571a42 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -1,7 +1,7 @@ "use strict"; const MAX_HISTORY_NUM = 10 -const KEY_LOCALSTORAGE_KEY_PREFIX = 'lgtn_history_img' +const KEY_LOCALSTORAGE_KEY_PREFIX = 'lgtn_history_img_' const textPositionOffset = { top: [0, -100], @@ -9,28 +9,24 @@ const textPositionOffset = { bottom: [0, 120], } -const loadHistoriesAsync = () => { - const imgHistories = [] +const loadHistories = () => { + const imgHistoryKeys = [] const startIndex = loadImgHistoryStartIndex() - for( let i = 0; i < MAX_HISTORY_NUM; i++){ - const num = (startIndex - i + MAX_HISTORY_NUM) % MAX_HISTORY_NUM - imgHistories.push(loadImgHistory(num)) + for (let i = 0; i < localStorage.length; i++) { + const hkey = localStorage.key(i) + hkey.startsWith(KEY_LOCALSTORAGE_KEY_PREFIX) && imgHistoryKeys.push(loadImgHistory(num)) } - // TODO: history領域に画像をセットする処理など - console.log(imgHistories) + imgHistoryKeys.sort() + const container = document.querySelector('#history-container') + const template = document.querySelector('#history-template') + imgHistoryKeys.forEach(item => { + const t = template.cloneNode(true) + t.attributes.id = item + t.querySelector('img').src = localStorage.getItem(item) + container.appendChild(t) + }) } -const loadImgHistoryStartIndex = () => - localStorage.getItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}_index`) || 0 - -const loadImgHistory(num) = () => - localStorage.getItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}_${num}`) - -const savaImgHistoryStartIndex = (value) => - localStorage.setItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}_index`, value) - -const saveImgHistory(num, value) = () => - localStorage.getItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}_${num}`, value) $(function () { var gCanvas = document.querySelector("canvas#output-image"); @@ -122,7 +118,7 @@ $(function () { drawWidth = (imgWidth * drawHeight) / imgHeight; drawX = (canvas.width - drawWidth) / 2; } - + // テキスト描画位置の決定 const [drawTextX, drawTextY] = textPositionOffset[getTextPosition()] context.clearRect(0, 0, canvas.width, canvas.height); From a462abe5f233eca406bf2b0fa127990119af62ce Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Sun, 18 Feb 2024 22:02:21 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20addHistories=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: 実装ミス修正 --- docs/js/app.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/js/app.js b/docs/js/app.js index a571a42..8d6661b 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -9,14 +9,18 @@ const textPositionOffset = { bottom: [0, 120], } -const loadHistories = () => { +const getHistoryKeys = () => { const imgHistoryKeys = [] - const startIndex = loadImgHistoryStartIndex() for (let i = 0; i < localStorage.length; i++) { const hkey = localStorage.key(i) - hkey.startsWith(KEY_LOCALSTORAGE_KEY_PREFIX) && imgHistoryKeys.push(loadImgHistory(num)) + hkey.startsWith(KEY_LOCALSTORAGE_KEY_PREFIX) && imgHistoryKeys.push(hkey) } imgHistoryKeys.sort() + return imgHistoryKeys +} + +const loadHistories = () => { + const imgHistoryKeys = getHistoryKeys() const container = document.querySelector('#history-container') const template = document.querySelector('#history-template') imgHistoryKeys.forEach(item => { @@ -27,6 +31,14 @@ const loadHistories = () => { }) } +const addHistory = (dataUrl) => { + const timestamp = Date.now() + localStorage.setItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}${timestamp}`, dataUrl) + const imgHistoryKeys = getHistoryKeys() + while (imgHistoryKeys.length > MAX_HISTORY_NUM) { + localStorage.removeItem(imgHistoryKeys[0]) + } +} $(function () { var gCanvas = document.querySelector("canvas#output-image"); From df13227a2b4681b4fd158c888ae1554899e636b8 Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Sun, 18 Feb 2024 22:10:50 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=E6=8F=8F=E7=94=BB=E5=87=A6?= =?UTF-8?q?=E7=90=86=E3=81=AB=E5=B1=A5=E6=AD=B4=E8=BF=BD=E5=8A=A0=E5=AE=9F?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix fix --- docs/js/app.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/js/app.js b/docs/js/app.js index 8d6661b..086ce9d 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -23,9 +23,10 @@ const loadHistories = () => { const imgHistoryKeys = getHistoryKeys() const container = document.querySelector('#history-container') const template = document.querySelector('#history-template') + container.childNodes.forEach(node => node.remove()) imgHistoryKeys.forEach(item => { - const t = template.cloneNode(true) - t.attributes.id = item + const t = template.content.cloneNode(true) + t.id = item t.querySelector('img').src = localStorage.getItem(item) container.appendChild(t) }) @@ -52,6 +53,9 @@ $(function () { elem.textContent = message; }; + // ページ読み込み時に履歴を読み込む + loadHistories() + $('input[name="chooseOverlay"], input[name="textPosition"]').on("change", (event) => { if (gPastedImage.src) { setMessage(`${selectedOverlayImageValue()}画像を再生成しています...`); @@ -107,7 +111,7 @@ $(function () { imgEl.addEventListener("load", drawCanvas); }; - const drawCanvas = function () { + const drawCanvas = function (redraw = false) { const imgEl = gPastedImage const selectedImageId = selectedOverlayImageValue(); const lgtnEl = getOverlayImage() @@ -135,6 +139,8 @@ $(function () { const [drawTextX, drawTextY] = textPositionOffset[getTextPosition()] context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(imgEl, drawX, drawY, drawWidth, drawHeight); + // 再描画の場合は履歴に追加しない + redraw && addHistory(canvas.toDataURL()) context.drawImage(lgtnEl, drawTextX, drawTextY, canvas.width, canvas.height); copyImageToClipboard(canvas); }; @@ -158,6 +164,6 @@ $(function () { }; const redrawLgtnImage = () => { - drawCanvas(); + drawCanvas(redraw = true); }; }); From 4875752ec3c963643c791624aed73312bce93938 Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Sun, 18 Feb 2024 23:06:34 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E3=81=A8=E3=82=8A=E3=81=82?= =?UTF-8?q?=E3=81=88=E3=81=9A=E5=B1=A5=E6=AD=B4=E6=AC=84=E3=81=AB=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/js/app.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/docs/js/app.js b/docs/js/app.js index 086ce9d..2d3a2bf 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -23,7 +23,7 @@ const loadHistories = () => { const imgHistoryKeys = getHistoryKeys() const container = document.querySelector('#history-container') const template = document.querySelector('#history-template') - container.childNodes.forEach(node => node.remove()) + container.innerHTML = '' imgHistoryKeys.forEach(item => { const t = template.content.cloneNode(true) t.id = item @@ -38,6 +38,7 @@ const addHistory = (dataUrl) => { const imgHistoryKeys = getHistoryKeys() while (imgHistoryKeys.length > MAX_HISTORY_NUM) { localStorage.removeItem(imgHistoryKeys[0]) + imgHistoryKeys.shift() } } @@ -63,6 +64,11 @@ $(function () { } }); + $(".history-item").on("click", "img", (event) => { + gPastedImage.src = event.delegateTarget.querySelector('img').src + redrawLgtnImage() + }) + document.addEventListener("paste", (event) => { event.preventDefault(); @@ -95,7 +101,7 @@ $(function () { const conversionResult = await heic2any({ blob: imageFile }) const dataUrl = URL.createObjectURL(conversionResult) const imgEl = document.querySelector("#pasted-image"); - imgEl.addEventListener("load", drawCanvas); + imgEl.addEventListener("load", () => drawCanvas()); imgEl.src = dataUrl; } @@ -108,7 +114,7 @@ $(function () { imgEl.src = base64; }; fr.readAsDataURL(imageFile); - imgEl.addEventListener("load", drawCanvas); + imgEl.addEventListener("load", () => drawCanvas()); }; const drawCanvas = function (redraw = false) { @@ -140,7 +146,7 @@ $(function () { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(imgEl, drawX, drawY, drawWidth, drawHeight); // 再描画の場合は履歴に追加しない - redraw && addHistory(canvas.toDataURL()) + !redraw && addHistory(canvas.toDataURL()) context.drawImage(lgtnEl, drawTextX, drawTextY, canvas.width, canvas.height); copyImageToClipboard(canvas); }; @@ -155,6 +161,8 @@ $(function () { setMessage( `クリップボードに${selectedOverlayImageValue()}画像がコピーされました！` ); + // 履歴を再読み込み + loadHistories() }) .catch((ex) => { console.error(ex); @@ -164,6 +172,6 @@ $(function () { }; const redrawLgtnImage = () => { - drawCanvas(redraw = true); + drawCanvas(true); }; }); From e0a6786a8065788187ff7cda401f118691107d65 Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Sun, 18 Feb 2024 23:09:39 +0900 Subject: [PATCH 06/10] =?UTF-8?q?fix:=20img=E3=81=AEonload=E3=82=A4?= =?UTF-8?q?=E3=83=99=E3=83=B3=E3=83=88=E9=87=8D=E8=A4=87=E5=9B=9E=E9=81=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/js/app.js b/docs/js/app.js index 2d3a2bf..b4e11e8 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -114,7 +114,7 @@ $(function () { imgEl.src = base64; }; fr.readAsDataURL(imageFile); - imgEl.addEventListener("load", () => drawCanvas()); + imgEl.onload = () => drawCanvas(); }; const drawCanvas = function (redraw = false) { From 9c78c2198befae1d0aa99d0c78f4e92dfb4612bb Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Sun, 18 Feb 2024 23:14:40 +0900 Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=E5=B1=A5=E6=AD=B4=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E9=A0=86=E3=82=92=E9=99=8D=E9=A0=86=E3=81=AB=E3=81=97?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/js/app.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/js/app.js b/docs/js/app.js index b4e11e8..939536d 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -15,7 +15,7 @@ const getHistoryKeys = () => { const hkey = localStorage.key(i) hkey.startsWith(KEY_LOCALSTORAGE_KEY_PREFIX) && imgHistoryKeys.push(hkey) } - imgHistoryKeys.sort() + imgHistoryKeys.sort().reverse() return imgHistoryKeys } @@ -37,8 +37,7 @@ const addHistory = (dataUrl) => { localStorage.setItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}${timestamp}`, dataUrl) const imgHistoryKeys = getHistoryKeys() while (imgHistoryKeys.length > MAX_HISTORY_NUM) { - localStorage.removeItem(imgHistoryKeys[0]) - imgHistoryKeys.shift() + localStorage.removeItem(imgHistoryKeys.pop()) } } From 365ba0df713546b8f4293bdc0b6826d51b280768 Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Sun, 18 Feb 2024 23:21:07 +0900 Subject: [PATCH 08/10] =?UTF-8?q?fix=20=E5=B1=A5=E6=AD=B4=E3=81=AEMAX?= =?UTF-8?q?=E3=82=929=E3=81=AB=E6=B8=9B=E3=82=89=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/js/app.js b/docs/js/app.js index 939536d..1a7fb0b 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -1,6 +1,6 @@ "use strict"; -const MAX_HISTORY_NUM = 10 +const MAX_HISTORY_NUM = 9 const KEY_LOCALSTORAGE_KEY_PREFIX = 'lgtn_history_img_' const textPositionOffset = { From a96d178d756ec66dc312bce2dec6caa778f78d26 Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Sun, 18 Feb 2024 23:23:42 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=E3=82=B9=E3=82=BF=E3=82=A4?= =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/css/style.css | 16 +++++ docs/css/style.css.map | 2 +- docs/css/style.scss | 17 ++++- docs/index.html | 159 +++++++++++++++++++++-------------------- 4 files changed, 115 insertions(+), 79 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index 10bf6da..4b0c326 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -16,4 +16,20 @@ canvas#output-image { img[hidden] { display: none; +} + +.history-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 4px; + width: 100%; +} +.history-container .history-item { + -o-object-fit: cover; + object-fit: cover; +} +.history-container .history-item img { + width: 100%; + -o-object-fit: contain; + object-fit: contain; }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/docs/css/style.css.map b/docs/css/style.css.map index 174fd7a..81e853b 100644 --- a/docs/css/style.css.map +++ b/docs/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACA,yBAAA;EACA,qBAAA;EACA,aAAA;ACCF;ADUA;EAEE,gBAAA;EACA,iBAAA;ACTF;;ADYA;EACE,YAAA;EACA,aAAA;ACTF;;ADYA;EACE,aAAA;ACTF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACA,yBAAA;EACA,qBAAA;EACA,aAAA;ACCF;ADSA;EAEE,gBAAA;EACA,iBAAA;ACRF;;ADWA;EACE,YAAA;EACA,aAAA;ACRF;;ADWA;EACE,aAAA;ACRF;;ADWA;EACE,aAAA;EACA,qCAAA;EACA,QAAA;EACA,WAAA;ACRF;ADSE;EACE,oBAAA;KAAA,iBAAA;ACPJ;ADQI;EACE,WAAA;EACA,sBAAA;KAAA,mBAAA;ACNN","file":"style.css"} \ No newline at end of file diff --git a/docs/css/style.scss b/docs/css/style.scss index 59e12c8..c43c7e8 100644 --- a/docs/css/style.scss +++ b/docs/css/style.scss @@ -10,7 +10,6 @@ // left: 1em; // z-index: -100; } - } img#pasted-image { @@ -26,4 +25,18 @@ canvas#output-image { img[hidden] { display: none; -} \ No newline at end of file +} + +.history-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 4px; + width: 100%; + .history-item { + object-fit: cover; + img { + width: 100%; + object-fit: contain; + } + } +} diff --git a/docs/index.html b/docs/index.html index 4515c5f..5e9e670 100644 --- a/docs/index.html +++ b/docs/index.html @@ -28,85 +28,92 @@

LGTN Generator v0.5.0

-
-
- クリップボードにコピーした画像をペーストしてください。 +
+
+
+
+ クリップボードにコピーした画像をペーストしてください。 +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
-
-
-
- - -
-
- - +
+
+

History

+
+
-
-
- - -
-
- - -
-
- - -
-
- - - - -
-

History

-
-
+