提高PDF预览的清晰度

核心代码

let devicePixelRatio = window.devicePixelRatio || 1;
console.log(window.devicePixelRatio)
 let backingStoreRatio =
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio ||
          1
that.pixelRatio = devicePixelRatio / backingStoreRatio;
console.log('devicePixelRatio:',devicePixelRatio,',backingStoreRatio:',backingStoreRatio,',pixelRatio:',that.pixelRatio);
if (that.pixelRatio !== 1) that.transform = [that.pixelRatio, 0, 0, that.pixelRatio, 0, 0]

其一：改变设备像素比

MDN - window.devicePixelRatio
window.devicePixelRatio：获取设备像素比

其二：改变transform

MDN - transform
transform是控制缩放的，在canvas渲染时，先画一个2倍容器大小的画布，然后再使用css来缩小画布的尺寸为容器的尺寸。
transform属性，有5种属性值，可以旋转，缩放，倾斜或平移给定元素；

其中，CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。MDN - matrix

matrix()函数中6个值表示以下函数:
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

完整代码

<template>
  <div>
    <div id="the-canvas" style="width:650px;"></div>
  </div>
</template>

<script>
import PDFJS from "pdfjs-dist";
import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
PDFJS.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js";
let _ = require("lodash");
// const FILE_PATH = "/dp/api/v1/scene/bondReview/getFileByPath";


export default {
  data(){
    return{
      scale: 1,
      pixelRatio:1,
      transform: null,
    }
  },
  mounted() {
    const parentBox = document.querySelector(`#the-canvas`);
    this.boxWidth = parentBox.offsetWidth - 20;
    this.getPDF();
    console.log(this.pdfDoc)
  },
  methods:{
    //获取最外面的父容器
    getParentBox(){
      return document.getElementById('the-canvas');
    },
    //根据容器宽度和PDF宽度确定缩放比例
    async getScaleBox(pdfPage){
      console.log(this.boxWidth)
      await pdfPage.then(res => {
        const [x1, , x2] = res._pageInfo.view;
        const pageWidth = x2 - x1;
        this.scale = this.boxWidth / pageWidth;
        // this.scale = 3;
      })
      const scale = this.scale;
      console.log(this.scale)
      return scale
    },
    //通过URL请求PDF
    async getPDF(url) {
      const myHeader = {
        method: "GET",
        Accept: "application/json",
        "if-None-Match": 1,
        pragma: "no-cache",
        "cache-control": " no-cache"
      };
      console.log(url)
      const src = {
        url: '/flie/data1.pdf',
        httpHeaders: myHeader,
        withCredentials: true,
        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/",
        cMapPacked: true,
      }
      var loadingTask = PDFJS.getDocument(src);
      loadingTask.promise.then(pdf => {
        const pdfDoc = pdf;
        this.pdfDoc = pdfDoc;
        const pdfPage = pdfDoc.getPage(1);
        //确定缩放比例
        const scalePromise = this.getScaleBox(pdfPage);
        this.scale = scalePromise.then(res => {
            console.log(res);
            return res
        })
        this.renderAll();
      }).catch(err => err);
    },
    //渲染某一页PDF
    render(pageNum){
      const that = this;
      console.log(pageNum)
      this.pdfDoc.getPage(pageNum).then(function(page) {
        // 创建新的canvas
        const canvas = document.createElement(`canvas`);
        const context = canvas.getContext("2d");
        let devicePixelRatio = window.devicePixelRatio || 1;
        console.log(window.devicePixelRatio)
        let backingStoreRatio =
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio ||
          1
        that.pixelRatio = devicePixelRatio / backingStoreRatio;
        // console.log('devicePixelRatio:',devicePixelRatio,',backingStoreRatio:',backingStoreRatio,',pixelRatio:',that.pixelRatio);
        if (that.pixelRatio !== 1) that.transform = [that.pixelRatio, 0, 0, that.pixelRatio, 0, 0]
        var viewport = page.getViewport({ scale: that.scale, });
        canvas.width = viewport.width * that.pixelRatio;
        canvas.height = viewport.height * that.pixelRatio;
        canvas.style.width = viewport.width  + 'px';
        canvas.style.height = viewport.height + 'px';
        var renderContext = {
            canvasContext: context,
            viewport: viewport,
            transform: that.transform,
        };
        console.log(canvas)
        page.render(renderContext);
        //创建渲染的dom
        const pageDom = document.createElement('div');
        pageDom.className = `page${pageNum}`;
        pageDom.append(canvas);
        let parentBox = that.getParentBox();
        parentBox.append(pageDom);
      });
      
    },
    //渲染所有PDF
    renderAll(){
      const allPages = this.pdfDoc.numPages;
      console.log(this.pdfDoc.numPages)
      console.log(allPages);
      //i要从1开始，没有第0页，从0开始会报错
      for(let i = 1;i <= allPages;i++){
          this.render(i);
      }
    },
  },
}
</script>

<style>

</style>

标签：canvas,pixelRatio,const,log,预览,devicePixelRatio,console,清晰度,PDF
来源： https://blog.csdn.net/qq_45021462/article/details/120182433