cropperjs的简单使用
前言
最近发现了cropperjs
,可以用于裁剪图片,特点来踩一下坑。
官方文档
参考文章:
cropper.js 裁剪图片并上传(文档翻译+demo)
1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
可以仿gitee的头像上传
下面的例子基于vue
基本使用
安装
npm install cropperjs
语法
new Cropper(element[, options])element:元素,HTMLImageElement 或 HTMLCanvasElement
options:配置项,可选
官方例子
<img src="./aa.png" alt="图片" class="image" ref="imgRef" />
<el-button type="primary" @click="cropImage">裁剪</el-button>cropImage() {const cropper = new Cropper(this.$refs.imgRef, {// 宽高比aspectRatio: 16 / 9,crop(event) {// console.log(event.detail.x);// console.log(event.detail.y);// console.log(event.detail.width);// console.log(event.detail.height);// console.log(event.detail.rotate);// console.log(event.detail.scaleX);// console.log(event.detail.scaleY);}});console.log(cropper);
}
有两点比较重要:
1、给图片添加这两个属性,官方文档说了很重要
/* Ensure the size of the image fit the container perfectly */
img {display: block;/* This rule is very important, please don't ignore this */max-width: 100%;
}
2、要导入样式,不然不会生效,像下面这样
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
常用属性
以下内容来自上面的这篇文章:cropper.js 裁剪图片并上传(文档翻译+demo) ,文章写的很详细
viewMode:定义cropper的视图模式
dragMode:定义cropper的拖拽模式
类型: String
默认: ‘crop’
选项:
‘crop’: 可以产生一个新的裁剪框3
‘move’: 只可以移动3
‘none’: 什么也不处理
aspectRatio:裁剪框的宽高比
值为1时,是一个圆形。
preview:添加额外的元素(容器)以供预览
文章作者给踩坑了
这里是一个dom元素。必须可以被Document.querySelectorAll获取到;
preview:“.small”,
HTML结构:<div class=“small”>;注意一定要设置small的宽高;最好和裁剪比例一致;还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden;
按照上面简单试了一下,效果如图:
<div class="image-view"></div>
.image-view{width: 190px;height: 160px;//overflow很重要overflow: hidden;
}
background:显示容器的网格背景
默认true,显示马赛克背景,false时显示灰色背景色
rotatable:是否允许旋转图像。
默认true,允许旋转
scalable:是否允许缩放图像。
默认true,允许缩放
zoomable:是否允许放大图像。。
默认true,允许放大
scalable
和 zoomable
都试了一下,scalable
设为false还是可以通过鼠标滑轮缩放图片。但是zoomable
设为false时,滑轮将不能再缩放图片
zoomOnTouch:是否可以通过拖动触摸来放大图像。
默认true,可以
cropBoxMovable:是否通过拖拽来移动剪裁框。
默认:true,裁剪框可以拖拽
cropBoxResizable:是否通过拖动来调整剪裁框的大小。
默认true,可以调整裁剪框大小
ready:插件准备完成执行的函数(只执行一次)。
默认null
例如:
ready: (event) => {console.log('准备完成:',event);},
cropstart:剪裁框开始移动执行的函数。
默认null
cropmove:剪裁框移动时执行的函数。
默认null
cropend:剪裁框移动结束执行的函数。
默认null
crop—剪裁框发生变化执行的函数。
默认:null
zoom:剪裁框缩放的时候执行的函数。
默认:null
方法
reset():将图像和裁剪框重置为初始状态
const cropper = new Cropper(this.$refs.imgRef, {// 宽高比aspectRatio: 16 / 9,viewMode: 1,
});this.cropper = cropper;
this.cropper.reset();
通过Cropper生成的对象来调用相应的方法。
clear():清除裁切框
replace(url,true]):替换图像的src并重新构建cropper
destroy():销毁cropper并从图像中删除整个cropper。
zoom(ratio):缩放图片,并使用相对比例。(裁切框不变化)
this.cropper.zoom(1.5);
注:1、会在上一次图片的大小上放大或缩小 2、如果zoomable
设置未false,该函数将不起作用
rotate(degree):旋转图像以一定的角度
向右旋转 (degree > 0);向左旋转 (degree < 0);
getData([rounded]):输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小
rounded 类型:Boolean 默认:false;设置true可以获取其所有数据;
返回的数据类型:Object;
- x裁切框距离左边的距离
- y裁切框距离顶部的距离
- width裁切框的宽度
- height裁切框的高度
- rotate裁切框的旋转的角度
- scaleX缩放图像的横坐标
- scaleY缩放图像的纵坐标
getCroppedCanvas([options])—画一张剪裁的图片。如果没有剪裁,则返回一个绘制整个im的画布(很有用)
options 类型Object
- width输出Canvas的宽度
- height输出Canvas的高度
- minWidth输出Canvas的最小宽度;默认值是0
- minHeight输出Canvas的最小高度;默认值是0
- maxWidth输出Canvas的最大宽度;默认值是Infinity(无穷大)
- maxHeight输出Canvas的最大高度;默认值是Infinity(无穷大)
- fillColor在输出画布Canvas中填充任何alpha的颜色,默认值是透明的
- imageSmoothingEnabled如果图像被设置为平滑(true,默认)或不设置(false)。
- imageSmoothingQuality设置图像的质量,一个“low”(默认)、“medium”或“high”。
返回值:类型:HTMLCanvasElement画布绘制出了剪裁过的图像
注意:输出canvas画布的宽高比将自动适应剪切框的纵横比。
如果您打算从输出画布canvas中获得一个JPEG图像,您应该首先设置填色选项,否则,JPEG图像中的透明部分将在缺少情况下变为黑色。
为了避免获得空白的输出图像,您可能需要将maxWidth和maxHeightproperties设置为有限的数字,从而来画布元素的大小限制。
$("#getCroppedCanvas").on("click", function () {console.log($('#image').cropper('getCroppedCanvas'));;var cas=$('#image').cropper('getCroppedCanvas');var base64url=cas.toDataURL('image/jpeg');cas.toBlob(function (e) {console.log(e); //生成Blob的图片格式})console.log(base64url); //生成base64图片的格式$('.cavans').html(cas) //在body显示出canvas元素})
自己改成vue的语法就好
Demo
简单写了一个头像上传的组件,感兴趣的可以看一下:
基于cropperjs和vue3的头像上传组件
cropperjs的简单使用相关推荐
- 前端图片裁剪 cropperjs的简单使用
https://github.com/fengyuanchen/cropperjs 演示 <!DOCTYPE html> <html lang="zh">& ...
- cropper.js 图像旋转问题_JavaScript开源良心插件,纯前端网页图片剪裁插件——cropperjs...
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及 ...
- 【cropperjs】优秀、优雅的前端图片裁剪库
cropperjs下载 npm i cropperjs npm官网- https://www.npmjs.com/package/cropperjs cropperjs关键参数 aspectRatio ...
- cropperjs图片上传裁剪插件
cropperjs是一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括IE9以上的现代浏览器.(关键是使用方法简单,几行代码就可以搞定) 实践效果图 如图,可以对指 ...
- 在docker上安装部署tomcat项目 超简单,拿来主义
在docker中部署tomcat,非常简单,而且省去了手动安装jdk等步骤,只需要将war包复制在容器tomcat实例中的webapps下面即可.以下将详细讲解流程: 在windows中打好包以后用w ...
- Linux下tomcat的安装与卸载以及配置(超简单)
无敌简单的几步 1.安装 //首先你需要下载好tomcat包 sudo tar -xvzf apache-tomcat-7.0.85.tar.gz(这里是包名) -C 你要放的位置 2.卸载 rm - ...
- Docker安装Apache与运行简单的web服务——httpd helloworld
Docker运行简单的web服务--httpd helloworld目录[阅读时间:约5分钟] 一.Docker简介 二.Docker的安装与配置[CentOS环境] 三.Docker运行简单的web ...
- Docker的安装、镜像源更换与简单应用
Docker的安装.镜像源更换与简单应用[阅读时间:约20分钟] 一.概述 二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 三.Docker的安装 四.Docker的简单应用 1. ...
- 基于Golang的简单web服务程序开发——CloudGo
基于Golang的简单web服务程序开发--CloudGo[阅读时间:约10分钟] 一.概述 二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 (1)基本要求 (2)扩展要求 三.具体 ...
最新文章
- java程序中的图片与数值关联_Java从图片中读取图片的元数据Exif信息
- 诺基亚没放弃 它买下这家公司,要成为电信界的扛把子
- 在ASP.NET中创建自定义控件初步(转)
- Perl,Python,Ruby,Javascript 四种脚本语言比较
- hive 增加表字段语录_Hive改表结构的两个坑|避坑指南
- python比较两张图片是否一样_python实战===用python对比两张图片的不同
- account for 与led to和result in的区别
- nekohtml和xpath
- 如何查看一个网页源代码的最后更新时间
- 黑科技神器-uTools,必须下载
- 环球电子公司将为新的Virgin TV 360平台提供语音遥控器
- excel文件修复工具_Excel文件打开后出错,部分内容丢失的修复技巧
- 机器学习系列2---经验风险最小化原则和结构风险最小化原则与VC维问题
- 解决VS2013 对话框界面编程Caption中文乱码办法
- 山东标梵讲解浅谈移动端开发技术
- P8700和T9600对比测试
- mysql 1114_ERROR 1114 (HY000): The table 'adv_date_tmp' is full(Mysql临时表应用)
- 炼数成金 Oracle EBS R12 DBA培训视频教程
- 读书笔记:-----《第四次工业革命转型的力量》
- 惊了!这才是真正的 Windows 摸鱼神器!!!
热门文章
- Mysql语句的长度限制
- mysql企业实战_实战MySQL服务器企业技术 实战进阶学习篇 企业级MySQL实战进阶视频教程...
- 2022《粤语好声音-乐队风暴》 全国海选启动发布会圆满落幕
- 力扣-1995. 统计特殊四元组(Java)(简单)
- html网页设计简单吗,如何做一个简单的网页设计
- 新成立公司的会计第一个月要做什么?
- vos3000外呼系统根据被叫手机号码归属地进行优先路由线路
- 网页调试实时刷新谷歌插件LiveReload
- 【Excle】生成guid和datetime导入测试数据到数据库
- 如何写好一篇计算机领域的科研论文