uni-app 图片水印相机

uni-app 图片水印相机

3 回复

专业插件开发 q 1196097915 https://ask.dcloud.net.cn/question/91948

更多关于uni-app 图片水印相机的实战教程也可以访问 https://www.itying.com/category-93-b0.html


公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解

在uni-app中实现图片水印相机功能，通常需要结合相机的拍照功能和在图片上添加水印的逻辑。以下是一个简化的示例代码，展示了如何实现这一功能。这个示例假设你已经熟悉uni-app的基本开发流程，并且已经安装并配置好了开发环境。

1. 调用相机拍照

首先，我们需要调用uni-app的相机功能来拍照。这可以通过uni.chooseImage API实现，指定sourceType为['camera']来强制使用相机。

uni.chooseImage({
    sourceType: ['camera'],
    count: 1,
    success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        // tempFilePaths[0] 是拍照后的图片路径
        addWatermark(tempFilePaths[0]);
    },
    fail: (err) => {
        console.error('拍照失败', err);
    }
});

2. 添加水印

在拿到拍照后的图片路径后，我们可以使用Canvas API来添加水印。以下是一个简单的添加水印的函数：

function addWatermark(imagePath) {
    uni.getImageInfo({
        src: imagePath,
        success: (imgInfo) => {
            const ctx = uni.createCanvasContext('watermarkCanvas');
            const { width, height } = imgInfo;
            
            // 绘制原始图片
            ctx.drawImage(imagePath, 0, 0, width, height);
            
            // 设置水印文字及样式
            ctx.setFontSize(20);
            ctx.setFillStyle('rgba(255, 255, 255, 0.5)'); // 半透明白色水印
            ctx.fillText('水印文字', width - 100, height - 30); // 右下角水印
            
            // 绘制到canvas
            ctx.draw(false, () => {
                // 导出带水印的图片
                uni.canvasToTempFilePath({
                    canvasId: 'watermarkCanvas',
                    destWidth: width,
                    destHeight: height,
                    success: (res) => {
                        const watermarkedImagePath = res.tempFilePath;
                        // 这里可以处理带水印的图片，比如预览或上传
                        console.log('带水印的图片路径', watermarkedImagePath);
                    },
                    fail: (err) => {
                        console.error('导出带水印的图片失败', err);
                    }
                });
            });
        },
        fail: (err) => {
            console.error('获取图片信息失败', err);
        }
    });
}

3. 页面布局

在页面的<template>部分，你需要添加一个Canvas组件来绘制水印：

<view>
    <canvas canvas-id="watermarkCanvas" style="width: 300px; height: 400px;"></canvas>
</view>

以上代码展示了如何在uni-app中实现一个简单的图片水印相机功能。实际应用中，你可能需要根据具体需求调整水印的样式、位置以及图片的处理逻辑。

回到顶部