小程序相机拍照后如何动态添加自定义文字水印？

Question

在小程序开发中，实现相机拍照后动态添加自定义文字水印的功能时，常见的技术问题是如何确保水印文字的清晰度与图片分辨率相匹配。如果处理不当，可能会导致水印模糊或与图片内容冲突。此外，如何动态调整水印位置、大小、透明度和字体样式以适应不同尺寸的照片也是一个挑战。开发者需要结合Canvas API绘制水印，并通过小程序提供的image组件加载拍摄影像，但可能会遇到异步加载导致的绘制时机问题。最后，保存带水印图片到本地时，需注意微信小程序对文件路径和权限的限制，避免保存失败的情况发生。这些问题都需要在实际开发中综合考虑并优化解决方案。

Answer 1

1. 常见技术问题分析

在小程序开发中，实现相机拍照后动态添加自定义文字水印的功能时，需要解决多个技术问题：

• 水印清晰度与图片分辨率匹配：如果水印文字的大小和图片分辨率不匹配，可能会导致水印模糊或过于显眼。
• 动态调整水印参数：如何根据照片尺寸动态调整水印的位置、大小、透明度和字体样式是一个挑战。
• 异步加载绘制时机问题：使用image组件加载拍摄影像时，可能因异步加载而导致水印绘制失败。
• 文件路径和权限限制：保存带水印图片到本地时，需注意微信小程序对文件路径和权限的限制。

2. 技术解决方案

以下是针对上述问题的具体解决方案：

1. 确保水印清晰度：通过计算图片的宽高比例，动态调整水印文字的大小和位置，避免固定值导致的模糊或冲突。
2. 动态调整水印参数：利用Canvas API提供的属性（如font、globalAlpha等），结合图片的实际尺寸动态设置水印参数。
3. 处理异步加载问题：在调用Canvas绘制之前，确保image组件已完全加载图片。可以使用onLoad事件监听图片加载完成状态。
4. 保存图片到本地：在保存图片时，使用微信小程序提供的wx.saveImageToPhotosAlbum接口，并正确处理临时文件路径转换为永久路径的问题。

3. 代码示例

// Canvas绘制水印示例
function drawWatermark(ctx, text, imgWidth, imgHeight) {
    const fontSize = Math.min(imgWidth, imgHeight) * 0.05; // 动态字体大小
    ctx.setFontSize(fontSize);
    ctx.setFillStyle('rgba(0, 0, 0, 0.5)'); // 半透明黑色
    const textWidth = ctx.measureText(text).width;
    const x = imgWidth - textWidth - 10; // 右下角对齐
    const y = imgHeight - fontSize - 10;
    ctx.fillText(text, x, y);
}

// 异步加载图片并绘制
function handleImageLoad(canvasId, imagePath, watermarkText) {
    const query = wx.createSelectorQuery();
    query.select(`#${canvasId}`).fields({ node: true, size: true }).exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = imagePath;
        img.onload = () => {
            const { width, height } = img;
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
            drawWatermark(ctx, watermarkText, width, height);
            wx.canvasToTempFilePath({
                canvas,
                success(res) {
                    console.log('保存成功', res.tempFilePath);
                },
                fail(err) {
                    console.error('保存失败', err);
                }
            });
        };
    });
}
    

4. 流程图

graph TD;
            A[开始] --> B{加载图片};
            B -->|成功| C[计算图片尺寸];
            C --> D[动态调整水印参数];
            D --> E[Canvas绘制水印];
            E --> F{保存图片};
            F -->|成功| G[结束];
            F -->|失败| H[检查权限和路径];