图片裁剪-cropperjs详解

图片裁剪cropperjs

GitHub：https://github.com/fengyuanchen/cropperjs

安装

cnpm install cropperjs

使用

//<!-- Wrap the image or canvas element with a block element (container) -->
//图片必须被块级元素所包裹
<div><img id="image" src="picture.jpg">
</div>/* Ensure the size of the image fit the container perfectly */
//设置img为块级元素  img是行内块元素
img {display: block;/* This rule is very important, please don't ignore this */max-width: 100%;
}

//引入css、js样式
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
//获取dom元素  在vant组件中通过给img绑定ref属性获取dom元素
//const image = this.$refs.file;
const image = document.getElementById('image');
const cropper = new Cropper(image, {// 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);viewMode: 1, //定义裁剪器的视图模式。如果将viewMode设置为0，则裁剪框可以延伸到画布外部，而值为1、2或3将限制裁剪框的大小为画布的大小。viewMode为2或3会将画布限制为容器。请注意，如果画布和容器的比例相同，则2和3之间没有差别。dragMode: 'move', //定义的拖动模式裁剪器.canvas和容器一样，2和3没有区别。move:移动画布 crop:创建新的裁剪框（默认） none:什么也不做aspectRatio: 3 / 2,//定义裁剪框的固定纵横比。默认情况下，裁剪框为自由比率。autoCropArea: 1,//定义0到1之间的fA编号。定义自动裁剪区域大小（百分比）。默认0.8cropBoxMovable: false,//允许通过拖动移动裁剪框。默认truecropBoxResizable: false,//以通过拖动来调整裁剪框的大小 默认truebackground: false,//显示容器的网格背景movable: true //移动图像},
});

调用接口发送请求

一般后台接口需要传递form-data对象

我们需要将图片转成multipart/form-data格式数据

getCroppedCanvas([options])

获取裁剪后的图片，这种方法适用于移动端项目

不只适与用于vue项目，这是原生js代码可以适用于任何项目

cropper.getCroppedCanvas().toBlob((blob) => {const formData = new FormData();// Pass the image file name as the third parameter if necessary.//如果需要，将图像文件名作为第三个参数传递。formData.append('croppedImage', blob/*, 'example.png' */);//发起请求$.ajax('/path/to/upload', {method: 'POST',data: formData,processData: false,contentType: false,success() {console.log('Upload success');},error() {console.log('Upload error');},});
}/*, 'image/png' */);

getData([rounded])

获取裁剪后的图片，这种方法适用于PC端项目

使用

<span @click="confirm">完成</span>confirm () {console.log(this.cropper.getData())
}

图片裁剪-cropperjs详解相关推荐

php中关于img2thumb函数的图片裁剪规则详解
首先人为设定一个尺寸比如250*150,那么系统就会根据你设定的尺寸, 自动对上传的图片进行宽高比换算,同时遵循等比例缩放原则. 1.比如例1: 上传了1476*830尺寸的图片,那么计算机就会自动 ...
python使用视频_Python中操作各种多媒体,视频、音频到图片的代码详解
我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑.字幕编辑.分离音频.视频音频混流等.又比如对音频文件的操作:音频剪辑,音频格式转换.再比如我们最常用的图片文件,格式转换.各 ...
python播放视频代码_Python中操作各种多媒体,视频、音频到图片的代码详解
我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑.字幕编辑.分离音频.视频音频混流等.又比如对音频文件的操作:音频剪辑,音频格式转换.再比如我们最常用的图片文件,格式转换.各 ...
计算机图形学算法详解,计算机图形学裁剪算法详解
<计算机图形学裁剪算法详解>由会员分享,可在线阅读,更多相关<计算机图形学裁剪算法详解(10页珍藏版)>请在人人文库网上搜索. 1.裁剪算法详解在使用计算机处理图形信息时,计算 ...
调用百度ai接口实现图片文字识别详解
调用百度ai接口实现图片文字识别详解首先先介绍一下这篇博文是干嘛的,为了不浪费大家时间.公司最近和短视频公司合作,需要监控app的截图上的文字是否符合规范,也就是确保其没有违规的文字.到网上找了一些 ...
html5局部放大图片,js实现图片局部放大效果详解
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...
python字库转文字图片_对Python生成汉字字库文字,以及转换为文字图片的实例详解...
对Python生成汉字字库文字,以及转换为文字图片的实例详解发布时间:2020-10-05 17:20:03
前端图片裁剪 cropperjs的简单使用
https://github.com/fengyuanchen/cropperjs 演示 <!DOCTYPE html> <html lang="zh">& ...
Android 图片着色 Tint 详解2—xml设置、selector
上篇文章介绍了给drawable设置tint 以达到颜色变化效果,这篇介绍下通过xml设置tint.代码设置tint以及如何设置tint selector. 在xml中设置tint 可以利用 andr ...

图片裁剪-cropperjs详解

图片裁剪cropperjs

getCroppedCanvas([options])

getData([rounded])

图片裁剪-cropperjs详解相关推荐

最新文章

热门文章