typescript
复制代码
<template>
<div class="main-marge">
<div class="box">
<van-uploader accept="image/*,.pdf" :before-read="(file) => beforeRead(file, '-1')">
<div class="upImg">
<img src="./assets/upload.png" />
<span>请上传文件第{{ imglength }}页</span>
</div>
</van-uploader>
<div class="upImgtip">单文件大小不超过2MB，格式仅限PNG、JPG、JPEG、PDF</div>
<div class="imglist">
<div class="title">上传材料</div>
<div class="listform" v-if="filelist.length">
<div class="listbar" v-for="(item, index) in filelist" :key="index">
<div class="before">
<img :src="item.url" />
<div class="cont">{{ item.name }}</div>
</div>
<div class="bargroup">
<span @click="delImg(index)">删除</span>
<van-uploader accept="image/*,.pdf" :before-read="(file) => beforeRead(file, index)">
<span>重新上传</span>
</van-uploader>
</div>
</div>
</div>
<div class="nolist" v-else>
<img src="./assets/nolist.png" />
<span>暂未上传材料，请上传</span>
</div>
</div>
</div>
<div class="btngroup">
<div class="cancle" @click="cancle">取消</div>
<div class="confirm" @click="mergeImg">确定</div>
</div>
<!-- pdf绘制区域 -->
<div class="canvasPDF">
<div>
<canvas
id="canvas"
:style="{border: '1px solid #eeeeee' }"
></canvas>
</div>
<div class="pdfbar" v-for="(item, i) in imgFiles" :key="i">
<canvas :id="`pdf_canvas_${item}`" style="border: 1px solid #eeeeee"></canvas>
</div>
</div>
<!-- 图片绘制合并区域 -->
<div class="canvasPDF">
<canvas
id="myCanvas"
:style="{ border: '1px solid #eeeeee' }"
></canvas>
</div>
</div>
</template>
<script>
import { getPdfnum, PdfToImg, MeargeImg } from '../../utils/tools.js';
export default {
data() {
return {
// pdf
newPrototype: [],
newPrototypeValue: [],
imgFiles: [], //pdf页数列表
filelist: [], //列表
//img
realWidth: 720,
dpr: '',
loading: false,
};
},
computed: {
imglength() {
return this.filelist.length + 1;
},
},
created() {
//此功能是为了pdf.js内部，有时候会报for....in的错误，原因是原型方法被其他地方改变，这里需要改回来
for (let key in Array.prototype) {
if (!Array.prototype.hasOwnProperty(key)) continue;
this.newPrototype.push(key);
}
// 存放原始键 原始方法
this.newPrototypeValue = this.newPrototype.map((v) => ({ [v]: Array.prototype[v] }));
// 删除直接属性
this.newPrototype.forEach((v) => delete Array.prototype[v]);
},
beforeDestroy() {
if (Array.isArray(this.newPrototypeValue) && this.newPrototypeValue.length > 0) {
for (const key in this.newPrototypeValue) {
const method = this.newPrototypeValue[key];
// 确保该属性是函数（即方法）
if (typeof method === 'function') {
// 将方法重新赋值到Array.prototype上
Array.prototype[key] = method;
}
}
}
},
methods: {
//pdf转图片
async beforeRead(file, fileindex) {
if (!file) {
return false;
}
let loading = this.$Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0,
});
try {
this.imgFiles = await getPdfnum(file);
const res = await PdfToImg(file);
if (fileindex === '-1') {
this.filelist.push(res);
} else {
this.filelist.splice(fileindex, 1, res);
}
loading.clear();
} catch (error) {
loading.clear();
this.$confirm({
title: '提示',
message: error,
showCancelButton: false,
closeOnClickModal: false,
});
}
},
//合并图片
async mergeImg() {
let loading = this.$Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0,
});
try {
const res = await MeargeImg(this.filelist, this.realWidth);
this.$emit('confirm-Merge', res.data);
loading.clear();
} catch (error) {
loading.clear();
this.$confirm({
title: '提示',
message: error,
showCancelButton: false,
closeOnClickModal: false,
});
}
},
//删除所选照片
delImg(index) {
this.filelist.splice(index, 1);
},
//关闭弹窗
cancle() {
this.$emit('hidden-cancle');
},
},
};
</script>
<style scoped lang="scss">
.main-marge {
position: fixed;
top: 0;
left: 0;
z-index: 99;
height: 100vh;
width: 100%;
background: #fff;
.tip {
display: flex;
padding: 9px 9px 9px 12px;
background: rgba(253, 171, 77, 0.1);
img {
margin-right: 8px;
width: 16px;
height: 16px;
}
p {
flex: 1;
color: #fc7a43;
font-family: 'PingFang SC';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
}
.box {
padding: 0 16px;
}
.upImg {
margin-top: 16px;
display: flex;
padding: 12px 0px;
flex-direction: column;
align-items: center;
border-radius: 8px;
border: 1px dashed rgba(203, 180, 134, 0.3);
background: rgba(203, 180, 134, 0.06);
color: #b8926b;
text-align: center;
font-family: 'PingFang SC';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
span {
margin-top: 8px;
}
}
.upImgtip {
margin-top: 8px;
color: rgba(0, 0, 0, 0.4);
font-family: 'PingFang SC';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
.imglist {
margin-top: 28px;
.title {
color: #000;
font-family: 'PingFang SC';
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 144.444% */
}
.listform {
.listbar {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e5e5e5;
padding: 12px 0;
.before {
display: flex;
align-items: center;
img {
margin-right: 20px;
width: 48px;
height: 48px;
border-radius: 6px;
}
.cont {
width: 175px;
color: rgba(0, 0, 0, 0.8);
font-family: 'PingFang SC';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
}
.bargroup {
width: 100px;
color: #cbb486;
text-align: center;
font-family: 'PingFang SC';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
&:last-child {
border-bottom: none;
}
}
}
.nolist {
margin-top: 24px;
display: flex;
flex-direction: column;
align-items: center;
img {
width: 160px;
height: 160px;
}
span {
margin-top: 16px;
color: rgba(0, 0, 0, 0.6);
text-align: center;
font-family: 'PingFang SC';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
}
.btngroup {
position: fixed;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
padding: 12px 0;
display: flex;
align-items: center;
justify-content: space-around;
background: #fff;
box-shadow: 0px -2px 8px 0px rgba(191, 191, 191, 0.15), 0px -2px 8px 0px rgba(191, 191, 191, 0.15);
.cancle {
width: 160px;
padding: 11px 16px;
border-radius: 8px;
border: 1px solid #e5e5e5;
background: #fff;
color: rgba(0, 0, 0, 0.6);
font-family: 'PingFang SC';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 144.444% */
text-align: center;
}
.confirm {
width: 160px;
padding: 11px 16px;
border-radius: 8px;
background: linear-gradient(135deg, #e4c995 0%, #b9916a 100%);
color: #fff;
font-family: 'PingFang SC';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 144.444% */
text-align: center;
}
}
.canvasPDF {
position: fixed;
top: 0;
left: -9999px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.pdfbar {
position: relative;
margin-top: 10px;
z-index: 1;
}
}
}
</style>
typescript
复制代码
import * as pdfjs from 'pdfjs-dist';
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
/**
* pdf转图片获取pdf页数，用于渲染页面
* @param {file} file - 文件
*/
export function getPdfnum(file) {
return new Promise((resolve, reject) => {
const imgFiles = [];
if (file.type === 'application/pdf') {
let reader = new FileReader();
reader.readAsDataURL(file); //将文件读取为 DataURL
reader.onload = function () {
//文件读取成功完成时触发
const loadingTask = pdfjs.getDocument(reader.result);
loadingTask.promise.then(async (pdf) => {
const pageNum = pdf.numPages;
if (pageNum > 10) {
reject('此pdf页数过多，请线下合并');
}
//准备图片
for (let i = 1; i <= pageNum; i++) {
imgFiles.push(i);
}
resolve(imgFiles);
});
};
reader.onerror = function () {
// 如果文件读取失败，拒绝Promise
reject(new Error('Failed to read the file'));
};
} else {
resolve([]);
}
});
}
//pdf转图片
export function PdfToImg(file) {
return new Promise((resolve, reject) => {
const newimgList = [];
const fileName = file.name.substring(0, file.name.lastIndexOf('.'));
if (file.type === 'application/pdf') {
let reader = new FileReader();
reader.readAsDataURL(file); //将文件读取为 DataURL
reader.onload = function () {
//文件读取成功完成时触发
const loadingTask = pdfjs.getDocument(reader.result);
loadingTask.promise.then(async (pdf) => {
let pageNum = pdf.numPages;
// 处理
for (let i = 1; i <= pageNum; i++) {
let canvasItem = '';
pdf.getPage(i).then(async (page) => {
const canvas = document.getElementById('pdf_canvas_' + i);
const ctx = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 4 });
canvas.height = viewport.height;
canvas.width = viewport.width;
const destWidth = 298;
const destheight = destWidth * (viewport.height / viewport.width);
canvas.style.width = destWidth + 'px';
canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';
newimgList.push(canvas);
await page.render({ canvasContext: ctx, viewport });
// 使用file对象进行后续操作
if (i === pageNum) {
setTimeout(async () => {
const res = await savePdfImage(newimgList, destWidth, destheight, fileName);
resolve(res);
}, 500);
}
});
}
});
};
reader.onerror = function () {
// 如果文件读取失败，拒绝Promise
reject(new Error('Failed to read the file'));
};
} else {
const reader = new FileReader();
reader.onload = function (e) {
let pngData = e.target.result;
let obj = {
url: pngData,
name: fileName,
};
resolve(obj);
};
// 开始读取文件
reader.readAsDataURL(file);
}
});
}
/**
* pdf保存图片
* @param {Array} newimgList - canvas列表
* @param {Number} x - 页面展示宽
* @param {Number} y - 页面展示高
* @param {String}fileName - 文件名称
*/
function savePdfImage(newimgList, x, y, fileName) {
return new Promise((resolve, reject) => {
let allcanvas = document.getElementById('canvas');
let allctx = allcanvas.getContext('2d');
allcanvas.style.width = x;
allcanvas.style.height = y * newimgList.length;
const subCanvasWidth = newimgList[0].width;
const subCanvasHeight = newimgList[0].height;
allcanvas.width = subCanvasWidth;
allcanvas.height = subCanvasHeight * newimgList.length;
newimgList.forEach((subCanvas, index) => {
// 计算当前图片在Canvas中的垂直位置
const yPosition = index * subCanvasHeight;
// 绘制图片
// 使用drawImage的四个参数版本来指定绘制的源图像区域和目标区域
allctx.drawImage(subCanvas, 0, yPosition, subCanvasWidth, subCanvasHeight);
if (index === newimgList.length - 1) {
let pngData = allcanvas.toDataURL('image/png');
let obj = {
url: pngData,
name: fileName,
};
resolve(obj);
}
});
});
}
/**
* 合并图片
* @param {file} filelist - 文件列表
* @param {Number} realWidth - 合并后的文件宽度
*
*/
export function MeargeImg(filelist, realWidth) {
return new Promise(async (resolve, reject) => {
if (!filelist.length) {
reject('材料不能为空，请检查');
}
let canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
//获取图片信息
const dpr = window.devicePixelRatio;
const res = await getImginfo(filelist, realWidth);
//展示高度
canvas.style.width = realWidth;
canvas.style.height = res;
canvas.width = realWidth * dpr;
canvas.height = res * dpr;
for (let i = 0; i < filelist.length; i++) {
const img = new Image();
img.src = filelist[i].url;
img.crossOrigin = 'anonymous';
img.onload = async () => {
let { imgWidth, imgHeight } = await setPosition(x, y, img, realWidth);
//获取比例
ctx.drawImage(img, x, y, imgWidth, imgHeight);
y += imgHeight;
if (i === filelist.length - 1) {
// 下载图片
let pngData = canvas.toDataURL('image/png');
let filename = filelist[0].name + '.png' || '合并图片.png';
let fileimg = await base64ToFile(pngData, filename);
let obj = {
target: {
files: [fileimg],
},
};
resolve({ data: obj });
}
};
}
ctx.scale(dpr, dpr);
});
}
//获取实际位置，宽高
function setPosition(x, y, img, realWidth) {
return new Promise((resolve, reject) => {
const scaledpr = img.width / realWidth;
let imgWidth = img.width;
let imgHeight = img.height;
if (scaledpr > 1) {
imgWidth = img.width / scaledpr;
imgHeight = img.height / scaledpr;
}
resolve({
imgWidth: imgWidth,
imgHeight: imgHeight,
});
});
}
//获取所有图片的总高度
function getImginfo(filelist, realWidth) {
return new Promise((resolve, reject) => {
let allHeight = 0;
let loadedCount = 0; // 用于追踪已加载图片数量
let totalImages = filelist.length; // 图片总数
for (let i = 0; i < totalImages; i++) {
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = filelist[i].url;
img.onload = () => {
const scaledpr = img.width / realWidth;
let imgHeight = img.height;
if (scaledpr > 1) {
imgHeight = img.height / scaledpr;
}
allHeight += imgHeight;
loadedCount++; // 增加已加载图片计数
if (loadedCount === totalImages) {
resolve(allHeight);
}
};
img.onerror = (error) => {
reject(error);
};
}
});
}
//base64转file文件
function base64ToFile(base64, filename) {
filename = filename || String(new Date().getTime());
let arr = base64.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}