Работа над изображениями

client/components/Reader/TextPage/DrawHelper.js

@@ -26,10 +26,11 @@ export default class DrawHelper {
         const font = this.fontByStyle({});
         const justify = (this.textAlignJustify ? 'text-align: justify; text-align-last: justify;' : '');
 
-        let out = `<div class="layout" style="width: ${this.w}px; height: ${this.h}px;` + 
+        let out = `<div style="width: ${this.w}px; height: ${this.h}px;` + 
             ` position: absolute; top: ${this.fontSize*this.textShift}px; color: ${this.textColor}; font: ${font}; ${justify}` +
             ` line-height: ${this.lineHeight}px;">`;
 
+        let imageDrawn = new Set();
         let len = lines.length;
         const lineCount = this.pageLineCount + (isScrolling ? 1 : 0);
         len = (len > lineCount ? lineCount : len);
@@ -43,7 +44,8 @@ export default class DrawHelper {
                 first: Boolean,
                 last: Boolean,
                 parts: array of {
-                    style: {bold: Boolean, italic: Boolean, center: Boolean}
+                    style: {bold: Boolean, italic: Boolean, center: Boolean},
+                    image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, resize: Boolean, paraIndex: Number},
                     text: String,
                 }
             }*/
@@ -89,10 +91,26 @@ export default class DrawHelper {
                 lineText += `${tOpen}${text}${tClose}`;
 
                 center = center || part.style.center;
+
+                //избражения
+                //image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, resize: Boolean, paraIndex: Number},
+                const img = part.image;
+                if (img && img.id && !img.inline && !imageDrawn.has(img.paraIndex)) {
+                    if (img.local) {
+                        const bin = this.parsed.binary[img.id];
+                        const left = (this.w - bin.w)/2;
+                        const s = (img.lineCount*this.lineHeight - bin.h)/2;
+                        const top = s + (i - img.imageLine)*this.lineHeight;
+                        lineText += `<img src="data:${bin.type};base64,${bin.data}" style="position: absolute; left: ${left}px; top: ${top}px"/>`;
+                    } else {
+                        //
+                    }
+                    imageDrawn.add(img.paraIndex);
+                }
             }
 
             const centerStyle = (center ? `text-align: center; text-align-last: center; width: ${this.w}px` : '')
-            if (line.first)
+            if (line.first && !center)
                 lineText = `<span style="display: inline-block; margin-left: ${this.p}px"></span>${lineText}`;
             if (line.last || center)
                 lineText = `<span style="display: inline-block; ${centerStyle}">${lineText}</span>`;

client/components/Reader/share/BookParser.js

@@ -349,8 +349,7 @@ export default class BookParser {
     splitToStyle(s) {
         let result = [];/*array of {
             style: {bold: Boolean, italic: Boolean, center: Boolean},
-            image: Boolean,
+            image: {local: Boolean, inline: Boolean, id: String},
-            imageId: String,
             text: String,
         }*/
         let style = {};
@@ -379,8 +378,12 @@ export default class BookParser {
                         let attrs = sax.getAttrsSync(tail);
                         let id = attrs.href.value;
                         if (id) {
+                            let local = false;
+                            if (id[0] == '#') {
                                 id = id.substr(1);
-                            image = {inline: false, id};
+                                local = true;
+                            }
+                            image = {local, inline: false, id};
                         }
                         break;
                     }
@@ -529,7 +532,7 @@ export default class BookParser {
             last: Boolean,
             parts: array of {
                 style: {bold: Boolean, italic: Boolean, center: Boolean},
-                image: {inline: Boolean, id: String, imageLine: Number, lineCount: Number, resize: Boolean},
+                image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, resize: Boolean, paraIndex: Number},
                 text: String,
             }
         }*/
@@ -560,7 +563,15 @@ export default class BookParser {
                     line.end = para.offset + ofs;
                     line.first = (j == 0);
                     line.last = false;
-                    line.parts.push({style, text: '!', image: {inline: false, id: part.image.id, imageLine: i, lineCount, resize: (c > lineCount)}});
+                    line.parts.push({style, text: ' ', image: {
+                        local: part.image.local,
+                        inline: false, 
+                        id: part.image.id,
+                        imageLine: i,
+                        lineCount,
+                        resize: (c > lineCount),
+                        paraIndex
+                    }});
                     lines.push(line);
                     line = {begin: line.end + 1, parts: []};
                     ofs++;
@@ -568,7 +579,8 @@ export default class BookParser {
                 }
                 line.first = (j == 0);
                 line.last = true;
-                line.parts.push({style, text: '!', image: {inline: false, id: part.image.id, imageLine: i, lineCount, resize: (c > lineCount)}});
+                line.parts.push({style, text: ' ',
+                    image: {local: part.image.local, inline: false, id: part.image.id, imageLine: i, lineCount, resize: (c > lineCount), paraIndex}});
                 continue;
             }