一键去水印小程序

前端uni-app

#小程序://水印宝/ZoAywkbUAKmZVmz

微信搜索 水印宝一键去水印工具

<template>
    <view class="content">
        <!-- <image src="../../static/banner.png" style="width: 100%;" mode="scaleToFill"></image> -->
        <!-- <view style="height: 400rpx;margin-top: 30rpx;width: 100%;">
            <ad adpid="1338417681" @load="bannerLoad"
                :style="bannerLoaded?'background-color: #FFFFFF;':'background-color: #00000000;'"
                style="width: 100%;"></ad>
        </view> -->
        <view style="position: absolute;height:300rpx;left:0;right:0;top: 190rpx;">
            <!-- <image src="../../static/banner.png" style="height: 300rpx;width: 100%;" mode="scaleToFill"></image> -->
            <ad adpid="1338417681" @load="bannerLoad" ad-intervals="35"
                :style="bannerLoaded?'background-color: #337AFF;':'background-color: #00000000;'">
            </ad>
            <!-- <ad adpid="1620294372" ad-type="grid" ad-theme="white" grid-count="5" @load="load" @error="error"></ad> -->
        </view>
        <view
            style="display: flex;flex: 1;height: 90rpx;position: absolute;background-color: white;border-radius: 20rpx;top: 470rpx;left: 44rpx;right: 44rpx;box-shadow:4rpx 4rpx 4rpx 4rpx #eeeeee;align-items: center;justify-content: center;">
            <input placeholder="请长按粘贴视频地址" v-model="originalVideoUrl" type="text"
                style="height:90rpx;width:600rpx;padding-left: 20rpx;padding-right: 20rpx;" />

            <!-- <image src="../../static/ic_close.png" style="width: 34rpx;height: 34rpx;padding-right: 20rpx;"
                @click="clear"></image> -->
        </view>
        <view
            style="background-color:white; border-radius: 32rpx 32rpx 0 0 ;margin-top: 500rpx;width: 100%; display: flex;flex-direction: column;align-items: center;padding-top: 120rpx;">
            <view
                style="background-color: #337AFF;margin-left: 44rpx;margin-right: 44rpx;width: 80%;display: flex;flex-direction: row;height: 90rpx;align-items: center;color: white;font-size: 28rpx;border-radius: 16rpx;">
                <text style="width: 120rpx;height: 100%;display: flex;align-items: center;justify-content: center;"
                    @click="clipboardData">粘贴</text>
                <view style="height: 100%;width: 0.5rpx;background-color: white;"></view>
                <text class="breath animation"
                    style="flex: 1;height: 100%;text-align: center;display: flex;align-items: center;justify-content: center;font-size: 30rpx;font-weight: bold;"
                    @click="parseAllVideo">一键去除水印</text>
                <view style="height: 100%;width: 0.5rpx;background-color: white;"></view>
                <text style="width: 120rpx;height: 100%;display: flex;align-items: center;justify-content: center;"
                    @click="clear">清除</text>
                <!--     <button type="primary" style="background-color: #337AFF;margin-left: 44rpx;margin-right: 44rpx;width: 80%;"
                    @click="parseAllVideo">一键去除水印</button> -->
            </view>

            <view
                style="background-color: #eeeeee;border-radius: 8rpx;width: 80%;margin-left: 44rpx;margin-right: 44rpx;margin-top: 30rpx;font-size: 24rpx;color: darkgray;padding-left: 20rpx;padding-right: 20rpx;padding-top: 10rpx;padding-bottom: 10rpx;">
                <!--     <view style="height: 70rpx;display: flex;align-items: center;justify-content: space-between;"
                    @click="startTeach()">
                    <text style="font-size: 30rpx;">使用教程</text>
                    <image src="../../static/ic_next.png" style="width: 34rpx;height: 34rpx;"></image>
                </view>
                <view style="width:100%;height: 1prx;background-color: #azure;"></view>
                <view style="height: 70rpx;display: flex;align-items: center;justify-content: space-between;"
                    @click="startProblem()">
                    <text style="font-size: 30rpx;">常见问题</text>
                    <image src="../../static/ic_next.png" style="width: 34rpx;height: 34rpx;"></image>
                </view> -->
                <view style="width:100%;height: 1prx;background-color: azure;"></view>
                <view style="height: 70rpx;display: flex;align-items: center;justify-content: space-between;"
                    @tap="navigateToMiniProgram('wx02e0264a881f178e')">
                    <text style="font-size: 30rpx;">修心木鱼-解压神器</text>
                    <image src="../../static/ic_next.png" style="width: 34rpx;height: 34rpx;"></image>
                </view>
                <view style="height: 70rpx;display: flex;align-items: center;justify-content: space-between;"
                    @tap="navigateToMiniProgram('wx5d3694b06c3adb33')">
                    <text style="font-size: 30rpx;">识码-全能二维码生成工具</text>
                    <image src="../../static/ic_next.png" style="width: 34rpx;height: 34rpx;"></image>
                </view>
            </view>
            <view
                style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 20rpx;"
                v-if="parseSuccess">

                <video :src="videoUrl" style="width: 100%;height: 300rpx;padding-left: 44rpx;padding-right: 44rpx;"
                    autoplay="false" play-btn-position="center" object-fit="cover"></video>

                <view
                    style="margin-top: 40rpx;display: flex;flex-direction: row;justify-content: space-between;width: 100%;padding-left: 44rpx;padding-right: 44rpx;">
                    <button type="primary" style="background-color: #337AFF;flex: 1;font-size: 30rpx;"
                        @click="copy">复制视频地址</button>
                    <button type="primary"
                        style="background-color: #337AFF;flex: 1;margin-left: 20rpx;font-size: 30rpx;"
                        @click="saveLocal">下载视频</button>
                </view>
            </view>
            <view v-else class="adContainer" style="width: 750rpx;margin-top: 10rpx;">
                <ad adpid="1620294372" ad-type="grid" ad-theme="white" grid-count="5" @load="load" @error="error"></ad>
            </view>

            <ad-rewarded-video ref="rewardedVideoAd" adpid="1478628867" :loadnext="true"
                v-slot:default="{loading, error}">
                <!-- <button :disabled="loading" :loading="loading">显示广告</button>
                <view v-if="error">{{error}}</view> -->
            </ad-rewarded-video>
            <view v-if="startDownload">
                <ad-interstitial ref="interstitialAd" adpid="1081834412" :loadnext="true"
                    v-slot:default="{loading, error}">
                    <!--         <button :disabled="loading" :loading="loading">显示广告</button>
                <view v-if="error">{{error}}</view> -->
                </ad-interstitial>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import {
        ref
    } from 'vue'
    import {
        onShow,
        onShareAppMessage,
        onShareTimeline
    } from '@dcloudio/uni-app'
    import {
        sign,
        share
    } from '@/utils/common.js'
    import {
        parseVideo
    } from '@/service/api/user.js'
    const originalVideoUrl = ref('')
    const parseSuccess = ref(false)
    const videoUrl = ref('')

    const bannerLoaded = ref(false)
    const rewardedVideoAd = ref()
    const interstitialAd = ref()
    const parseCount = ref(0)
    const startDownload = ref(false)

    function startWebView() {
        uni.navigateTo({
            url: '../index/webView'
        })
    }

    function startTeach() {
        uni.navigateTo({
            url: '/pages/index/teaching'
        })
    }

    function startProblem() {
        uni.navigateTo({
            url: '/pages/index/problem'
        })
    }
    onShow(() => {
        uni.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        })
    })

    function bannerLoad() {
        bannerLoaded.value = true
    }

    function load(res) { }

    function error(res) { }

    function clipboardData() {
        uni.getClipboardData({
            success: function (result) {
                var str = result.data.trim()
                originalVideoUrl.value = str
            },
            fail() {
                uni.showToast({
                    icon: 'none',
                    title: '请在输入框内长按粘贴'
                })
            }
        })
    }

    function parseAllVideo() {
        if (originalVideoUrl.value == '') {
            uni.showToast({
                icon: 'none',
                title: '请先粘贴视频地址'
            })
            return
        }
        if (parseCount.value >= 1) {
            rewardedVideoAd.value.show()
        }
        var urls = /http[s]?:\/\/[\w.]+[\w/]*[\w.]*\??[\w=&:\-+%]*[/]*/.exec(originalVideoUrl.value)

        if (urls != null && urls.length > 0) {
            parseVideo({
                token: 'rzwewdzrckc-auther-523ddd',
                link: urls[0]
            }).then(res => {
                if (res.code == "0001") {
                    parseCount.value += 1
                    videoUrl.value = res.data.playAddr
                    parseSuccess.value = true
                    let history =
                        uni.getStorageSync('history')
                    if (history) {
                        let list = JSON.parse(history)
                        let result = list.concat(res.data)
                        uni.setStorageSync('history', JSON.stringify(result))
                    } else {
                        uni.setStorageSync('history', JSON.stringify([res.data]))
                    }

                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.message
                    })
                }
            }).catch(err => {
                parseCount.value += 1
            })
        }
    }
    onShareAppMessage((res) => {
        return share()
    })

    function saveLocal() {
        // uni.showLoading({
        //     title: '下载中'
        // })
        uni.showToast({
            icon: 'none',
            title: '开始下载，请稍后'
        })
        rewardedVideoAd.value.show()
        uni.downloadFile({
            url: videoUrl.value,
            success: (res) => {
                if (res.statusCode === 200) {
                    uni.saveVideoToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: function () {
                            uni.hideLoading()
                            uni.showToast({
                                icon: 'none',
                                title: '保存成功'
                            })
                        }
                    })
                }
            },
            fail: function (res) {
                uni.hideLoading()
                uni.showToast({
                    icon: 'none',
                    title: res.errMsg
                })
            }
        });
    }

    function copy() {
        startDownload.value = true
        uni.setClipboardData({
            data: videoUrl.value,
            success: function () {
                uni.showToast({
                    icon: 'success',
                    title: '地址复制成功',
                    complete: () => {
                        setTimeout(() => {
                            interstitialAd.value.show()
                        }, 300)
                    }
                })
            }
        });
    }

    function clear() {
        parseSuccess.value = false
        originalVideoUrl.value = ''
    }

    function regUrl(t) {
        return /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(t)
    }

    function navigateToMiniProgram(appId) {
        // develop（开发版），trial（体验版），release（正式版）
        uni.navigateToMiniProgram({
            appId: appId,
            envVersion: 'release'
        })
    }
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        background-color: #337AFF;
        height: 100vh;
        justify-content: center;
    }

    .icon {
        width: 40rpx;
        height: 40rpx;
        margin: 8rpx;
        border-radius: 36rpx;
    }

    .animation {
        animation-name: breath;
        animation-duration: 600ms;
        animation-delay: 0;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
        animation-fill-mode: both, backwards;
        animation-play-state: running;
    }

    @keyframes breath {
        0% {
            transform: scale(0.98);
        }

        100% {
            transform: scale(1);
        }
    }
</style>

后端PHP