uniapp-拍照加水印

最新推荐文章于 2025-06-26 09:37:55 发布

weixin_44647876

最新推荐文章于 2025-06-26 09:37:55 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/weixin_44647876/article/details/120850311

本文介绍如何在uni-app中实现拍照并为照片添加水印的详细步骤，包括在data和methods中设置相关逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：拍照，给照片加水印

<template>
    <uni-icons @click="showCamera" type="camera" size="28"></uni-icons>    //拍照
    <view style="position: absolute;top: -999999px;">    //把canvas移出视窗
        <canvas :style="{'width':w,'height': h}" canvas-id="firstCanvas"></canvas>
    </view>
</template>

data：

data() {
    return {
       w:'',
       h:'',
    }
},

methods：

showCamera() {
    let _self = this;
	uni.chooseImage({
		// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		count: 1,
		sourceType: sourceType, //相机
		success: function (res) {
			uni.showLoading({
				title: '制作水印中...'
			})
			_self.w = 300+'px';    //宽度
			_self.h = 500+'px';    //高度
			let ctx = uni.createCanvasContext('firstCanvas');    /** 创建画布 */
			//将图片src放到cancas内，宽高为图片大小
			ctx.drawIma