New: PDFs are rendered to a blob image instead of a canvas

Author: ollm

CHANGELOG.md

@@ -9,7 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ##### 🚀 New Features
 
 - Allow disabling `Do not enlarge more than its original size` in Webtoon mode [`7519ac5`](https://github.com/ollm/OpenComic/commit/7519ac5cd0ac4407a4d0edec7e7a3e2a76832f84)
-- Improved rotation and support for rotating in PDF
+- Improved rotation and support for rotating in PDF [`cb90771`](https://github.com/ollm/OpenComic/commit/cb907714ca7d713bcbf3471564e48a3e67c8ca40)
+- PDFs are rendered to a blob image instead of a canvas
 
 ##### 🐛 Bug Fixes
 

scripts/file-manager.js

@@ -1441,13 +1441,13 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 	}
 
-	this.renderCanvas = async function(file, canvas, config = {}) {
+	this.renderBlob = async function(file, config = {}) {
 
 		this.updateConfig(config);
 		this.getFeatures();
 
 		if(this.features.pdf)
-			return this.renderCanvasPdf(file, canvas);
+			return this.renderBlobPdf(file);
 
 	}
 
@@ -2200,39 +2200,42 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 	}
 
-	this.renderCanvasPdf = async function(file, canvas) {
+	this.renderBlobPdf = async function(file) {
 
 		let pdf = await this.openPdf();
 		let pages = pdf.numPages;
 
 		let status = this.getFileStatus(file);
 
-		if((status && (status.widthRendered !== this.config.width || status.canvasRendered !== canvas)) || this.config.force)
+		if((status && (status.widthRendered !== this.config.width)) || this.config.force)
 		{
-			console.log('renderCanvasPdf');
+			console.log('renderBlobPdf');
 
 			// Render page
 			let page = await pdf.getPage(status.page);
 
 			let scale = this.config.width / status.size.width;
 			let viewport = page.getViewport({scale: scale});
 
-			canvas.width = viewport.width = Math.round(viewport.width);
-			canvas.height = viewport.height = Math.round(viewport.height);
+			let canvas = document.createElement('canvas');
+			canvas.width = viewport.width = this.config.width;
+			canvas.height = viewport.height = this.config.height;
 			let context = canvas.getContext('2d');
 
 			await page.render({canvasContext: context, viewport: viewport}).promise;
 
-			this.setFileStatus(file, {rendered: true, widthRendered: this.config.width, canvasRendered: canvas});
+			const blob = await new Promise(function(resolve){
+				canvas.toBlob(resolve, 'image/png');
+			});
+
+			this.setFileStatus(file, {rendered: true, widthRendered: this.config.width});
 
-			return {width: viewport.width, height: viewport.height};
+			return {blob: URL.createObjectURL(blob), width: viewport.width, height: viewport.height};
 		}
 
 		return false;
 	}
 
-
-
 	// ePub
 	this.epub = false;
 

scripts/queue.js

@@ -1,4 +1,4 @@
-var processingTheQueue = {}, queued = {}, onEnd = {}, queueIsStop = {};
+var processingTheQueue = {}, queued = {}, queueIndex = {}, onEnd = {}, queueIsStop = {};
 
 async function processTheQueue(key)
 {
@@ -91,6 +91,7 @@ async function addToQueue(key, callback)
 function cleanQueue(key = false)
 {
 	queued[key] = [];
+	queueIndex[key] = 1 + (queueIndex[key] ?? 0);
 }
 
 function checkEnd(key)
@@ -127,6 +128,7 @@ module.exports = {
 	end: end,
 	stop: stop,
 	resume: resume,
+	index: function(key){return queueIndex[key] ?? 0},
 	get: function(key){return queued[key]},
 	set: function(key, value){queued[key] = value},
 };

scripts/reading.js

@@ -2447,35 +2447,33 @@ function resetZoom(animation = true, index = false, apply = true, center = true,
 // Fix blur on zoom cause by tranform scale, still happening in vertical reader in some conditions
 function fixBlurOnZoom(scale = 1, index = false)
 {
-	let _scale = 1 / scale;
+	const _scale = 1 / scale;
 
-	let contentRight = template._contentRight();
-	let images = index !== false ? contentRight.querySelectorAll('.image-position'+index+' oc-img img, .image-position'+index+' oc-img canvas') : contentRight.querySelectorAll('.r-img oc-img img, .r-img oc-img canvas');
+	const contentRight = template._contentRight();
+	const images = index !== false ? contentRight.querySelectorAll('.image-position'+index+' oc-img img') : contentRight.querySelectorAll('.r-img oc-img img');
 
 	for(let i = 0, len = images.length; i < len; i++)
 	{
-		let img = images[i];
-		let image = imagesData[+img.dataset.index] || [];
+		const img = images[i];
+		const image = imagesData[+img.dataset.index] || [];
 
-		let ocImg = img.parentElement;
+		const ocImg = img.parentElement;
 
-		if(img.tagName != 'CANVAS')
-		{
-			let width = (image?.rotated == 1 || image?.rotated == 2) ? +ocImg.dataset.height : +ocImg.dataset.width;
-			let height = (image?.rotated == 1 || image?.rotated == 2) ? +ocImg.dataset.width : +ocImg.dataset.height;
+		let width, height;
 
-			let _width = Math.round(width * scale * window.devicePixelRatio);
-			let _height = Math.round(height * scale * window.devicePixelRatio);
+		width = +ocImg.dataset.width;
+		height = +ocImg.dataset.height;
 
-			img.style.width = (_width / window.devicePixelRatio)+'px';
-			img.style.height = (_height / window.devicePixelRatio)+'px';
-		}
+		width = Math.round(width * scale * window.devicePixelRatio);
+		height = Math.round(height * scale * window.devicePixelRatio);
+
+		width = (image?.rotated == 1 || image?.rotated == 2) ? height : width;
+		height = (image?.rotated == 1 || image?.rotated == 2) ? width : height;
 
-		console.log('scale('+_scale+') '+rotateImage(image?.rotated, 0.001, 0.001));
+		img.style.width = (width / window.devicePixelRatio)+'px';
+		img.style.height = (height / window.devicePixelRatio)+'px';
 
-		if(img.tagName == 'CANVAS')
-			img.style.transform = 'scale('+(_scale / window.devicePixelRatio)+') '+rotateImage(image?.rotated, 0.001, 0.001);
-		else if(img.classList.contains('blobRender') || img.classList.contains('zoomOriginalSize') || img.classList.contains('originalSize'))
+		if(img.classList.contains('blobRender') || img.classList.contains('zoomOriginalSize') || img.classList.contains('originalSize'))
 			img.style.transform = 'scale('+_scale+') '+rotateImage(image?.rotated, 0.001, 0.001);
 		else
 			img.style.transform = 'scale('+_scale+') '+rotateImage(image?.rotated);
@@ -2490,21 +2488,18 @@ function fixBlurOnZoom(scale = 1, index = false)
 
 			for(let i = 0, len = images.length; i < len; i++)
 			{
-				let img = images[i];
-				let image = imagesData[+img.dataset.index] || [];
+				const img = images[i];
+				const image = imagesData[+img.dataset.index] || [];
 
-				if(img.tagName != 'CANVAS' && !img.classList.contains('blobRender') && !img.classList.contains('zoomOriginalSize') && !img.classList.contains('originalSize'))
-				{
-					let rect = img.getBoundingClientRect();
+				const rect = img.getBoundingClientRect();
 
-					let left = -(rect.left - app.floorDPR(rect.left));
-					let top = -(rect.top - app.floorDPR(rect.top));
+				let left = -(rect.left - app.floorDPR(rect.left));
+				let top = -(rect.top - app.floorDPR(rect.top));
 
-					if(left < -0.5) left++;
-					if(top < -0.5) top++;
+				if(left < -0.5) left++;
+				if(top < -0.5) top++;
 
-					img.style.transform = 'scale('+_scale+') '+rotateImage(image?.rotated, left, top);
-				}
+				img.style.transform = 'scale('+_scale+') '+rotateImage(image?.rotated, left, top);
 			}
 
 		});

scripts/reading/page-transitions.js

@@ -401,14 +401,6 @@ function createPageTurnElement(original, toInsert, zIndex)
 
 	toInsert.insertAdjacentElement('beforeend', div);
 
-	const oCanvases = original.querySelectorAll('canvas');
-	const cCanvases = cloned.querySelectorAll('canvas');
-
-	for(let i = 0, len = cCanvases.length; i < len; i++)
-	{
-		cCanvases[i].getContext('2d').drawImage(oCanvases[i], 0, 0);
-	}
-
 	return div;
 }