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

High Res images breaking due to Canvas limits (#587)

Browse Source 
* Fixed an issue where on Safari with high resolution images, the canvas wouldn't be able to render them. Now we detect high res that might break canvas on different browsers and scale them.

* Removed some code no longer needed
This commit is contained in:
Joseph Milazzo 2021-09-21 08:22:07 -07:00 committed by GitHub
parent de415ee759
commit 857c2a2bd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -774,11 +774,35 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
/**
* There are some hard limits on the size of canvas' that we must cap at. https://github.com/jhildenbiddle/canvas-size#test-results
* For Safari, it's 16,777,216, so we cap at 4096x4096 when this happens. The drawImage in render will perform bi-cubic scaling for us.
* @returns If we should continue to the render loop
*/
setCanvasSize() {
if (this.ctx && this.canvas) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
const canvasLimit = isSafari ? 16_777_216 : 124_992_400;
const needsScaling = this.canvasImage.width * this.canvasImage.height > canvasLimit;
if (needsScaling) {
this.canvas.nativeElement.width = isSafari ? 4_096 : 16_384;
this.canvas.nativeElement.height = isSafari ? 4_096 : 16_384;
} else {
this.canvas.nativeElement.width = this.canvasImage.width;
this.canvas.nativeElement.height = this.canvasImage.height;
}
}
return true;
}
renderPage() {
if (this.ctx && this.canvas) {
this.canvasImage.onload = null;
this.canvas.nativeElement.width = this.canvasImage.width;
this.canvas.nativeElement.height = this.canvasImage.height;
if (!this.setCanvasSize()) return;
const needsSplitting = this.canvasImage.width > this.canvasImage.height;
this.updateSplitPage();