设置pdf宽高

This commit is contained in:
zhangxuelin 2024-07-26 14:34:35 +08:00
parent 1004567103
commit af6236a751
1 changed files with 22 additions and 7 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="canvasitem"> <div class="canvasitem">
<div class="pdfAdnFabric"> <div class="pdfAdnFabric" id="pdfAdnFabric">
<canvas id="pdf-fabric"></canvas> <canvas id="pdf-fabric"></canvas>
<canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas> <canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
</div> </div>
@ -67,19 +67,34 @@ const renderPage = async (canvasobj) => {
img.onload = () => { img.onload = () => {
// //
// pdf fabric // pdf fabric
var screenWidth = window.innerWidth/2-10;
var screenHeight = window.innerHeight;
//
var imgWidth = img.width;
var imgHeight = img.height;
//
var widthRatio = screenWidth / imgWidth;
var heightRatio = screenHeight / imgHeight;
//
var scaleRatio = Math.min(widthRatio, heightRatio);
//
var targetWidth = imgWidth * scaleRatio;
var targetHeight = imgHeight * scaleRatio;
if (props.pdfObj.numberOfPdf == 2) { if (props.pdfObj.numberOfPdf == 2) {
if (canvasobj.index == 0) { if (canvasobj.index == 0) {
fabriccanvas.value.setWidth(img.width)
fabriccanvas.value.setHeight(img.height) fabriccanvas.value.setWidth(targetWidth)
fabriccanvas.value.setHeight(targetHeight)
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img) displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
} else { } else {
fabriccanvas1.value.setWidth(img.width) fabriccanvas1.value.setWidth(targetWidth)
fabriccanvas1.value.setHeight(img.height) fabriccanvas1.value.setHeight(targetHeight)
displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img) displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
} }
} else { } else {
fabriccanvas.value.setWidth(img.width) fabriccanvas.value.setWidth(targetWidth)
fabriccanvas.value.setHeight(img.height) fabriccanvas.value.setHeight(targetHeight)
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img) displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
} }
// console.log(imgarr.value) // console.log(imgarr.value)