|
|
@@ -69,34 +69,34 @@
|
|
|
// 引入 html2canvas 和 jsPDF
|
|
|
import html2canvas from 'html2canvas';
|
|
|
import jsPDF from 'jspdf';
|
|
|
-// const imageUrl = [
|
|
|
-// require('@/assets/0.jpg'),
|
|
|
-// require('@/assets/1.jpg'),
|
|
|
-// require('@/assets/2.jpg'),
|
|
|
-// require('@/assets/3.jpg'),
|
|
|
-// require('@/assets/4.jpg'),
|
|
|
-// require('@/assets/5.jpg')
|
|
|
-// ]; // 使用相对路径或别名路径
|
|
|
-// // 默认精美的示例HTML + CSS (内联样式丰富,展示能力)
|
|
|
-// const DEFAULT_HTML = `
|
|
|
-// <div class="container">
|
|
|
-// <div class="img-area">
|
|
|
-// <img class="my-photo" alt="loading" src="${imageUrl[0]}">
|
|
|
-// </div>
|
|
|
-// <div class="img-area">
|
|
|
-// <img class="my-photo" alt="loading" src="${imageUrl[1]}">
|
|
|
-// </div>
|
|
|
-// <div class="img-area">
|
|
|
-// <img class="my-photo" alt="loading" src="${imageUrl[2]}">
|
|
|
-// </div> <div class="img-area">
|
|
|
-// <img class="my-photo" alt="loading" src="${imageUrl[3]}">
|
|
|
-// </div> <div class="img-area">
|
|
|
-// <img class="my-photo" alt="loading" src="${imageUrl[4]}">
|
|
|
-// </div> <div class="img-area">
|
|
|
-// <img class="my-photo" alt="loading" src="${imageUrl[5]}">
|
|
|
-// </div>
|
|
|
-// </div>
|
|
|
-// `;
|
|
|
+ // const imageUrl = [
|
|
|
+ // require('@/assets/0.jpg'),
|
|
|
+ // require('@/assets/1.jpg'),
|
|
|
+ // require('@/assets/2.jpg'),
|
|
|
+ // require('@/assets/3.jpg'),
|
|
|
+ // require('@/assets/4.jpg'),
|
|
|
+ // require('@/assets/5.jpg')
|
|
|
+ // ]; // 使用相对路径或别名路径
|
|
|
+ // // 默认精美的示例HTML + CSS (内联样式丰富,展示能力)
|
|
|
+ // const DEFAULT_HTML = `
|
|
|
+ // <div class="container">
|
|
|
+ // <div class="img-area">
|
|
|
+ // <img class="my-photo" alt="loading" src="${imageUrl[0]}">
|
|
|
+ // </div>
|
|
|
+ // <div class="img-area">
|
|
|
+ // <img class="my-photo" alt="loading" src="${imageUrl[1]}">
|
|
|
+ // </div>
|
|
|
+ // <div class="img-area">
|
|
|
+ // <img class="my-photo" alt="loading" src="${imageUrl[2]}">
|
|
|
+ // </div> <div class="img-area">
|
|
|
+ // <img class="my-photo" alt="loading" src="${imageUrl[3]}">
|
|
|
+ // </div> <div class="img-area">
|
|
|
+ // <img class="my-photo" alt="loading" src="${imageUrl[4]}">
|
|
|
+ // </div> <div class="img-area">
|
|
|
+ // <img class="my-photo" alt="loading" src="${imageUrl[5]}">
|
|
|
+ // </div>
|
|
|
+ // </div>
|
|
|
+ // `;
|
|
|
|
|
|
export default {
|
|
|
name: 'HtmlToCanvas',
|
|
|
@@ -119,7 +119,7 @@
|
|
|
limit: 1,
|
|
|
status: 1,
|
|
|
approvalStatus: 2,
|
|
|
- sealHolderId:this.$store.state.user.info.userId
|
|
|
+ sealHolderId: this.$store.state.user.info.userId
|
|
|
}).then((res) => {
|
|
|
this.publicImages = res.list;
|
|
|
});
|
|
|
@@ -250,7 +250,7 @@
|
|
|
if (imageData) {
|
|
|
const data = JSON.parse(imageData);
|
|
|
console.log('解析后的数据:', data);
|
|
|
- this.addImageToCanvas(data.url, e.offsetX, e.offsetY);
|
|
|
+ this.addImageToCanvas(data, e.offsetX, e.offsetY);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -262,10 +262,12 @@
|
|
|
},
|
|
|
|
|
|
// 处理拖拽开始
|
|
|
- handleDragStart(e, img, index) {
|
|
|
+ handleDragStart(e, img, index, type) {
|
|
|
const data = {
|
|
|
url: img.imgUrl,
|
|
|
- name: img.name
|
|
|
+ name: img.name,
|
|
|
+ version: img.version,
|
|
|
+ imgId: type == 'public' ? img.id : ''
|
|
|
};
|
|
|
e.dataTransfer.setData('imageData', JSON.stringify(data));
|
|
|
e.dataTransfer.effectAllowed = 'copy';
|
|
|
@@ -273,7 +275,7 @@
|
|
|
},
|
|
|
|
|
|
// 添加图片到 Canvas
|
|
|
- addImageToCanvas(imgUrl, x, y) {
|
|
|
+ addImageToCanvas(data, x, y) {
|
|
|
const canvas = document.getElementById('outputCanvas');
|
|
|
if (!canvas || !this.canvasGenerated) {
|
|
|
console.log('请先渲染 Canvas');
|
|
|
@@ -308,7 +310,9 @@
|
|
|
|
|
|
this.droppedImages.push({
|
|
|
id: imageId,
|
|
|
- imgUrl: imgUrl,
|
|
|
+ imgId: data.imgId,
|
|
|
+ imgUrl: data.url,
|
|
|
+ version: data.version,
|
|
|
x: posX,
|
|
|
y: posY,
|
|
|
width,
|
|
|
@@ -338,7 +342,7 @@
|
|
|
// this.showMessage('⚠️ 图片加载失败', 'error');
|
|
|
};
|
|
|
|
|
|
- img.src = imgUrl;
|
|
|
+ img.src = data.url;
|
|
|
},
|
|
|
|
|
|
// 重新绘制整个 Canvas
|
|
|
@@ -815,7 +819,10 @@
|
|
|
});
|
|
|
|
|
|
// 触发 PDF 生成事件,父组件可以监听此事件
|
|
|
- this.$emit('pdf-generated', pdfFile);
|
|
|
+ this.$emit('pdf-generated', {
|
|
|
+ pdfFile,
|
|
|
+ droppedImages: this.droppedImages
|
|
|
+ });
|
|
|
|
|
|
// // 保存 PDF
|
|
|
// const timestamp = new Date()
|