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

vue-cropper 拖动图片和截图框

现象

开发遇到vue--cropper不能拖动图片和截图框

解决方法

        can-move-box设置为true,表示可以拖动截图框

        can-move设置为true,表示可以拖动图片

*注意:

我外层套了一个el-col, el-col的宽高一定要大于截图框的宽高,否则移动不了截图框和图片

实现代码

 <el-col :xs="24" :md="12" :style="{height: '720px',width:'1000px',position:'center'}">

 <vue-cropper

            ref="cropper"

            :img="options.imageUrl"

            :info="true"

            :autoCrop="true"

            :autoCropWidth="850px"

            :autoCropHeight="680px"

            :fixedBox="options.fixedBox"

            :can-move-box="true"

            :can-move="true"

            :fixed-box="true"

            @realTime="realTime"

            v-if="visible"   />

</el-col>

其他相关内容

组件源码地址https://github.com/xyxiao001/vue-croppericon-default.png?t=N176https://github.com/xyxiao001/vue-cropper组件演示地址

vue-cropper

属性

名称功能默认值可选值
img裁剪图片的地址url 地址, base64, blob
outputSize裁剪生成图片的质量10.1 ~ 1
outputType裁剪生成图片的格式jpg (jpg 需要传入jpeg)jpeg, png, webp
info裁剪框的大小信息truetrue, false
canScale图片是否允许滚轮缩放truetrue, false
autoCrop是否默认生成截图框falsetrue, false
autoCropWidth默认生成截图框宽度容器的 80%0 ~ max
autoCropHeight默认生成截图框高度容器的 80%0 ~ max
fixed是否开启截图框宽高固定比例falsetrue, false
fixedNumber截图框的宽高比例[1, 1][ 宽度 , 高度 ]
full是否输出原图比例的截图falsetrue, false
fixedBox固定截图框大小不允许改变false
canMove上传图片是否可以移动truetrue, false
canMoveBox截图框能否拖动truetrue, false
original上传图片按照原始比例渲染falsetrue, false
centerBox截图框是否被限制在图片里面falsetrue, false
high是否按照设备的dpr 输出等比例图片truetrue, false
infoTruetrue 为展示真实输出图片宽高 false 展示看到的截图框宽高falsetrue, false
maxImgSize限制图片最大宽度和高度20000 ~ max
enlarge图片根据截图框输出比例倍数10 ~ max(建议不要太大不然会卡死的呢)
mode图片默认渲染方式containcontain , cover, 100px, 100% auto
limitMinSize裁剪框限制最小区域10Number, Array, String

相关文章:

vue-cropper 拖动图片和截图框

现象 开发遇到vue--cropper不能拖动图片和截图框 解决方法 can-move-box设置为true&#xff0c;表示可以拖动截图框 can-move设置为true&#xff0c;表示可以拖动图片 *注意&#xff1a; 我外层套了一个el-col, el-col的宽高一定要大于截图框的宽高&#xff0c;否则移动不了…...

[Linux基础]history相关的环境变量设置

目录 背景 简介 命令操作 1. 语法&#xff1a; 2. 功能 3. 参数 环境变量设置 背景 工作中时常收到客户的反馈&#xff0c;我的系统什么也没干&#xff0c;就出现文件丢失&#xff0c;程序错误等等问题&#xff1b;我们在问题排查的时候查看history信息也是重要环节…...

怎么给电脑分盘与合并磁盘?教你三招

电脑只有一个C盘&#xff0c;想要再分出一个或多个分区&#xff0c;怎么办&#xff1f;电脑C盘的容量太小&#xff0c;太容易满了&#xff0c;想重新分盘&#xff0c;或者把其他盘跟它合并&#xff0c;但因为文件太多备份实在是太麻烦&#xff0c;怎么办&#xff1f;怎么给电脑…...

HCIP-5.4OSPF路由聚合、缺省路由

1、路由聚合 OSPF 是一种链路状态路由协议&#xff0c;因此 OSPF路由器不传输路由&#xff0c;而是传输链路状态信息。因此&#xff0c;OSPF 路由通过汇总 LSA 来控制链路状态信息的传输&#xff0c;从而减小 LSDB 数据库的大小&#xff0c;进而控制路由的汇总。 由于OSPF路由…...

【数据结构】——树与二叉树

文章目录树二叉树二叉树的性质完全二叉树二叉树的存储遍历二叉树和线索二叉树6.4 树和森林哈夫曼树应用树 树的定义&#xff1a;树是以分支关系定义的层次结构。 D; 树(Tree)是n(n≥0)个结点的有限集。 R 数据关系 有且仅有一个特定的称为根(Root) 的结点 当n>1时&…...

等离子纳秒高压脉冲电源维修HVP-20 P

等离子纳秒高压脉冲电源维修HVP-20 P;HVP-10B;HVP-05;HVP-02等型号均可维修 HVP-20 P(N)用于气体放电与低温等离子体的高性能纳秒高压脉冲电源。 HVP-20P(N)采用专有的marx电路&#xff0c;实现高压脉冲电源参数的便捷可调&#xff0c;包括峰值电压0 – 20 KV &#xff08;-2…...

JavaScript内改变this指向

之前我们说的都是代码内 this 的默认指向今天我们要来说一下如何能改变 this 指向也就是说, 你指向哪我不管, 我让你指向哪, 你就得指向哪开局在函数的原型( Function.prototype ) 上有三个方法callapplybind既然是在函数的原型上, 那么只要是函数就可以调用这三个方法&#xf…...

