jsPDF || 🖼️ 调整适合页面的比例图像。

云O生

172人浏览 · 2022-08-15 02:24:08

云O生 · 2022-08-15 02:24:08 发布

制作基于js的serverless

[ 无服务器解释图像 ](https://res.cloudinary.com/practicaldev/image/fetch/s--0rWFJcPr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/cp6dwq1rxj0tzeapq1v1.png)

在线 pdf 制作器/生成器。

很难做无服务器的东西。它需要获得更多的库和 stackoverflow(对我来说)🤓。

我也在尝试创建无服务器 pdf 生成器,我发现非常有用的库。这是 jsPDF。所以,我接受它并开始制作应用程序。

开始使用jsPDF

[ jsPdf logo ](https://res.cloudinary.com/practicaldev/image/fetch/s--xTZeUNYD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/a11wlp4s9o29op3un50t.png)

实现库也不简单。主要是照片不适合pdf文件的页面。

让我举个例子。

[ 用jsPDF生成的pdf示例 ](https://res.cloudinary.com/practicaldev/image/fetch/s--h57RreFo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/yzmfggk9zr1dec1cg0yb.jpg)

在此屏幕截图中,您可以看到照片超出了 pdf 页面

我在谷歌上搜索了它,但没有一篇关于它的文章,而且 jsPDF 也没有给出关于这个问题的解决方案。

所以,我开始解决这个问题。

比率

知道比例很重要

将图像高度作为宽度,因此我们可以得出适合 pdf 页面的图像的小比例

这里如何获得图像的比例

注意:我们必须在图片上传后准确获取图片的比例,所以我们可以随时在全球范围内使用它。

让我们编码

<input type="file" onchange="getratio(this.files"/>

进入全屏模式退出全屏模式

var images_to_convert = []
var getRatio = (files) =>{
// Note files is json object not array object
for(let file of Object.values(files)){
let reader = new FileReader();
reader.onloadend=()=>{
let imgsrc = reader.result;
addImageToPdf(imgsrc);
}
reader.readAsDataUrl(file);
}

function addImageToPdf (src){
// src is data url of image

let img = new Image();
img.onload=()=>{
images_to_convert.push({src:img.src, height:img.height,width:img.width})
// Now successfully ratio of height as width is noted
}
img.src=src;
}

进入全屏模式退出全屏模式

这就是我注意到比率的方式。

使图像适合页面

[ 显示图标大小调整图标的图示8 ](https://res.cloudinary.com/practicaldev/image/fetch/s--aPiATUgk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:/ /dev-to-uploads.s3.amazonaws.com/uploads/articles/gu1wfq1mmvew57avyytj.png)

图片来自icons8

现在我们有了图像的比例。我们只需要页面高度和宽度大小。

A4 页面的宽度为 210mm,高度为 300mm,因此最大为 300mm*210mm。

const max = {height:300,width:210}

进入全屏模式退出全屏模式

我们知道图像的高度和宽度以像素为单位,但这并不重要,因为它是比例。

因为 , 高度和宽度同时减少或增加,所以比例将是相同的比例。

渲染

现在我们拥有的东西是

最大高度和宽度
图像高宽比

如果页面宽度小于图像宽度,则图像宽度将类似地为页面宽度,如果页面高度小于图像高度,则图像高度为页面hei轴。

让我在代码中显示

var render = () =>{
var doc = new jsPDF("p", "mm", "a4");
image_to_convert.forEach(img=>{
// img is json that we stored previously
let height=img.height,width=img.width,src=img.src,ratio=img.height/img.width;
if(height>max.height||width>max.width){
if(height>width){
height=max.height;
width=height*(1/ratio);
// Making reciprocal of ratio because ration of height as width is no valid here needs width as height
}else if(width > height){
width=max.width;
height=width*ratio;
// Ratio is valid here 
}
}
doc.addImage(src,"png",0,0,width,height);   
doc.addPage("p","mm","a4");
// Now successfully fitted image on page                                                
// I will prefer to use mm instead px

});
doc.save("download.pdf");
}

进入全屏模式退出全屏模式