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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/625866.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DOM重点核心(注册事件+DOM事件流)

目录 1.注册事件 注册时间概述 addEventListener() 删除事件 2.DOM事件流 DOM事件流理论 事件对象 事件对象的常见属性和方法 e.targe 和 this的区别 阻止默认行为 阻止冒泡 事件委托 禁止右键菜单和禁止选中文字 获得鼠标的坐标&#xff08;可视区、页面、浏览器…

RIP动态路由协议详解

目录 一&#xff1a;RIP协议的基本信息 二&#xff1a;RIP协议中的更新方式 三&#xff1a;RIP协议中的计时器 定时更新器&#xff08;UPDATE timer&#xff09; 无效定时器&#xff08;invalid Timer&#xff09; 垃圾收集定时器&#xff08;garbage collection timer&a…

怎样计算Excel一列数值中十位数为5的个数?

有一列数字&#xff0c;可能正数也可能是负数&#xff0c;有可能有小数&#xff0c;要怎么计算这列数字中十位数为5的数量有多少个&#xff1f; 一、按示例情况&#xff0c;数字均为整数 公式如下&#xff1a; SUM(--(MID(A1:A6,LEN(A1:A6)-1,1)"5")) 数组公式&a…

【JS面试题】原型原型链

一、面试真题展示&#xff1a; 1. 如何准确判断一个变量是不是数组&#xff1f; ① 使用instanceof进行判断&#xff1a;a instanceof Array ② 使用Array.isArray()进行判断&#xff1a;Array.isArray(a) 2. 手写一个简易的jQuery&#xff0c;考虑插件和扩展性&#xff1f; …

python的文件操作及函数式编程介绍

五、文件操作 1、读取键盘输入 input 获取标准输入&#xff0c;数据类型统一为字符串 #!/usr/bin/python # -*- coding: UTF-8 -*- str input("请输入&#xff1a;") print&#xff08;"你输入的内容是: ", str&#xff09; 这会产生如下的对应着输入的…

c++ 各版本特性介绍

c C是一种高级编程语言&#xff0c;以其强大的功能、灵活性和高效性而闻名。它是由Bjarne Stroustrup在20世纪80年代初期在贝尔实验室开发的&#xff0c;作为C语言的一个扩展。C不仅包含了C语言的所有特性&#xff0c;还引入了面向对象编程&#xff08;OOP&#xff09;的概念&…

TCP四次挥手——断开连接 滑动窗口-流量控制

四次挥手 在TCP的四次挥手中&#xff0c;其重要作用就是释放客户端和服务器的连接。 这里的一些参数非常重要&#xff0c;因为这些参数的作用是为了表达TCP四次挥手断开连接的过程。 其中的参数如下 1.FIN&#xff1a;FIN (Finish) 是TCP协议中的一个标志位&#xff0c;用于…

基于spingboot,vue线上辅导班系统

目录 项目介绍 图片展示 运行环境 获取方式 项目介绍 权限划分&#xff1a;用户&#xff0c;管理员 具有前后台展示&#xff0c;前台供用户使用&#xff1b;用户具有自己的后台&#xff0c;查看自己的老师课程等&#xff1b;管理员具有最大的权限后台。 用户&#xff1a…

76岁林子祥升级做爷爷,亲自为孙女取名

林子祥与前妻吴正元的儿子&#xff0c;现年39岁的林德信入行以来绯闻不少&#xff0c;自与圈外女友Candace拍拖后便修心养性&#xff0c;去年他已经低调与拍拖5年多Candace完婚&#xff0c;正式步入人生另一阶段。 昨日&#xff08;5月12日&#xff09;林德信借母亲节这个温馨日…

Linux - make与makefile

文章目录 什么是make和makefile如何使用依赖关系 和 依赖方法伪目标 写个程序-进度条换行和回车的区别 什么是make和makefile make是一个命令 makefile是一个文件 这就是make和makefile的本质 make和 ll , pwd ,su 一样都是命令 makefile和 test &#xff0c; test.c 一样都是…

vue2人力资源项目8员工详情

页面结构 <template><div class"dashboard-container"><div class"app-container"><div class"edit-form"><el-form ref"userForm" label-width"220px"><!-- 姓名 部门 --><el-row…

C#之如何判断数据类型

一、GetType方法 a.GetType()&#xff1a;获取当前变量的类型对象 string str "Hello World";Console.WriteLine(str.GetType()); 结果: 二、typeof方法 typeof(Int)&#xff1a;获取的是Int类型的类型对象 int num 10;Console.WriteLine(num.GetType() typeof(i…

常见磁盘分区问题

给磁盘分区有几个主要的原因&#xff1a; 组织和管理数据&#xff1a;分区可以帮助用户更好地组织和管理数据。例如&#xff0c;你可以在一个分区上安装操作系统&#xff0c;而在另一个分区上存储个人文件。这样&#xff0c;即使操作系统崩溃或需要重新安装&#xff0c;你的个…

【cmake】Windows 环境下编译第三方依赖源码(以编译Xerces库为例)

第三方依赖源码的编译分为两种&#xff0c;一种是使用 Configure 脚本编译&#xff0c;另一种是使用 CMakeLists.txt 编译。Xerces 3.2.3 的编译方式是 CMakeLists.txt 脚本编译。 必要软件&#xff1a; CMake &#xff08;CMake | Download&#xff09;Visual Studio 2019&a…

java版数据结构:堆,大根堆,小根堆

目录 堆的基本概念&#xff1a; 如何将一个二叉树调整成一个大根堆&#xff1a; 转成大根堆的时间复杂度 根堆中的插入&#xff0c;取出数据&#xff1a; 堆的基本概念&#xff1a; 堆是一种特殊的树形数据结构&#xff0c;它满足以下两个性质&#xff1a; 堆是一个完全二叉…

Mirror从入门到入神

Mirror从入门到成神 文章目录 Mirror从入门到成神简介NetworkClientRegisterPrefabConnect (string address)Disconnect ()activeactiveHost NetworkServerSpawn 简介 Mirror是一个unity网络同步框架&#xff0c;基于MonoBehaviour生命周期的回调的基础上进行数值的同步&#…

刷题之找到字符串所有字母异位词

找到字符串所有字母异位词 滑动窗口。滑动窗口大小为待比较数组的大小。 class Solution { public:vector<int> findAnagrams(string s, string p) {//滑动窗口vector<int>result;if(s.size()<p.size())return result;vector<int>pnum(26,0);//记录p的字…

[第五空间 2021]WebFTP

目录扫描git泄露phpinfo.php 一开始想到是sql注入&#xff0c;但是不行。目录扫描&#xff0c;发现 .git 和 phpinfo.php 访问phpinfo.php&#xff0c;ctrlf 搜索 flag&#xff0c;找到 flag。

【风变】Python爬虫精进复习-20240430

参考笔记 下面给出一个巨佬学习风变pyhton基础语法和爬虫精进的笔记&#xff08;链接&#xff09; 风变编程笔记(一)-Python基础语法 风变编程笔记(二)-Python爬虫精进 技术总结 request BeautifulSoup selenium BeautifulSoup 练习0-1&#xff1a;文章下载 import requ…

TypeScript学习日志-第二十六天(weakMap,weakSet,set,map)

weakMap,weakSet,set,map 一、set set 的基本用法如下&#xff1a; 二、map map 与 set 的 区别 就是 map 的 key 可以是引用类型 object array , map 的添加时使用 set 三、weakmap weakset weakmap和weakset 都是弱项 弱引用 其键必须是引用类型&#xff0c;不能是其它类…