Задать вопрос
@YakovSpb

Как исправить ошибку при работе с canvas, когда создаю pdf viewer?

ошибка возникает при рендере pdf файла. Я понял, что где-то тут //Get Document

Uncaught (in promise) Error: Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.

jQuery(document).ready(function () {
   
	
//PDF buttons

jQuery('.yak_pdf_link').click(function(e){

e.preventDefault();
pdflink = jQuery(this).attr('href');
pdfViewer(pdflink);
jQuery('#yak-my-modal').css('display', 'block');
});	

jQuery('#close-btn').click(function(){
jQuery('#yak-my-modal').css('display', 'none');
});

	
	
//PDF Viewer	
function pdfViewer(pdfUrl){
document.querySelector('#pdf-render').innerHTML = ''
let url = pdfUrl;

let pdfDoc = null,
	pageNum = 1,
	pageIsRendering = false,
	pageNumIsPending = null;
	
	let scale = 1,
		canvas = document.querySelector('#pdf-render'),
		ctx = canvas.getContext('2d');
	
	if(jQuery(window).width() < 660) {
	scale = 1
	}
	
		
// Render the page

const renderPage = num => {
	pageIsRendering = true;
	
	//Get page
	pdfDoc.getPage(num).then(page => {
		//Set scale
		const viewport = page.getViewport({scale});
		canvas.height = viewport.height;
		canvas.width = viewport.width;
		
		const renderCtx = {
			canvasContext: ctx,
			viewport
		}
		page.render(renderCtx).promise.then(() => {
			pageIsRendering = false;
			
			if(pageNumIsPending != null) {
			renderPage(pageNumIsPending);
			pageNumIsPending = null;
			}
		});
		
		// Output currnet page
		document.querySelector('#page-num').textContent = num;
	});
}

// Check for pages rendering
const queueRenderPage = num => {
	if(pageIsRendering) {
		pageNumIsPending = num;
	} else {
	renderPage(num);
	}
}

// Show Prev Page
const showPrevPage = () => {
if(pageNum <= 1){
return;
}
pageNum--;
queueRenderPage(pageNum);
}

// Show Next Page
const showNextPage = () => {
if(pageNum >= pdfDoc.numPages){
return;
}
pageNum++;
queueRenderPage(pageNum);
}


//Get Document
pdfjsLib.getDocument(url).promise.then(pdfDoc_ => {
	pdfDoc = pdfDoc_;
document.querySelector('#page-count').textContent = pdfDoc.numPages;

renderPage(pageNum)
});

//Button Events
document.querySelector('#prev-page').addEventListener('click', showPrevPage);
document.querySelector('#next-page').addEventListener('click', showNextPage);
}

});
  • Вопрос задан
  • 118 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы