Добавил настройки для изображений, добаил автоматический ресайз
This commit is contained in:
@@ -194,6 +194,26 @@
|
||||
<el-input-number v-model="addEmptyParagraphs" :min="0" :max="2"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Изображения">
|
||||
<el-col :span="11">
|
||||
<el-checkbox v-model="showImages">Показывать</el-checkbox>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="1">
|
||||
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-tooltip :open-delay="500" effect="light" placement="top">
|
||||
<template slot="content">
|
||||
Определяет высоту изображения количеством строк.<br>
|
||||
В случае превышения высоты, изображение будет<br>
|
||||
уменьшено с сохранением пропорций так, чтобы<br>
|
||||
помещаться в указанное количество строк.
|
||||
</template>
|
||||
<el-input-number v-model="imageHeightLines" :min="1" :max="100"></el-input-number>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
|
||||
|
||||
@@ -98,10 +98,20 @@ export default class DrawHelper {
|
||||
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"/>`;
|
||||
|
||||
let imgH = img.lineCount*this.lineHeight;
|
||||
imgH = (imgH <= bin.h ? imgH : bin.h);
|
||||
let imgW = bin.w;
|
||||
|
||||
let resize = '';
|
||||
if (bin.h > imgH) {
|
||||
resize = `height: ${imgH}px`;
|
||||
imgW = imgW*imgH/bin.h;
|
||||
}
|
||||
|
||||
const left = (this.w - imgW)/2;
|
||||
const top = ((img.lineCount*this.lineHeight - imgH)/2) + (i - img.imageLine)*this.lineHeight;
|
||||
lineText += `<img src="data:${bin.type};base64,${bin.data}" style="position: absolute; left: ${left}px; top: ${top}px; ${resize}"/>`;
|
||||
} else {
|
||||
//
|
||||
}
|
||||
|
||||
@@ -217,8 +217,8 @@ class TextPage extends Vue {
|
||||
this.parsed.maxWordLength = t.length - 1;
|
||||
this.parsed.measureText = this.drawHelper.measureText.bind(this.drawHelper);
|
||||
this.parsed.lineHeight = this.lineHeight;
|
||||
this.parsed.showImages = true;
|
||||
this.parsed.imageHeightLines = 100;
|
||||
this.parsed.showImages = this.showImages;
|
||||
this.parsed.imageHeightLines = this.imageHeightLines;
|
||||
}
|
||||
|
||||
//statusBar
|
||||
|
||||
@@ -532,7 +532,7 @@ export default class BookParser {
|
||||
last: Boolean,
|
||||
parts: array of {
|
||||
style: {bold: Boolean, italic: Boolean, center: Boolean},
|
||||
image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, resize: Boolean, paraIndex: Number},
|
||||
image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
|
||||
text: String,
|
||||
}
|
||||
}*/
|
||||
@@ -553,6 +553,7 @@ export default class BookParser {
|
||||
|
||||
//изображения
|
||||
if (part.image.id && !part.image.inline) {
|
||||
parsed.visible = this.showImages;
|
||||
const bin = this.binary[part.image.id];
|
||||
|
||||
let lineCount = this.imageHeightLines;
|
||||
@@ -569,7 +570,6 @@ export default class BookParser {
|
||||
id: part.image.id,
|
||||
imageLine: i,
|
||||
lineCount,
|
||||
resize: (c > lineCount),
|
||||
paraIndex
|
||||
}});
|
||||
lines.push(line);
|
||||
@@ -580,7 +580,7 @@ export default class BookParser {
|
||||
line.first = (j == 0);
|
||||
line.last = true;
|
||||
line.parts.push({style, text: ' ',
|
||||
image: {local: part.image.local, inline: false, id: part.image.id, imageLine: i, lineCount, resize: (c > lineCount), paraIndex}});
|
||||
image: {local: part.image.local, inline: false, id: part.image.id, imageLine: i, lineCount, paraIndex}});
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
@@ -163,6 +163,8 @@ const settingDefaults = {
|
||||
cutEmptyParagraphs: false,
|
||||
addEmptyParagraphs: 0,
|
||||
blinkCachedLoad: true,
|
||||
showImages: true,
|
||||
imageHeightLines: 100,
|
||||
|
||||
fontShifts: {},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user