uni-app 实现字画装裱加边框功能

在uni-app中实现字画装裱加边框功能，可以通过Canvas API来完成。以下是一个基本的实现思路和代码示例。

实现思路

1. 准备素材：准备好字画图片和边框素材（可以是图片或者绘制的图形）。
2. 绘制边框：使用Canvas API绘制边框。
3. 绘制字画：在边框内部绘制字画图片。
4. 导出或展示：将绘制好的Canvas内容导出为图片或直接在页面上展示。

代码示例

以下是一个简单的代码示例，展示了如何在uni-app中使用Canvas API实现字画装裱加边框功能。

<template>
  <view>
    <canvas canvas-id="artCanvas" style="width: 300px; height: 400px;"></canvas>
    <button @click="generateArt">生成字画</button>
  </view>
</template>

<script>
export default {
  methods: {
    generateArt() {
      const ctx = uni.createCanvasContext('artCanvas');
      
      // 边框颜色和宽度
      const borderColor = '#000000';
      const borderWidth = 10;
      const canvasWidth = 300;
      const canvasHeight = 400;
      const padding = 20; // 内边距
      
      // 边框绘制
      ctx.setStrokeStyle(borderColor);
      ctx.setLineWidth(borderWidth);
      ctx.strokeRect(borderWidth / 2, borderWidth / 2, canvasWidth - borderWidth, canvasHeight - borderWidth);
      
      // 字画图片路径（假设为本地图片）
      const artworkPath = '/static/artwork.jpg';
      
      // 字画绘制（假设字画图片大小为260x360）
      uni.getImageInfo({
        src: artworkPath,
        success: (res) => {
          const artworkWidth = res.width;
          const artworkHeight = res.height;
          const artworkX = (canvasWidth - artworkWidth) / 2 + borderWidth;
          const artworkY = (canvasHeight - artworkHeight) / 2 + borderWidth;
          
          ctx.drawImage(artworkPath, artworkX, artworkY, artworkWidth, artworkHeight);
          ctx.draw(false, () => {
            // 导出图片（可选）
            uni.canvasToTempFilePath({
              canvasId: 'artCanvas',
              success: (filePathRes) => {
                console.log('生成的图片路径：', filePathRes.tempFilePath);
              },
              fail: (err) => {
                console.error('导出图片失败：', err);
              }
            });
          });
        },
        fail: (err) => {
          console.error('获取图片信息失败：', err);
        }
      });
    }
  }
};
</script>

<style scoped>
/* 样式根据需要调整 */
</style>

说明

1. Canvas API：使用uni.createCanvasContext获取Canvas上下文，然后使用上下文的方法绘制边框和图片。
2. 图片路径：artworkPath为字画图片的路径，可以是本地图片或者网络图片。如果是网络图片，需要先下载到本地或者使用uni.getImageInfo获取网络图片的信息后再绘制。
3. 导出图片：使用uni.canvasToTempFilePath将绘制好的Canvas内容导出为图片路径，可以根据需要进行展示或上传。

以上代码提供了一个基本的实现框架，你可以根据实际需求进行调整和优化。