Cobalt Strike---(2)

数据管理 Cobalt Strike 的团队服务器是行动期间Cobalt Strike 收集的所有信息的中间商。Cobalt Strike 解析来 自它的 Beacon payload 的输出&#xff0c;提取出目标、服务和凭据。 如果你想导出 Cobalt Strike 的数据&#xff0c;通过 Reporting → Export Data 。Cobalt Str…...

docker的命令使用和相关例子

Docker是一种流行的容器化平台&#xff0c;可以帮助开发人员更轻松地构建、发布和管理应用程序。下面是一些Docker的命令使用和相关例子&#xff1a; Docker镜像相关命令&#xff1a; 搜索Docker镜像&#xff1a; docker search 例子&#xff1a;docker search ubuntu 下载D…...

23模式--代理模式

本篇主要聊一些23中模型中的代理模式&#xff1a; 看一下百度百科的解释&#xff1a; 代理模式的定义&#xff1a;为其他对象提供一种代理以控制对这个对象的访问。在某些情况下&#xff0c;一个对象不适合或者不能直接引用另一个对象&#xff0c;而代理对象可以在客户端和目…...

【Linux】信号的产生、保存、捕捉处理 (四种信号产生、核心存储、用户态与内核态、信号集及其操作函数)

文章目录1、什么是信号&#xff1f;2、信号的产生2.1 通过键盘产生信号2.2 通过系统调用产生信号2.3 硬件异常产生的信号2.4 由软件条件产生的信号2.5 进程的核心转储3、信号的保存4、信号的捕捉4.1 用户态和内核态4.2 用户态到内核态的切换4.3 信号捕捉过程5、信号集操作函数以…...

redis经典五种数据类型及底层实现

目录一、Redis源代码的核心部分1.redis源码在哪里2.src源码包下面该如何看&#xff1f;二、我们平时说redis是字典数据库KV键值对到底是什么1.6大类型说明(粗分)2.6大类型说明3.上帝视角4.Redis定义了redisObject结构体4.1 C语言struct结构体语法简介4.2 字典、KV是什么4.3 red…...

三十而立却被裁,打工人要如何应对职场危机?

又到金三银四就业季&#xff0c;对于部分职场人来说&#xff0c;年龄成为了他们找工作的最大限制。 因为绝大部分企业招聘中层干部以下岗位的时候&#xff0c;都会要求年龄不超过35周岁&#xff0c;再加上每年千万毕业生涌入社会&#xff0c;竞争程度相当激烈&#xff0c;这就导…...

java面试-java基础

char 变量能不能存贮一个中文汉字&#xff1f;为什么&#xff1f; char 变量可以存贮一个汉字&#xff0c;因为 Java 中使用的默认编码是 Unicode &#xff0c;一个 char 类型占 2 个字节&#xff08;16 bit&#xff09;&#xff0c;一个汉字是2个字节&#xff0c;所以放一个中…...

Kafka 消息不丢失

Kafka 消息不丢失生产者丢失消费者丢失不丢失配置Kafka 保证消息不丢失&#xff1a;只对已提交的消息 (committed message) 做有限度的持久化保证 已提交的消息&#xff1a;当 n 个 Broker 成功接收到该消息并写入到日志文件后&#xff0c;就告诉生产者该消息已成功提交有限度…...

ASEMI高压MOS管10N65参数,10N65规格,10N65封装

编辑-Z ASEMI高压MOS管10N65参数&#xff1a; 型号&#xff1a;10N65 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;650V 栅源电压&#xff08;VGS&#xff09;&#xff1a;30V 漏极电流&#xff08;ID&#xff09;&#xff1a;10A 功耗&#xff08;PD&#xff…...

LeetCode-416. 分割等和子集

目录题目分析回溯法动态规划动态规划(压缩)题目来源 416. 分割等和子集 题目分析 这道题目是要找是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 那么只要找到集合里能够出现 sum / 2 的子集总和&#xff0c;就算是可以分割成两个相同元素和子集了…...

2021年 第12届 蓝桥杯 Java B组 省赛真题详解及小结【第2场省赛 2021.05.09】

一、试题A&#xff1a;求余&#xff08;本题总分&#xff1a;5 分&#xff09; 得&#xff1a;5分 本题总分&#xff1a;5 分 【问题描述】 在 C/C/Java/Python 等语言中&#xff0c;使用 % 表示求余&#xff0c;请问 2021%20 的值是多少&#xff1f; 【答案提交】 这是一道结果…...

elasticSearch写入原理

elasticSearch写入原理 最近学习完了es相关的课程整理除了es的核心内容&#xff0c;学习这东西知其然知其所以然&#xff0c;自己按照自己的理解整理了es相关的面试题。先热个身&#xff0c;整理一下es的写入原理&#xff0c;有不对的地方请大家指正。 这些原理的东西我觉得还是…...

第十四届蓝桥杯模拟赛(第三期)Python

1 进制转换 问题描述   请找到一个大于 2022 的最小数&#xff0c;这个数转换成十六进制之后&#xff0c;所有的数位&#xff08;不含前导 0&#xff09;都为字母&#xff08;A 到 F&#xff09;。   请将这个数的十进制形式作为答案提交。 答案&#xff1a;2730 def ch…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...