Question

我有预览输入类型=文件（图像）的脚本，并将其生成为pdf。

对于小尺寸的图像没有问题。然后当我输入大小为6Mb时，预览就可以，但是当生成为pdf时，它需要很长时间并最终停止。

所以，我想将图像大小调整为200x240px。但我不知道该怎么做，因为脚本使用javascript，我还是新手。

请帮助我在脚本上调整大小。

脚本：

  function previewFile(){
   var preview = document.querySelector('img'); //selects the query named img
   var file    = document.querySelector('input[type=file]').files[0]; //sames as here
   var reader  = new FileReader();

   reader.onloadend = function () {
     console.log(reader.result);
       //preview.src = reader.result;
       $('#gen-template-frame').contents().find('.logo img').attr('src', reader.result);
   }

   if (file) {
       reader.readAsDataURL(file); //reads the data as a URL
   } else {
       preview.src = "";
   }
}

HTML：

<!doctype html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/magang/front.css">
</head>
<body>
    <div class="corpname" contenteditable>RUMAH SAKIT HARUM</div>
    <div class="logosisma"><img src="https://sismadigroup.com/idcard/images/background/logo-id-card.png" width="219" height="70" /></div>
    <div class="logo">
        <!--<img src="resize/resize.php?src=https://sismadigroup.com/idcard/templates/images/avatar/3.jpg&scale=10&q=100">-->
        <img src="https://sismadigroup.com/idcard/templates/images/avatar/3.jpg" width="200" height="240" />
    </div>
    <div class="name highlight" contenteditable>Maesyaroh</div>
    <div class="position" contenteditable>Siswa Magang</div>
    <div class="nik" contenteditable>SM-0035</div>
    <div class="BBP">BENAR &nbsp; BAIK &nbsp; PANTAS</div>
    <div class="BBPPoint" style="left:135px;"> . </div>
    <div class="BBPPoint" style="left:203px;"> . </div>
</body>
</html>

编辑：PHP生成PDF：

$frontPage = resolveDependency(stripslashes( $_POST[ "html" ] ));
$backPage = resolveDependency(stripslashes( $_POST[ "html2" ]) );
$frontPageCSS = getCSSFromHTML($frontPage);
$backPageCSS = getCSSFromHTML($backPage);
$mpdf = new mPDF('utf-8', array(75, 114.6), 0, '', 0, 0, 0, 0, 0, 0);
$mpdf->WriteHTML($frontPageCSS, 1);
$mpdf->WriteHTML($frontPage, 0);
$mpdf->WriteHTML('<pagebreak>', 2);
$mpdf->WriteHTML($backPageCSS, 1);
$mpdf->WriteHTML($backPage, 0);
$mpdf->Output('card.pdf', 'I');

Answer 1

由于您使用PHP生成PDF，因此您可以使用PHP调整图像大小，然后将其与mPDF一起使用。我在你的代码中没有看到你如何加载图像，所以我想你使用Image()函数从文件加载图像（在这个例子中$fileName是输入图像的名称，将其替换为您在代码中使用的变量：

// $fileName is the name of the input image
list($width,$height)=getimagesize($fileName); // size of input image
$tempFileName=tempnam(sys_get_temp_dir(),"img").".png";
$newWidth=200;
$newHeight=240;

$image=imagecreatefrompng($fileName); // load the input image
$newImage=imagecreatetruecolor($newWidth,$newHeight); //create an empty image
imagecopyresampled($newImage,$image,0,0,0,0,$newWidth,$newHeight,$width,$height);
imagepng($newImage,$tempFileName,9); // saving the new image to disk

// here you create the PDF using the image saved in $tempFileName

unlink($tempFileName); // and finally we delete the temporal file

Answer 2

在上传文件之前，我在前端解决了同样的问题。您可以访问a link！

import imageSqResizer from './image-square-resizer.js'

let resizer = new imageSqResizer(
    'image-input',
    300,
    (dataUrl) => 
        document.getElementById('image-output').src = dataUrl;
);
//Get blob
let formData = new FormData();
formData.append('files[0]', resizer.blob);

//get dataUrl
document.getElementById('image-output').src = resizer.dataUrl;

如何在预览时调整图像大小（无数据库）

2 个答案: