uniapp高性能图片裁剪插件,可添加水印

效果图:

 插件地址:高性能图片裁剪,裁剪图片后自动添加水印 - DCloud 插件市场

示例:

<template>
<view>
    <button @click="select">选择图片</button>
    <image mode="widthFix" :src="path"/>
    <jp-cropper-watermark watermark="水印" :watermarkType="1" mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="cancel" @ok="onok"></jp-cropper-watermark>
</view>
</template>

<script>
    export default {
        data() {
            return {
                url: "",
                path: ""
            }
        },
        methods: {
            cancel() {
                // url设置为空,隐藏控件
                this.url = "";
            },
            select() {
                uni.chooseImage({
                    count: 1,
                    success: (rst) => {
                        // 设置url的值,显示控件
                        this.url = rst.tempFilePaths[0];
                    }
                });
            },
            onok(ev) {
                this.url = "";
                this.path = ev.path;
            }
        }
    }
</script>

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中上传图片/视频并添加水印,可以按照以下步骤: 1. 在前端页面中,添加一个文件上传控件,例如: ```html <template> <div> <input type="file" ref="fileInput" @change="uploadFile"> </div> </template> ``` 2. 在前端编写上传文件的逻辑,可以使用uniapp提供的上传组件,例如: ```js methods: { // 上传文件 uploadFile() { const file = this.$refs.fileInput.files[0] uni.uploadFile({ url: '/upload', filePath: file.tempFilePath, name: 'file', success: (res) => { console.log('上传成功', res) }, fail: (err) => { console.log('上传失败', err) } }) } } ``` 3. 在后端编写一个接口,用于接收上传的文件并添加水印。可以使用Java、PHP等语言实现添加水印的逻辑,下面以Java为例。在接口中,可以使用以下代码实现添加水印: ```java // 获取上传的文件 Part filePart = request.getPart("file"); String fileName = filePart.getSubmittedFileName(); InputStream fileContent = filePart.getInputStream(); // 添加水印 Image image = ImageIO.read(fileContent); Graphics2D g = image.createGraphics(); g.drawImage(image, 0, 0, null); g.setFont(new Font("Arial", Font.BOLD, 30)); g.setColor(Color.RED); g.drawString("Watermark", 10, 30); g.dispose(); // 保存文件到服务器 File file = new File("/path/to/save/" + fileName); ImageIO.write(image, "jpg", file); ``` 4. 在前端接收后端返回的结果,例如: ```js success: (res) => { console.log('上传成功', res) // 处理上传成功的逻辑 }, fail: (err) => { console.log('上传失败', err) // 处理上传失败的逻辑 } ``` 以上是uniapp中上传图片/视频并添加水印的基本步骤,需要注意的是,添加水印时需要使用服务器端的代码实现,客户端无法实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值