iPAD 上的 PDFJs 模糊 PDF
PDFJs Blurry PDF on iPAD
我正在 cordova 应用程序中处理 PDJS 视图。
一切正常,除了 pdf 有点模糊。我知道这在某种程度上是因为视网膜显示,但我如何更改此顺序如何获得正确的比例?
目前我正在尝试这个
pdfFile.getPage(data.page).then(function (page) {
canvas.width = $('#pdfContainer').width();
var viewport = page.getViewport(canvas.width / (page.getViewport(1).width));
canvas.width = viewport.width;
canvas.height = viewport.height;
var height= $('#pdfContainer').height();
if (canvas.height > height) {
canvas.height = height;
var viewport = page.getViewport(canvas.height / (page.getViewport(1).height));
canvas.width = viewport.width;
canvas.height = viewport.height;
}
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
我为此所做的首先是停用图像平滑:
canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;
canvasContext.imageSmoothingEnabled = false;
canvasContext.webkitImageSmoothingEnabled = false;
canvasContext.mozImageSmoothingEnabled = false;
canvasContext.oImageSmoothingEnabled = false;
然后用 window.devicePixelRatio
乘以我找到的 devicePixelRatio
if (window.devicePixelRatio > 1) {
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
canvas.width = canvasWidth * window.devicePixelRatio;
canvas.height = canvasHeight * window.devicePixelRatio;
canvas.style.width = canvasWidth + "px";
canvas.style.height = canvasHeight + "px";
canvasContext.scale(window.devicePixelRatio, window.devicePixelRatio);
}
这也修复了带有 Retina 显示屏的 Macbocks 的模糊效果。
我正在 cordova 应用程序中处理 PDJS 视图。
一切正常,除了 pdf 有点模糊。我知道这在某种程度上是因为视网膜显示,但我如何更改此顺序如何获得正确的比例?
目前我正在尝试这个
pdfFile.getPage(data.page).then(function (page) {
canvas.width = $('#pdfContainer').width();
var viewport = page.getViewport(canvas.width / (page.getViewport(1).width));
canvas.width = viewport.width;
canvas.height = viewport.height;
var height= $('#pdfContainer').height();
if (canvas.height > height) {
canvas.height = height;
var viewport = page.getViewport(canvas.height / (page.getViewport(1).height));
canvas.width = viewport.width;
canvas.height = viewport.height;
}
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
我为此所做的首先是停用图像平滑:
canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;
canvasContext.imageSmoothingEnabled = false;
canvasContext.webkitImageSmoothingEnabled = false;
canvasContext.mozImageSmoothingEnabled = false;
canvasContext.oImageSmoothingEnabled = false;
然后用 window.devicePixelRatio
devicePixelRatio
if (window.devicePixelRatio > 1) {
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
canvas.width = canvasWidth * window.devicePixelRatio;
canvas.height = canvasHeight * window.devicePixelRatio;
canvas.style.width = canvasWidth + "px";
canvas.style.height = canvasHeight + "px";
canvasContext.scale(window.devicePixelRatio, window.devicePixelRatio);
}
这也修复了带有 Retina 显示屏的 Macbocks 的模糊效果。