提高PDF预览的清晰度

2021-09-08 17:04:56 阅读：316 来源： 互联网

标签：canvas pixelRatio const log 预览 devicePixelRatio console 清晰度 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

提高PDF预览的清晰度