【小程序图片水印】微信小程序图片加水印功能 canvas绘图

最新推荐文章于 2025-04-18 16:16:13 发布

原创

最新推荐文章于 2025-04-18 16:16:13 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序 #canvas #水印

文章介绍了在微信小程序中实现图片选择、尺寸限制、裁剪、添加水印（包括倾斜、层级和单独模式）以及最终保存图片的步骤，展示了使用canvasAPI进行图片处理的技术细节。

看看效果

在这里插入图片描述

实现步骤：

1.选择图片

/* 选择背景图片 对图片的大小以及类型做一下限制 */
chooseImage(e) {
   
   
	uni.chooseImage({
   
   
		count: 1,
		success: (res) => {
   
   
			let index = res.tempFilePaths[0].lastIndexOf(".");
			let imgUrl = res.tempFilePaths[0].substr(index + 1);

			if (imgUrl != "png" && imgUrl != "jpg" && imgUrl != "jpeg") {
   
   
				uni.showToast({
   
   
					title: '请上传jpg、jpeg、png类型的图片',
					icon: 'none'
				});
				return
			}
			if (res.tempFiles[0].size / 1024 < 1024 * 1024 * 20) {
   
   
				this.originImg = res.tempFilePaths[0]
				this.imageSrc = res.tempFilePaths[0]
				this.loadImage();
			} else {
   
   
				uni.showToast({
   
   
					title: '图片大小不能超过20M，当前大小' + (res.tempFiles[0].size / 1024).toFixed(
						2) + 'KB',
					icon: 'none'
				})
			}
		},
	});
},

图片展示区域计算

/* 将图片加载到画布  */
loadImage() {
   
   
	uni.showLoading({
   
   
		title: "图片加载中...",
	});

	/* 获取图片信息  */
	uni.getImageInfo({
   
   
		src: this.imageSrc,
		success:(res) => {
   
   
			let imgH = res.height;
			let imgW

最低0.47元/天解锁文章