设置pdf宽高
This commit is contained in:
parent
1004567103
commit
af6236a751
|
@ -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)
|
||||||
|
|
Loading…
Reference in New Issue