Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Hacked in code so that we render an image instead of canvas for fit to screen to try out. (#1131)

Browse Source
This commit is contained in:
Joseph Milazzo 2022-03-02 06:45:15 -06:00 committed by GitHub
parent d387d66ba9
commit 0403b2f550
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
UI/Web/src/app/manga-reader/manga-reader.component.html
View File

@ -24,9 +24,13 @@
</ng-container> </ng-container>
<div (click)="toggleMenu()" class="reading-area"> <div (click)="toggleMenu()" class="reading-area">
<canvas #content class="{{getFittingOptionClass()}} {{readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}"
<canvas style="display: none;" #content class="{{getFittingOptionClass()}} {{readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}"
ondragstart="return false;" onselectstart="return false;"> ondragstart="return false;" onselectstart="return false;">
</canvas> </canvas>
<div *ngIf="isCoverImage && shouldRenderAsFitSplit()" class="{{getFittingOptionClass()}} {{readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}">
<img [src]="canvasImage.src" style="width: 100%">
</div>
<div class="webtoon-images" *ngIf="readerMode === READER_MODE.WEBTOON && !isLoading && !inSetup"> <div class="webtoon-images" *ngIf="readerMode === READER_MODE.WEBTOON && !isLoading && !inSetup">
<app-infinite-scroller [pageNum]="pageNum" <app-infinite-scroller [pageNum]="pageNum"
[bufferPages]="5" [bufferPages]="5"

29
UI/Web/src/app/manga-reader/manga-reader.component.ts
View File

@ -12,7 +12,7 @@ import { ScalingOption } from '../_models/preferences/scaling-option';
import { PageSplitOption } from '../_models/preferences/page-split-option'; import { PageSplitOption } from '../_models/preferences/page-split-option';
import { BehaviorSubject, forkJoin, ReplaySubject, Subject } from 'rxjs'; import { BehaviorSubject, forkJoin, ReplaySubject, Subject } from 'rxjs';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { KEY_CODES, UtilityService, Breakpoint } from '../shared/_services/utility.service'; import { KEY_CODES, UtilityService } from '../shared/_services/utility.service';
import { CircularArray } from '../shared/data-structures/circular-array'; import { CircularArray } from '../shared/data-structures/circular-array';
import { MemberService } from '../_services/member.service'; import { MemberService } from '../_services/member.service';
import { Stack } from '../shared/data-structures/stack'; import { Stack } from '../shared/data-structures/stack';
@ -110,7 +110,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('reader') reader!: ElementRef; @ViewChild('reader') reader!: ElementRef;
@ViewChild('content') canvas: ElementRef | undefined; @ViewChild('content') canvas: ElementRef | undefined;
private ctx!: CanvasRenderingContext2D; private ctx!: CanvasRenderingContext2D;
private canvasImage = new Image(); canvasImage = new Image(); // private
/** /**
* A circular array of size PREFETCH_PAGES + 2. Maintains prefetched Images around the current page to load from to avoid loading animation. * A circular array of size PREFETCH_PAGES + 2. Maintains prefetched Images around the current page to load from to avoid loading animation.
@ -920,13 +920,26 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
} }
// Optimization: When the screen is larger than newWidth, allow no split rendering to occur for a better fit // Optimization: When the screen is larger than newWidth, allow no split rendering to occur for a better fit
if (windowWidth > newWidth) { // if (windowWidth > newWidth) {
// this.setCanvasSize();
// this.ctx.drawImage(this.canvasImage, 0, 0);
// } else {
// this.setCanvasSize();
// //this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
// this.ctx.drawImage(this.canvasImage, 0, 0, newWidth, newHeight);
// }
this.setCanvasSize(); this.setCanvasSize();
this.ctx.drawImage(this.canvasImage, 0, 0); // var offScreenCanvas = document.createElement('canvas')
} else { // offScreenCanvas.width = newWidth;
this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); // offScreenCanvas.height = newHeight;
this.ctx.drawImage(this.canvasImage, 0, 0, newWidth, newHeight); // const resizedImage = new Image();
} // pica.resize(this.canvasImage, offScreenCanvas);
//this.document.querySelector('.reading-area')?.appendChild(this.canvasImage);
} }
// Reset scroll on non HEIGHT Fits // Reset scroll on non HEIGHT Fits