Добавлен resizeImage

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>
 

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, {

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); });
 }