程序员如何做一个简单的去水印小程序

239 阅读2分钟

程序员如何做一个简单的去水印小程序

首先看成品:

下载.png

做这个去水印的小程序之前也研究过,如何去水印,有的是用python去抓取原视频,这方面的我目前还不会这个python语言,因为去水印他不是简单的去一个平台的水印,他有几十个平台,所以这个方法对我消耗也比较大。我自己也没有这个精力去做这个东西, 我就想着应该有这方面的第三方接口,我自己在网上找了几天也没找到,之后掘金的一个哥哥,给我提供了一个网站,他上面的接口是要钱的,但是还算便宜,之后就想着用这个平台的,这个是网站(watermarkuser.hlytools.top/#/dashboard…

image.png 有便宜的,价格也不算很贵。 自己搭建的话,可能的会点小程序方面的知识。
流程主要是:申请小程序(个人的30 企业的300) 小程序备案 开发小程序 上线小程序

大概的流程就是这样 我这边就不说其他细节的东西了,直接提供代码,其他的自己百度百度。 页面代码

<view class="content">
		<uni-easyinput errorMessage v-model="url" focus placeholder="请输入视频的页面网址/分享内容"></uni-easyinput>
		<view class="butList">
			<button class="mini-btn" type="default" size="mini" @click="getClipboard">粘贴</button>
			<button class="mini-btn" style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19" type="primary"
				@click="submit" size="mini">发送</button>
		</view>
		<view v-if="data" class="">
			<view class="">
				<x-video ref="videoPlayer" :autoplay='false' :src="data.videoSrc" :progress="progress" />
			</view>
			<view class="butList">
				<button class="mini-btn" type="default" size="mini" @click="copyTextToClipboard">复制视频链接</button>
				<button class="mini-btn" style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
					type="primary" @click="downVideo" size="mini">下载视频</button>
			</view>
		</view>
		<button class="mini-btn butBoom" type="primary" open-type='contact' size="mini">联系客服</button>
		<!--  解析视频的时候 -->
		<zero-loading v-if="analysis" :mask='true' :maskOpacity='0.1'></zero-loading>
		<!--  下载视频的时候 -->
		<zero-loading v-if="downShow" :mask='true' type='surround' :maskOpacity='0.1'></zero-loading>
	</view>
<script>
	export default {
		data() {
			return {
				analysis: false,
				downShow: false,
				url: '',
				data: '',
				progress: 0
			}
		},
		onLoad() {},
		onShareAppMessage(res) {
			return {
				title: '小创去水印',
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png',
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '小创去水印',
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png',
			}
		},
		methods: {
			async submit() {
				this.analysis = true
				let res = await this.$http.removeWatermark({
					appid: '66d56c3d3ae6b2022B8XT',
					link: this.url
				})
				if (res.code == 1) {
					this.data = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
				}
				this.analysis = false
			},
			downVideo() {
				var that = this
				that.downShow = true
				uni.downloadFile({
					url: that.data.videoSrc,
					success: function(res) {
						console.log(res,'【【【【【【【【【')
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								that.downShow = false
								setTimeout(() => {
									uni.showToast({
										title: "保存成功",
										icon: "success"
									})
								})

							},
							fail: (err) => {
								that.downShow = false
								uni.showToast({
									title: "保存失败",
									icon: "error"
								})
							}
						})
					}

				})
			},
			//  获取剪贴板
			getClipboard() {
				var that = this
				uni.getClipboardData({
					success: function(res) {
						that.url = res.data
						uni.showToast({
							title: '粘贴成功',
							icon: 'success',
							duration: 600
						});
					}
				});
			},
			// 复制文本到剪贴板
			copyTextToClipboard() {
				uni.setClipboardData({
					data: this.data.videoSrc,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 600
						});
					},
					fail: function() {}
				});
			}
		}
	}
</script>

代码我就不解释了。页面就是这个样子的,我个人喜欢简约一点的,大家有啥更好的建议或者意见我一定虚心接受。

e5810142c7360365bcb2fc50c089818.jpg 268df025bfd7fbc7fb1ba2e4273c77c.jpg