vue2多张图片合并为一张6寸大小的照片选择竖版和横版不同排版方式进行打印

在Vue 2项目中，将多张图片合并为一张6寸大小的照片并根据竖版和横版的不同排版方式进行打印，可以通过以下步骤实现：

1. 准备工具

2. 6寸照片的尺寸

3. 基本实现步骤

安装依赖

创建 Vue 组件

4. 说明

5. 自定义

1. 准备工具

使用html2canvas将Vue组件的DOM转化为图片
使用canvas对图片进行合并排版
动态生成图片并下载

2. 6寸照片的尺寸

标准6寸照片的尺寸为：

横版：15.2cm x 10.2cm (152mm x 102mm)
竖版：10.2cm x 15.2cm (102mm x 152mm)

将其转换为像素，假设分辨率为300dpi：

横版：1800px x 1200px
竖版：1200px x 1800px

3. 基本实现步骤

安装依赖

首先，需要安装html2canvas：

npm install html2canvas

创建 Vue 组件

<template><div><div ref="photoContainer" :style="canvasStyle"><!-- 动态渲染图片 --><div v-for="(image, index) in images" :key="index" :style="getImageStyle(index)"><img :src="image" alt="image" :style="{ width: '100%', height: '100%' }" /></div></div><button @click="generatePhoto">生成并下载照片</button><button @click="setLayout('horizontal')">横版</button><button @click="setLayout('vertical')">竖版</button></div>
</template><script>
import html2canvas from "html2canvas";export default {data() {return {images: [// 动态加载的图片URL列表'https://example.com/image1.jpg','https://example.com/image2.jpg',// 添加更多图片],layout: 'horizontal', // 初始为横版};},computed: {canvasStyle() {if (this.layout === 'horizontal') {return {width: '1800px',height: '1200px',display: 'flex',flexDirection: 'row',flexWrap: 'wrap',};} else {return {width: '1200px',height: '1800px',display: 'flex',flexDirection: 'column',flexWrap: 'wrap',};}},},methods: {getImageStyle(index) {const numImages = this.images.length;// 不同布局下的图片样式if (this.layout === 'horizontal') {return {width: `${100 / 2}%`,height: `${100 / Math.ceil(numImages / 2)}%`,};} else {return {width: `${100 / Math.ceil(numImages / 2)}%`,height: `${100 / 2}%`,};}},setLayout(type) {this.layout = type;},generatePhoto() {const element = this.$refs.photoContainer;html2canvas(element, {scale: 2, // 提升图片质量}).then((canvas) => {const link = document.createElement('a');link.download = 'photo.png';link.href = canvas.toDataURL();link.click();});},},
};
</script><style scoped>
img {object-fit: cover;
}
</style>

4. 说明

布局切换：通过layout变量来控制照片的排版方式，包括横版和竖版。使用getImageStyle方法来动态设置每张图片的宽高比例。
生成图片：html2canvas将整个photoContainer容器转换为canvas图片，之后通过canvas.toDataURL()下载图片。
响应式布局：根据图片数量和布局方式计算每张图片的宽高，确保图片在横版或竖版中都能均匀分布。