艺术画框生成器

更新记录

1.0.0（2025-12-03）下载此版本

1、图片上传与预览: 支持用户快速上传图片，并在配置过程中实时预览效果。 2、多重配置选项: 画框选择: 可选择不同的画框纹理 (frames)。画纸选择: 可选择不同的内衬画纸纹理 (papers)。尺寸配置: 支持预设尺寸选择和自定义输入尺寸。卡纸宽度: 支持卡纸宽度调节。 3、Canvas 绘制: 利用原生 Canvas API 计算和绘制画框的几何结构、纹理平铺、画纸内衬及用户图片。

平台兼容性

uni-app(3.6.18)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
×	√	-	√	√	×	√	√	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	-	-	-	-	-	×	-	-	×	×

好的，为您整理一份项目 README.md 文件。该文件将基于您的 FrameGenerator 组件功能，使用 artFrameGenerator 作为项目名称。

🖼️ artFrameGenerator (画框生成器)

artFrameGenerator 是一个为 uni-app/Vue 3 设计的高性能组件，用于实现用户上传图片后的画框配置、预览和生成功能。它利用原生 Canvas API 进行高精度绘图，支持多种画框、画纸纹理及尺寸的灵活配置。

✨ 核心功能 (Features)

图片上传与预览: 支持用户快速上传图片，并在配置过程中实时预览效果。
多重配置选项:
- 画框选择: 可选择不同的画框纹理 (frames)。
- 画纸选择: 可选择不同的内衬画纸纹理 (papers)。
- 尺寸配置: 支持预设尺寸选择和自定义输入尺寸。
- 卡纸宽度: 支持卡纸宽度调节。
Canvas 高精度绘制: 利用原生 Canvas API 精确计算和绘制画框的几何结构、纹理平铺、画纸内衬及用户图片。
结果导出: 将最终生成的画框图导出为临时文件 URL，便于后续操作（如上传或预览）。

🚀 技术栈 (Technology Stack)

平台: Uni-app (支持多端，核心逻辑依赖 uni-app 的 Canvas API)
框架: Vue 3 (<script setup> 语法)
核心: Canvas 2D 绘图 API

🛠️ 使用方式 (Usage)

1. 引入组件

将 FrameGenerator.vue（或您重命名后的组件文件）放置在您的项目组件目录中，并在父页面中引入。

<template>
    <view>
        <FrameGenerator
            :config-data="generatorConfig"
            :initial-image-url="defaultImg"
            @generate-success="handleSuccess"
        />
    </view>
</template>

<script setup lang="ts">
import FrameGenerator from '@/components/FrameGenerator.vue'; 
// ...
</script>

2. 配置数据结构 (Config Data Structure)

为了使组件可复用，建议将硬编码的配置数据提取，并通过 props 传入。以下是 configData 的类型定义和示例：

interface ConfigItem { 
    name: string; 
    url: string; // OSS/CDN 资源路径
}

interface GeneratorConfig {
    /** 画框纹理列表 */
    frames: ConfigItem[];
    /** 画纸/卡纸纹理列表 */
    papers: ConfigItem[];
    /** 预设尺寸列表 (w/h 为 cm 单位) */
    sizes: { name: string; w: number; h: number }[]; 
    /** 卡纸宽度列表 (w 为 cm 单位) */
    widths: { name: string; w: number }[];
}

// 示例配置
const generatorConfig: GeneratorConfig = {
    "frames": [/* ... */],
    "papers": [/* ... */],
    "sizes": [/* ... */],
    "widths": [/* ... */]
};

⚙️ 属性与事件 (Props & Emits)

由于您最终保留了组件的内部逻辑和硬编码数据，此处文档化组件作为可复用模块时推荐的接口。

Props

属性名	类型	默认值	描述
`configData`	`GeneratorConfig`	-	（推荐）传入画框、画纸、尺寸、卡纸宽度等所有配置数据。
`initialImageUrl`	`string`	`''`	（推荐）组件初始化时加载的默认图片 URL。

Emits

事件名	参数	描述
`generate-success`	`(url: string, formData: object)`	图片生成成功后触发，返回生成的本地临时 URL 和当前的配置表单数据。

🎨 核心实现细节

尺寸计算 (initSize): 负责根据用户选择的画框尺寸、卡纸宽度，以及图片的宽高比，计算出在 Canvas 上绘制时，画框、画纸和画芯图的精确像素尺寸 (canvasSize)。
纹理平铺 (drawBGIMG): 通过 canvasContext.createPattern 方法实现画框纹理的无缝平铺，并利用复杂的 save/translate/rotate 结合梯形路径 (beginPath/closePath) 实现了画框边角的 45° 斜角拼接效果。
图层顺序 (draw): 确保了正确的绘制顺序：背景色 $\rightarrow$ 画框边框 $\rightarrow$ 画纸内衬 $\rightarrow$ 画芯图片。