当前位置: 首页 > news >正文

vueCropper裁剪图片(不模糊)以及记录使用方法

需求:上传限定比例的图片。前端框架是vue3 + element plus。
问题:使用vueCropper后比例固定。但是上传后的图片很模糊

vueCropper官网

解决办法

vueCropper中有一个fullhigh两个参数,记得开启

     const options: any = reactive({img: '', // 原图文件autoCrop: true, // 默认生成截图框fixedBox: false, // 固定截图框大小canMoveBox: true, // 截图框可以拖动fixed: true, // 截图框宽高固定比例fixedNumber: [4, 3], // 截图框的宽高比例centerBox: true, // 截图框被限制在图片里面canMove: true, // 上传图片不允许拖动canScale: true, // 上传图片不允许滚轮缩放full: true, //是否输出原图比例的截图high: true, //是否按照设备的dpr 输出等比例图片maxImgSize: 8000, //限制图片最大宽度和高度});

顺便记录一下如何使用vueCropper

  //package.json中的版本"vue-cropper": "^1.1.2",
	import { VueCropper } from 'vue-cropper';<vueCropperclass="crop-box"ref="cropper":img="options.img":autoCrop="options.autoCrop":fixedBox="options.fixedBox":canMoveBox="options.canMoveBox":centerBox="options.centerBox":fixed="options.fixed":fixedNumber="options.fixedNumber":canMove="options.canMove":canScale="options.canScale":full="options.full":high="options.high"></vueCropper>

相关文章:

vueCropper裁剪图片(不模糊)以及记录使用方法

需求&#xff1a;上传限定比例的图片。前端框架是vue3 element plus。 问题&#xff1a;使用vueCropper后比例固定。但是上传后的图片很模糊 vueCropper官网 解决办法 vueCropper中有一个full和high两个参数&#xff0c;记得开启 const options: any reactive({img: , // 原…...

【HTML】HTML页面和常见标签

文章目录 什么是前端HTML 页面编写如何快速生成代码框架常见标签注释标签标题标签段落标签换行标签格式化标签 什么是前端 Web 前端&#xff0c;用来直接给以用户呈现的一个一个的网页。一个软件通常是由 后端前端 完成的 后端&#xff1a;通过 Java/C等语言&#xff0c;完成相…...

鸿蒙 ArkUI组件二

ArkUI组件&#xff08;续&#xff09; 文本组件 在HarmonyOS中&#xff0c;Text/Span组件是文本控件中的一个关键部分。Text控件可以用来显示文本内容&#xff0c;而Span只能作为Text组件的子组件显示文本内容。 Text/Span组件的用法非常简单和直观。我们可以通过Text组件来显…...

PHP 实现 redis 分布式锁

分布式锁 如果是强一致性保证&#xff0c;在获取锁或者失败后引入数据库存储扫表、mq 等方式进行补偿 如果可以容忍少量异常就不需要考虑了 像这里的代码&#xff0c;没吃建立一个链接铺货&#xff0c;性能损耗时间延迟也是很大的&#xff0c;也可在一块代码中进行服务&…...

vue3 自定义el-tree树形结构样式

这里样式设置主要用到了 windcss 实现效果 模拟数据 这里也可以用模拟的数据,下面用的是后端请求的真实数据 [{"id": 5,"rule_id": 0,"status": 1,"create_time": "2019-08-11 13:36:09","update_time": "…...

【网络安全】分享4个高危业务逻辑漏洞

未经许可,不得转载。 文章目录 正文逻辑漏洞1逻辑漏洞2逻辑漏洞3逻辑漏洞4其它正文 该目标程序是一家提供浏览器服务的公司,其核心功能是网页抓取和多账户登录操作,类似于浏览器中的隐身模式,但更加强大和高效。通过该平台,用户可以轻松管理并同时运行数百个隐身浏览器实…...

【装机教程】Visual Studio Community 2019离线安装

Visual Studio 2019离线安装 由于现在 官网只支持在线安装最新版的Visual Studio 2022&#xff0c;因此 Visual Studio Community 2019需要离线安装。 下载离线安装镜像&#xff0c;并解压。点击vs_setup.exe运行。 选择安装位置&#xff0c;四处位置需要确定。 选择语言包&…...

NumPy 线性代数

NumPy 线性代数 NumPy 是 Python 中用于科学计算的核心库之一&#xff0c;它提供了一个强大的数学函数库&#xff0c;特别是在处理大型多维数组和矩阵时表现出色。线性代数是 NumPy 的一个重要组成部分&#xff0c;它包含了大量的函数和运算符&#xff0c;用于执行矩阵和向量的…...

家装材料之水泥,最容易被忽视的基础材料!

由于水泥在装修中扮演辅料的角色&#xff0c;很多业主往往会忽视它们的质量。事实上&#xff0c;装修无小事&#xff0c;不能抱有抓大放小的态度。      更何况水泥是装修工程的基础材料&#xff0c;在家居装修中&#xff0c;地面、墙面的找平以及瓷砖、大理石的铺贴&#…...

openstack之keystone介绍

功能 keystone在OpenStack中负责&#xff1a; 管理&#xff1a;用户、租户和权限&#xff1b; 认证&#xff1a;组件相互访问的身份认证&#xff1b; 鉴权&#xff1a;提供 RBAC&#xff08;Role Based Access Control&#xff09; 权限体系&#xff1b; 服务注册与发现&#…...

【图像拼接】基于SIFT/SURF特征算法的图像拼接,matlab实现

博主简介&#xff1a;matlab图像代码项目合作&#xff08;扣扣&#xff1a;3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于SIFT/SURF特征算法的图像拼接&#xff0c;用matlab实现。 一、案例背景和算法介…...

《微信小程序实战(2) · 组件封装》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…...

LaTex2024 下载安装运行HelloWorld—全流程笔记

LaTex安装教程&#x1f680; 这是读博之后写的第一篇文章&#xff0c;来到新课题组之后&#xff0c;新课题组主要是用Latex&#xff0c;在之前的课题组&#xff0c;还是比较常用world&#xff0c;所以就研究了一下Latex的下载和安装&#xff0c;虽然网上已经有了不少教程&#…...

Golang | Leetcode Golang题解之第404题左叶子之和

题目&#xff1a; 题解&#xff1a; func isLeafNode(node *TreeNode) bool {return node.Left nil && node.Right nil }func sumOfLeftLeaves(root *TreeNode) (ans int) {if root nil {return}q : []*TreeNode{root}for len(q) > 0 {node : q[0]q q[1:]if no…...

基于yolov8+lprnet的中文车牌识别系统python源码+pytorch模型+精美GUI界面

【算法介绍】 基于YOLOv8和LPRNet的中文车牌识别系统是一种高效且准确的解决方案&#xff0c;结合了目标检测与字符识别的先进技术。YOLOv8作为最新的实时目标检测算法&#xff0c;以其高速度和精确度著称&#xff0c;能够迅速在图像或视频中定位车牌位置。LPRNet则是一种专为…...

电信创维光猫DT741超级密码

正常的D740系是创维系列光猫如&#xff1a;SK-D740 之类的超密获取办法-光猫/adsl/cable无线一体机-恩山无线论坛 但是我这个固件是DT741v1.0 我只能说很S -B&#xff0c;这个版本如果是1.02那就可以很轻松的去用通用办法解决&#xff0c;但是呢&#xff01;还有办法就是用最传…...

PostgreSQL的流复制断点续传

PostgreSQL的流复制断点续传 PostgreSQL的流复制&#xff08;Streaming Replication&#xff09;具有断点续传的能力&#xff0c;这意味着当主节点和备用节点之间的连接由于网络故障等原因中断后&#xff0c;备用节点会自动从中断点继续接收WAL&#xff08;Write-Ahead Loggin…...

【bug】通过lora方式微调sdxl inpainting踩坑

报错内容 ValueError: Attempting to unscale FP16 gradients. 报错位置 if accelerator.sync_gradients:params_to_clip (itertools.chain(unet_lora_parameters, text_lora_parameters_one, text_lora_parameters_two)if args.train_text_encoderelse unet_lora_parameters…...

[Python可视化]数据可视化在医疗领域应用:提高诊断准确性和治疗效果

随着医疗数据的增长&#xff0c;如何从庞大的数据集中快速提取出有用的信息&#xff0c;成为了医疗研究和实践中的一大挑战。数据可视化在这一过程中扮演了至关重要的角色&#xff0c;它能够通过图形的方式直观展现复杂的数据关系&#xff0c;从而帮助医生和研究人员做出更好的…...

css <样式一>

1. 盒子模型 1.1>boarder 在这里插入图片描述 boarder 相邻框合并问题 boarder-classpse 相同的边框会合并在一起 text-alicn center 文字居中对齐 ########### boarder 会撑大盒子的实际大小 一个盒子加了boarder之后会变大的我可以把我的盒子内容进行修改, 减少像素内…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...