PDF.js 转 canvas 页面不平铺的问题?-灵析社区

文文问问

使用PDF.js 转成canvas放到页面上不会平铺 目前效果是: ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241108/1519c0d8d3a11ad6f24697ae7ceceab2.png) 期望实现的效果: ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241108/630052c5d7a5d1be116935fe85f86fa4.png) 请问各位社区大佬应该怎么去解决? function renderPage(num: number) { pdfDoc.getPage(num).then((page: any) => { const canvas: any = document.getElementById(`pdfSource${num}`) const ctx = canvas.getContext('2d') const dpr = window.devicePixelRatio || 1 const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 const ratio = dpr / bsr const viewport = page.getViewport({ scale: state.pdfScale }) canvas.width = viewport.width canvas.height = viewport.height state.pdfWidth = `${viewport.width}px` ctx.setTransform(ratio, 0, 0, ratio, 0, 0) // 将 PDF 页面渲染到 canvas 上下文中 const renderContext = { canvasContext: ctx, viewport } page.render(renderContext) }) } 目前代码是这样的缩放倍率为1 * pdf.js的版本是3.2.146 * vue3+ts+vite

阅读量:21

点赞量:0

问AI
在创建时 给canvas一个固定宽,渲染后再为这个canvas设置样式width:100%即可解决。 function createTargeCanvas(num) { let targetContainer = document.getElementById('target') let canvas = document.createElement('canvas') canvas.id = 'target' + num canvas.width = 770 targetContainer?.appendChild(canvas) } function loadFileTarget(url: string) { PDF.getDocument(url).promise.then((p: any) => { pdfDoc = p const { numPages } = p state.pdfPages = numPages targetTotal.value = numPages CreateCanvasTarget(state.pdfPages) for (let i = 1; i <= state.pdfPages; i++) { let canvas = document.getElementById(`target${i}`) canvas!.style.width = '100%' } for (let i = 1; i <= state.pdfPages; i++) { renderPageTarget(i) } }) }