前端怎么将多张图片插入到pdf？
我现在有一个数组，里面放的是图片的base64编码，想通过jspdf这个插件把这些图片生成一个pdf，但是现在遇到的问题就是，两张图片就要占一页，如果有三张图片的话，就需要调用addPage方法，增加一页pdf，把第三张图片插入，但是如果有很多图片的话，就不知道何时去调用addPage方法。
这个是我目前搜到的教程，希望有人给出答案。
<template>
<div>
<video ref="video" autoplay width="400" height="300"></video>
<button @click="btnTakePhotoClicked()">Take photo</button>
<canvas ref="canvas" width="400" height="300"></canvas>
<a href="" download="canvas.jpeg" id="save_herf">
<img src="" id="save_img" alt="">
</a>
<button @click="addpage">增页</button>
<button @click="inserImg">图片插入</button>
<button @click="getSize">获取图片高度</button>
<button @click="savePDF">保存</button>
</div>
</template>
<script>
import {jsPDF} from 'jspdf';
const recordPdf = new jsPDF('p', 'px')
export default {
data() {
return {
imgList: [],
currentW: 1,
currentH: 1,
currentImg: ""
}
},
mounted(){
this._initVueApp();
this.btnTakePhotoClicked();
},
methods:{
async _initVueApp(){
this.$refs.video.srcObject= await navigator.mediaDevices.getUserMedia({video:true,audio:false});
this._context2d=this.$refs.canvas.getContext("2d");
this.canvas=this.$refs.canvas;
},
btnTakePhotoClicked(){
this._context2d.drawImage(this.$refs.video,0,0,400,300)
var img = document.createElement("img"); // 创建img元素
img.src =this.canvas.toDataURL("image/png"); // 截取视频第一帧
var svaeHref = document.getElementById("save_herf");
console.log(img.src)
this.imgList.push(img.src)
this.currentImg = img.src
var sd=document.getElementById("save_img");
svaeHref.href = img.src;
sd.src=img.src
},
addpage() {
recordPdf.addPage()
},
async inserImg() {
for(let url of this.imgList) {
let { width, height } = await this.getImgWidthHeight(url)
recordPdf.addImage(url, 'png', 1, this.currentH, width, height)
this.currentH = height
this.currentW = width
}
// recordPdf.addImage(this.currentImg, 'png', 1, 1)
// this.saveToPDF()
},
savePDF() {
recordPdf.save("PDF存档.pdf")
},
async getSize() {
const { width, height } = await this.getImgWidthHeight(this.currentImg)
console.log(width);
console.log(height);
},
async saveToPDF() {
// 生成pdf
// 第一个参数：l横向，p纵向
// 第二个参数：计量单位: cm mm px等
// 第三个参数：格式: 默认a4
// this.saveLoading = false
// const { maxWidth, maxHeight } = await this.getAllHeight()
const recordPdf = new jsPDF('p', 'px')
// 从top的位置开始加图片
for (let i = 0; i < this.imgList.length; i++) {
const { url } = this.imgList[i]
const { width, height } = await this.getImgWidthHeight(url)
recordPdf.addImage(url, 'png', 1, 1, width, height)
recordPdf.addPage()
}
// 删除最后一页留白
// const targetPage = recordPdf.internal.getNumberOfPages()
// recordPdf.deletePage(targetPage)
recordPdf.save('PDF存档.pdf')
},
// 获取图片数组里面最大的宽度和高度
async getMaxWidthHeight() {
const widthList = []
const heightList = []
let maxHeight = 0
let maxWidth = 0
for (let i = 0; i < this.imgList.length; i++) {
const { url } = this.imgList[i]
const { width, height } = await this.getImgWidthHeight(url)
widthList.push(width)
heightList.push(height)
}
// 把数组变成升序然后倒过来取第一个就是拿最大宽度
maxWidth = widthList.sort().reverse()[0]
maxHeight = heightList.sort().reverse()[0]
return {
maxWidth,
maxHeight,
}
},
//获取图片宽高
getImgWidthHeight(src) {
return new Promise((resolve, reject) => {
const img = new Image()
img.src = src
// 图片是否有缓存 如果有缓存可以直接拿 如果没有缓存 需要从onload拿
if (img.complete) {
const { width, height } = img
resolve({
width,
height,
})
} else {
img.onload = function () {
const { width, height } = img
resolve({
width,
height,
})
}
}
})
},
}
}
</script>
