图片裁切器Cropper.js的使用

cropperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。

支持 39 个选项
支持27种方法
支持6个事件
支持触摸（移动）
支持缩放
支持旋转
支持缩放（翻转）
支持多种作物
支持在画布上裁剪
支持通过画布在浏览器端裁剪图像
支持翻译 Exif 方向信息
跨浏览器支持

官方github文档：https://github.com/fengyuanchen/cropperjs

使用方法

1.下载

npm install cropperjs

2.在项目中引入

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

3.获取dom对象调用构造函数

<img :src="data:image" alt="" ref="img" />

注意需要用块元素（容器）包裹图像或画布元素

例如：
< div > < img  id =" image " src =" picture.jpg " >
</ div >
确保图像大小完全合适容器
img {display : block; /* 这个规则很重要，请不要忽略这个 */ max-width : 100 % ;
}

调用构造函数传入配置对象得到cropper 实例对象

    // 获取Dom对象const image = this.$refs.img// 得到实例对象this.cropper = new Cropper(image, {aspectRatio: 1, // 裁剪框尺寸viewMode: 1, // 限制裁剪框不超过画布的大小dragMode: 'move', // 定义裁剪器的拖动模式。 移动画布cropBoxResizable: false, // 通过拖动来调整裁剪框的大小cropBoxMovable: false, // 通过拖动移动裁剪框。background: false // 显示容器的网格背景})

因为我们在方法中需要调用cropper 实例对象上的getCroppedCanvas() 方法得到裁切后的图片信息将cropper 保存到了data中

4.获取裁切后的图片 (包装为Promise) 可以在下面通过 await 调用

    getCroppedCanvas () {return new Promise(resolve => {this.cropper.getCroppedCanvas().toBlob(blob => {resolve(blob)})})}

5.获取到裁切之后的图像

const file = await this.getCroppedCanvas()

代码演示

<template><div class="updata-photo"><img :src="data:image" alt="" ref="img" /><van-nav-barleft-text="取消"right-text="确认"@click-left="$emit('close')"@click-right="onClickRight"/></div>
</template><script>
import { setPhotofile } from '@/api/user.js'
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
export default {name: 'UpdataPhoto',props: {value: {type: String,require: true},file: {type: File,require: true}},data () {return {image: window.URL.createObjectURL(this.file),cropper: null}},methods: {// 获取裁切后的图片 (包装为Promise) 可以在下面通过 await 调用getCroppedCanvas () {return new Promise(resolve => {this.cropper.getCroppedCanvas().toBlob(blob => {resolve(blob)})})},// 发起请求async onClickRight () {this.$toast.loading({message: '修改中...',forbidClick: true})// 获取到裁切之后的图像const file = await this.getCroppedCanvas()// 如果要求 Content-Type 是 multipart/form-data,则一定要提交FormData 数据对象，专门用于文件上传的，不能提交{}const fd = new FormData()fd.append('photo', file)const res = await setPhotofile(fd).catch(err => err)if (res.status !== 201) {this.$toast.fail('修改失败')return}this.$toast.success('修改成功')// 修改完成之后 更新父组件中的地址并关闭弹出层this.$emit('input', res.data.data.photo)this.$emit('close')}},mounted () {const image = this.$refs.imgthis.cropper = new Cropper(image, {aspectRatio: 1, // 裁剪框尺寸viewMode: 1, // 限制裁剪框不超过画布的大小dragMode: 'move', // 定义裁剪器的拖动模式。 移动画布cropBoxResizable: false, // 通过拖动来调整裁剪框的大小cropBoxMovable: false, // 通过拖动移动裁剪框。background: false // 显示容器的网格背景})}
}
</script><style lang="less" scoped>
.updata-photo {img {display: block;width: 100%;}.van-nav-bar {position: fixed;bottom: 0;left: 0;right: 0;background-color: transparent;}
}
</style>

图片裁切器Cropper.js的使用相关推荐

web图片裁切插件 cropper.js 详细介绍
cropper.js一个用来处理图片的插件,可以使用它来实现图片的各种模式下的裁切效果,当我们在做一个上传头像或者上传图片功能的时候,需要用户裁切出用户想要的图片位置就可以利用这个插件来实现','cr ...
Vue项目中使用图片裁切器 cropperjs (头像裁切)
cropperjs官方文档 cropperjs结合element-ui 组件后的显示效果: 1. npm 安装 cropperjs cmd命令行输入:npm install cropperjs --s ...
图片裁剪工具之cropper.js
图片裁剪工具之cropper.js cropper.js 示例Demo 具体使用示例 cropper.js Cropper.js 是一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手 ...
头像上传和图片裁剪功能(cropper.js)
<template><div class="user-profile"><input type="file" name=" ...
layui后台管理、图片裁切、cropper富文本编辑器实现
需求:后台管理系统一般都会有图文混排功能(比如新闻应用,电商商品详情),这个一般使用富文本编辑器来实现:还有一个就是图片的裁切(比如用户的头像,比如博客的封面),因为在开发这两个功能的时候,也遇到了很 ...
html手机端的图片阅读器,兼容移动端与电脑端的图片查看器viewer.js插件
Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保) 支持缩略 ...
图片查看器 Viewer.js
插件简介 Viewer.js 是一款强大的图片查看器,提供了纯 JS 版本和 jQuery 版本,具有以下特点: 支持移动设备触摸事件支持响应式支持放大.缩小支持旋转(类似微博的图片旋转) 支持 ...
input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
前端裁切图片插件之cropper介绍
给大家介绍一个前端非常实用的依赖于jquery的图片裁切插件cropper. 因为前端无法做到图片的裁切,所以实际中需要用cropper和后台的GraphicsMagick相互配合. 先贴上cropp ...
强大的jQuery图片查看器插件Viewer.js
简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动 ...

图片裁切器Cropper.js的使用

使用方法

代码演示

图片裁切器Cropper.js的使用相关推荐

最新文章

热门文章