From c751372a54540a704e035704e9ef7a63b8dfdfec Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 15 Jul 2022 01:38:25 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20resizeImage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RecentBooksPage/RecentBooksPage.vue       |  4 +-
 client/components/Reader/share/bookManager.js | 12 ++++-
 client/share/utils.js                         | 46 ++++++++++++++++++-
 3 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/client/components/Reader/RecentBooksPage/RecentBooksPage.vue b/client/components/Reader/RecentBooksPage/RecentBooksPage.vue
index d70ab44c..8fbaf9fc 100644
--- a/client/components/Reader/RecentBooksPage/RecentBooksPage.vue
+++ b/client/components/Reader/RecentBooksPage/RecentBooksPage.vue
@@ -105,8 +105,8 @@
                     </div>
 
                     <div class="row-part column justify-center items-stretch" style="width: 80px">
-                        <div class="col row justify-center items-center clickable" @click="loadBook(item)">
-                            <div v-show="isLoadedCover(item.coverPageUrl)" v-html="getCoverHtml(item.coverPageUrl)" />
+                        <div class="col row justify-center items-center clickable" style="padding: 4px" @click="loadBook(item)">
+                            <div v-show="isLoadedCover(item.coverPageUrl)" style="height: 80px" v-html="getCoverHtml(item.coverPageUrl)" />
                             <q-icon v-show="!isLoadedCover(item.coverPageUrl)" name="la la-book" size="40px" style="color: #dddddd" />
                         </div>
 
diff --git a/client/components/Reader/share/bookManager.js b/client/components/Reader/share/bookManager.js
index fee42a52..193f5c4d 100644
--- a/client/components/Reader/share/bookManager.js
+++ b/client/components/Reader/share/bookManager.js
@@ -4,6 +4,7 @@ import _ from 'lodash';
 
 import BookParser from './BookParser';
 import readerApi from '../../../api/reader';
+import coversStorage from './coversStorage';
 import * as utils from '../../../share/utils';
 
 const maxDataSize = 500*1024*1024;//compressed bytes
@@ -351,7 +352,12 @@ class BookManager {
         let coverPageUrl = '';
         if (parsed.coverPageId && parsed.binary[parsed.coverPageId]) {
             const bin = parsed.binary[parsed.coverPageId];
-            const dataUrl = await utils.resizeImage(`data:${bin.type};base64,${bin.data}`);
+            let dataUrl = `data:${bin.type};base64,${bin.data}`;
+            try {
+                dataUrl = await utils.resizeImage(dataUrl, 160, 160, 0.94);
+            } catch (e) {
+                console.error(e);
+            }
 
             //отправим dataUrl на сервер в /upload
             try {
@@ -361,6 +367,10 @@ class BookManager {
             } catch (e) {
                 console.error(e);
             }
+
+            //сохраним в storage
+            if (coverPageUrl)
+                await coversStorage.setData(coverPageUrl, dataUrl);
         }
 
         const result = Object.assign({}, meta, parsedMeta, {
diff --git a/client/share/utils.js b/client/share/utils.js
index c0f20519..39196212 100644
--- a/client/share/utils.js
+++ b/client/share/utils.js
@@ -365,6 +365,48 @@ export function getBookTitle(fb2) {
     return result;
 }
 
-export async function resizeImage(dataUrl) {
-    return dataUrl;
+export function resizeImage(dataUrl, toWidth, toHeight, quality = 0.9) {
+    return new Promise ((resolve, reject) => { (async() => {
+        const img = new Image();
+
+        let resolved = false;
+        img.onload = () => {
+            try {
+                let width = img.width;
+                let height = img.height;
+
+                if (width > height) {
+                    if (width > toWidth) {
+                        height = height * (toWidth / width);
+                        width = toWidth;
+                    }
+                } else {
+                    if (height > toHeight) {
+                        width = width * (toHeight / height);
+                        height = toHeight;
+                    }
+                }
+
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(img, 0, 0, width, height);
+                const result = canvas.toDataURL('image/jpeg', quality);
+                resolved = true;
+                resolve(result);
+            } catch (e) {
+                reject(e);
+                return;
+            }
+        };
+
+        img.onerror = reject;
+
+        img.src = dataUrl;
+
+        await sleep(1000);
+        if (!resolved)
+            reject('Не удалось изменить размер');
+    })().catch(reject); });
 }
\ No newline at end of file