当前位置: 首页 > 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…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...