vue图片裁剪:使用vue-cropper做图片裁剪
文章目录
- 一、安装
- 二、图片裁剪
- 三、将截图框回显到原图上
- 四、其它
由于项目需要,需要做图片裁剪。之前的项目已经由cropper.js实现过,因为这次使用的是vue,所以采用了vue-cropper这个组件,使用起来很简单,但是坑也很多。
一、安装
npm install vue-cropper
main.js
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
二、图片裁剪
- 引入VueCropper组件,并设置相关的属性。
<div style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;"><vueCropper@mouseenter.native="enter"@mouseleave.native="leave"ref="cropper":img="uploadImg":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":fixed="option.fixed":fixedNumber="option.fixedNumber":centerBox="option.centerBox":infoTrue="option.infoTrue":fixedBox="option.fixedBox"style="background-image:none"></vueCropper>
</div>
option: {info: true, // 裁剪框的大小信息outputSize: 0.8, // 裁剪生成图片的质量outputType: "jpeg", // 裁剪生成图片的格式canScale: false, // 图片是否允许滚轮缩放autoCrop: false, // 是否默认生成截图框fixedBox: false, // 固定截图框大小 不允许改变fixed: false, // 是否开启截图框宽高固定比例fixedNumber: [7, 5], // 截图框的宽高比例full: true, // 是否输出原图比例的截图canMove: false, //时候可以移动原图canMoveBox: true, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: false, // 截图框是否被限制在图片里面infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高}
❗️默认的裁剪图片的背景带有贼丑的马赛克,其实是它用了一张马赛克的图片做背景,去掉只需在VueCropper上设置去除背景图片的样式style="background-image:none"
.
- 上传完成后鼠标进入VueCropper即可以开始裁剪
在VueCroper上设置@mouseenter.native="enter"
事件(⭐️组件上使用原生事件需要加上native关键字)enter() {if (this.uploadImg == "") {return;}this.$refs.cropper.startCrop(); //开始裁剪 },
- 离开VueCropper即停止裁剪,得到裁剪图片。
在VueCroper上设置@mouseleave.native="leave"
事件leave() {this.$refs.cropper.stopCrop();//停止裁剪this.$refs.cropper.getCropData(data => { //获取截图的base64格式数据this.cutImg = data;});// this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据// this.cutImg = data;// });},
我这里是离开div就会裁剪,点击裁剪按钮后传递裁剪图片,而不是点击裁剪按钮才裁剪,因为我点击裁剪按钮裁剪的话,拿到的图片并没有裁剪过,我也不知道为什么,就想出了这个办法。
vue-cropper图片裁剪问题
三、将截图框回显到原图上
基本原理:
this.$refs.cropper.getCropAxis() //获取截图框基于容器的坐标点 {x1: 174, x2: 131, y1: 86, y2: 58}
this.$refs.cropper.cropW //截图框宽
this.$refs.cropper.cropH //截图框高
通过上面的方式获取截图框的宽、高和基于容器的坐标点,然后让VueCropper的自动截取框显示出来并设置自动截取框的大小和位置。
以姓名字段为例:
{id: 1,name: "姓名",cropInfo: {width: 108, //this.$refs.cropper.cropWheight: 56, //this.$refs.cropper.cropH offsetX: 174, //this.$refs.cropper.getCropAxis().x1offsetY: 86 //this.$refs.cropper.getCropAxis().y1
}
- 在"姓名"el-card上设置enter事件
<el-card @mouseenter.native="enterCard(refWord)" />
enterCard(refWord) {this.$refs.cropper.goAutoCrop();//重新生成自动裁剪框this.$nextTick(() => {// if cropped and has position message, update crop box//设置自动裁剪框的宽高和位置this.$refs.cropper.cropOffsertX = refWord.cropInfo.offsetX;this.$refs.cropper.cropOffsertY = refWord.cropInfo.offsetY;this.$refs.cropper.cropW = refWord.cropInfo.width;this.$refs.cropper.cropH = refWord.cropInfo.height;});}
- 在所有el-card外层的el-tabs上设置leave事件
<el-tabs @mouseleave.native="leaveCard()" />
leaveCard() {this.$refs.cropper.clearCrop(); //取消裁剪框}
❗️注意不要在el-card上设置leave事件,不然进行鼠标移动到下一个el-card的时候会取消裁剪框又重新生成,导致页面出现闪烁的现象。
四、其它
- 将截图框限制在图片内:https://github.com/xyxiao001/vue-cropper/issues/429
解决方案:centerBox设置为true,并且只有autoCrop=true时才会生效 - 项目需要将裁剪框框出的位置信息和裁剪框大小给后台,让后台裁剪或者进行OCR,但是传给后台后裁剪出来的图片总是向右下角偏移:https://github.com/xyxiao001/vue-cropper/issues/386
解决方案:图片是缩放过的,传递position时,需要将position*scale. - 裁剪大部分图片没有问题,但是裁剪某些图片时总是有偏差:https://github.com/xyxiao001/vue-cropper/issues/439
解决方法: 原来默认的裁剪图片大小有限制,宽高最高为2000px,将这个值设置为了10000,问题解决.
参考资料:
vue-cropper的github地址:https://github.com/xyxiao001/vue-cropper
(github里有vue-cropper常见的用法,如果有不懂的地方可以提issue,作者回复速度很快,亲测)
vue图片裁剪:使用vue-cropper做图片裁剪相关推荐
- cropper固定宽高裁剪_使用Cropper进行图片剪裁上传
在项工按不移流果箭近作量同动量和头近作量同动目中,需要多上传的图片按照比例和尺寸进行裁剪,这类场景在一些CMS系统中是比较常见的,尤其是大部分的文章现在要适配PC.Mobile两种平台,文章的封面图等 ...
- linux用命令下载图片,巧用linux命令做图片下载器
在平时上网的时候,发现有些图片不错,想保存到本地,一个一个的保存确实够费劲的,如果把整个网页都保存了,有些又是自己不需要的,就算下载下来了,还得从上百个网页元素中去筛选,哪些是css文件,哪些是js文 ...
- vue做图片裁剪——vue-cropper
这里使用的是vue-cropper 官方文档以及案例在这里 先安装 npm install vue-cropper 裁剪图片组件 注意事项: 1.代码中设置的是只有正确的url是才展示,裁剪组件 2 ...
- vue之使用Cropper进行图片剪裁上传压缩
vue之使用Cropper进行图片剪裁上传 在项目中,对上传的图片按照比例和尺寸进行裁剪,以便于应用到不同的场景和平台上.这里采用cropper插件裁剪图片 一.cropper的使用 使用教程:htt ...
- vue通过链接显示服务器上的图片_图片网站该如何做SEO优化?详细讲解图片优化技巧...
通常,在网站搜索引擎优化的过程中,很多站长和SEOer经常忽略图片的优化,但事实上,每个网站都有很多图片,所以优化网站图片就像优化其他内容一样,成为搜索引擎优化的一个重要工作内容. 如果你能成功地优化 ...
- vue图片超出屏幕尺寸自动适应图片比例缩放
vue图片超出屏幕尺寸自动适应图片比例缩放 <div><el-button class="blue-btn"@click="open"> ...
- cropper.js 实现裁剪图片并上传(PC端)
博客地址:http://blog.mambaxin.com 由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比 ...
- vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计 写在前面 vue 富文本 quill / vue-quill-editor 如何使用 图片上传到服务器 实时字数统计 图片编 ...
- cropper(图片裁剪插件)
https://github.com/fengyuanchen/cropper cropper使用说明 一.特性 jQuery v1.9.1以上版本支持 插件有38个options,27种method ...
- vue 动态获取的图片路径不显示_Vue 动态图片加载路径问题和解决方法
最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件.因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载.下面 ...
最新文章
- boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
- 高清重制版阿波罗11号录像,英伟达RTX还原50年前登月细节
- 中国LED产业园区现状模式及投资策略分析报告2022-2028年版
- JAVA I/O流工具类TextFile
- 前端随笔整理[5.14]
- cscript 执行代码_WSCRIPT与CScript区别
- 雪花算法生成数字id_全局唯一iD的生成 雪花算法详解及其他用法
- 动手学深度学习 环境安装
- 浅析Java设计模式——观察者模式
- [纯理论] FCOS
- Dense biased networks with deep priori anatomy and hard region adaptation: Semi-supervised learning
- easyui的filebox过滤文件
- LintCode 两个数组的交集
- Android高版本联网失败报错:Cleartext HTTP traffic to xxx not permitted解决方法
- 尚G谷大前端视频教程
- 【备品备件】入库流程--采购入库--0180363009
- Caffe:查看并可视化 LMDB 文件
- 部署kubernetes官网博客
- 美版iPhone 4s未激活解决方案
- Memcached哈希性能优化(八)——总结报告
热门文章
- vue 浏览器页面刷新
- Ddos攻击怎么防护?DDOS八大防御策略
- ReflectionException: There is no setter for property named ‘createTime‘ in ‘class XXX‘
- 100个替代昂贵商业软件的开源应用
- Tecplot自定义变量
- PROFINET转CAN网关监测CAN设备在线设置文档
- 800G 112Gb/S(II), Terabit Ethernet – How? (Part2)
- 炫酷背光文字html,PS制作背光放射出来的文字效果
- QT中的this指针什么意思?namespace又是什么意思?
- APR-服务器端编程