Retina Display support about vue-pdf HOT 7 CLOSED

why close this issue ?This problem occurred in 4.0.8

from vue-pdf.

@rayfoss please give me some feedback about [email protected]

from vue-pdf.

Hello，thanks for your vue-pdf library.

My phone`s resolution ratio is 1920*1080 and my computer is macbook pro. I test my code at them.

it seems that PDF can`t display when you add code as follows：

var devicePixelRatio = window.devicePixelRatio || 1
var pageWidth = viewport.width * devicePixelRatio
var pageHeight = viewport.height * devicePixelRatio

emitEvent('page-size', pageWidth, pageHeight)
canvasElt.width = pageWidth
canvasElt.height = pageHeight

when I use code as follows PDF can display but blurry：

emitEvent('page-size', viewport.width, viewport.height)
canvasElt.width = viewport.width
canvasElt.height = viewport.height

When i use mozilla/pdf.js, the PDF is clear， not as blurry as vue-pdf is.
So maybe your update：3.0.2 had some bugs, please fix it.

Regards

Dcean

from vue-pdf.

I do not have access to a Retina Display to make tests

from vue-pdf.

My related knowledge is finite，i can`t deal with it myself.

Maybe you can try set up window.devicePixelRatio = 2 in your code, then make tests?
Or we need help from others......

from vue-pdf.

doc: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#JavaScript

from vue-pdf.

@dcean @FranckFreiburger this is an issue relating to differences in vueport sizing vs canvas sizing. You can get the problems to appear even at 125% zoom on desktop. Sidenote, 1.2 worked a lot better with my css hack/page flip throttling.

Problem #1 Page 1 doesn't load (Rendering cancelled exception):
pages don't load reliably, particularly page 1. If page 2 manages to load, it's usually smooth sailing from there.

How to reproduce:
It happens 100% of the time on the android emulator with a nexus 5 Api 26. Setting page zoom on chrome to 500% on a mac makes it happen reliably for me.

RenderingCancelledException {message: "Rendering cancelled, page 1", type: "canvas"}
message:
"Rendering cancelled, page 1"
type:
"canvas"
__proto__:
Error at RenderingCancelledException (webpack-internal:///209:1907:43) at Object.eval (webpack-internal:///209:1911:2) at __w_pdfjs_require__ (webpack-internal:///209:52:30) at Object.defineProperty.value (webpack-internal:///209:12574:18) at __w_pdfjs_require__ (webpack-internal:///209:52:30) at Object._typeof (webpack-internal:///209:7422:26) at __w_pdfjs_require__ (webpack-internal:///209:52:30) at Object.defineProperty.value (webpack-internal:///209:95:18) at eval (webpack-internal:///209:98:10) at webpackUniversalModuleDefinition (webpack-internal:///209:25:20)
name:
"RenderingCancelledException"
stack:
"RenderingCancelledException↵    at RenderingCancelledException (webpack-internal:///209:1907:43)↵    at Object.eval (webpack-internal:///209:1911:2)↵    at __w_pdfjs_require__ (webpack-internal:///209:52:30)↵ 

Problem #2 subsequent pages don't load (Cannot use the same canvas during multiple render):
Looks like a race condition, a big pdf seems to exacerbate it.

How to reproduce:
I managed to make it show up more reliably on desktop by flipping pages as early as possible. It happens 100% of the time on the android emulator with a nexus 5 Api 26. This reminds me of the problem with flipping pages too quickly.

Error: Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.
    at InternalRenderTask_initializeGraphics [as initializeGraphics] (pdf.js?013a:4586)
    at eval (pdf.js?013a:3592)
    at <anonymous>

Problem #3:
Pages shrink when viewport is zoomed or using HiDPI/Retina

How to reproduce: zoom in on the page and reload in desktop. Happens 100% on N5 emulator, which has a pixel ratio of 3, some devices have 4, some have half ratios such as 1.5.

This is with default styles (width 100%), it normally fills the width if not zoomed in.

from vue-pdf.