图片裁剪cropperjs的使用

文档地址：https://fengyuanchen.github.io/cropperjs/

使用方式：

.1 下载包

yarn add cropperjs

.2 导入包

importCropperfrom"cropperjs"import"cropperjs/dist/cropper.css"

.3 自定义裁剪比例

 const sizeList = [{name: "1:1",size: 1 / 1,},{name: "16:9",size: 16 / 9,},{name: "4:3",size: 4 / 3,},{name: "2:3",size: 2 / 3,},{name: "自由尺寸",size: NaN,},
]

.4 准备 state 数据


constructor(props) {super(props)this.imgRef = React.createRef()this.state = {buttonLoading: false,currenIndex: 0,}}

.5 准备 html 结构

 render() {const { meCropShow, imgUrl } = this.propsconst { buttonLoading, currenIndex } = this.statereturn (<ModalclassName="meCropModal_view"width="50%"title="图片裁剪"maskClosable={false}closable={false}visible={meCropShow}onCancel={this.cancelFn}footer={[<Button onClick={this.cancelFn}>取消</Button>,<Button onClick={this.okFn} loading={buttonLoading}>确认</Button>,]}><div className="meCropModal_content"><img src={imgUrl} ref={this.imgRef} className="meCropModal_img" /></div><Space className="cropSize_view" size="large">{sizeList.map((item, index) => {return (<Tagcolor={index === currenIndex ? "blue" : ""}key={item.name}onClick={this.setSize.bind(this, item.size, index)}>{item.name}</Tag>)})}</Space></Modal>)}

.6 准备 css

.cropper-modal {background-color: rgba(0, 0, 0, 0.2);
}
//注意 一定要为裁剪框的父元素设置大小
.meCropModal_content {width: 100%;height: 500px;
}
.meCropModal_img {width: 100%;
}

.7 初始化裁剪框

this.newCropper(sizeList[0].size)newCropper = (aspectRatio) => {let myCropper = new Cropper(this.imgRef.current, {viewMode: 1,preview: ".before",zoomOnWheel: false,autoCropArea: 0.6,dragMode: "none",background: false,initialAspectRatio: 1,outputType: "png",ready() {myCropper.setAspectRatio(aspectRatio)},})this.setState({myCropper,})
}

.8 若要改变裁剪比例则执行以下代码

/** @params
val:代表要裁剪的比例
index：当前比例的index值 为了指定样式*/
setSize = (val, index) => {this.setState({currenIndex: index,})/** 这一块坑爹的很 文档上有reset方法和clear方法 试过了都不行 然后人家的示范又能正常切换比例 只好打开sourcemap看看有没有源代码 碰碰运气 结果还真找到了 一看是有这么一个销毁的方法 文档里写的也不太详细 看半天没看到这么一个方法 坑爹的 加上这一句后 立马就好了 */this.state.myCropper.destroy() //先销毁裁剪框 在重新设置比例this.newCropper(val)}

.9 确认裁剪的方法

okFn = async () => {this.setState({buttonLoading: true,})let url = this.state.myCropper.getCroppedCanvas({imageSmoothingQuality: "high",outputType: "png",//这个好像并没有用 可写可不写fillColor: "#fff", //设置背景色 意思就是在裁剪透明png图片的时候 默认裁剪出来是黑色背景 此处修改为白色背景}).toDataURL("image/jpeg")//此方法是将图片的base64转换为file对象let files = this.base64toFile(url)if (files) {var file = new FormData()file.append("file", files)file.append("token", this.state.qiToken)file.append("key", y.randomCount())const res = await instImg({method: "post",url: "http://upload.qiniu.com",data: file,})if (res.status === 200) {let key = res.data.key//此方法是自定义的子传父的通讯方法 触发后在父组件进行要执行的操作this.props.cancleFn({ type: 1, key: key })} else {message.info("上传异常，请稍后重新尝试")}this.setState({buttonLoading: false,})}}/*base64转换为file对象  */base64toFile = (dataurl, filename) => {//将base64转换为文件var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })}cancelFn = () => {this.props.cancleFn({ type: 2 })}

.10 在需要的地方导入封装好的裁剪框

import MeCrop from "component/meCrop/meCrop"

.11 父组件的 html 与 state

  state = {meCropShow: false,imgUrl: null,}{meCropShow && (<MeCropmeCropShow={meCropShow}cancleFn={this.cancleFn}imgUrl={imgUrl}></MeCrop>)}

.12 父组件的通讯回调

  cancleFn = (parmas) => {const { type } = parmasif (type == 1) {const { key } = parmasthis.setState({formData: {...this.state.formData,cover: key,},})}this.setState({meCropShow: false,})}

.13 效果图

.14 over了

其实我长得就跟上面那个图一样帅！

图片裁剪cropperjs的使用相关推荐

前端图片裁剪 cropperjs的简单使用
https://github.com/fengyuanchen/cropperjs 演示 <!DOCTYPE html> <html lang="zh">& ...
图片裁剪-cropperjs详解
图片裁剪cropperjs GitHub:https://github.com/fengyuanchen/cropperjs 安装 cnpm install cropperjs 使用 //<!- ...
vue使用cropperjs实现移动端图片裁剪上传组件
本组件基于vuejs框架, 使用ES6基本语法, css预编译采用的scss, 图片裁剪模块基于cropperjs,拍照时的图片信息获取使用exif, 图片上传使用XMLHttpRequest 该组件 ...
【cropperjs】优秀、优雅的前端图片裁剪库
cropperjs下载 npm i cropperjs npm官网- https://www.npmjs.com/package/cropperjs cropperjs关键参数 aspectRatio ...
vue-cropper图片裁剪 PC
1.安装 cnpm install cropperjs // 引入import Cropper from 'cropperjs'import 'cropperjs/dist/cropper.min.c ...
React-Cropper实现图片裁剪
React-Cropper实现图片裁剪文章目录 React-Cropper实现图片裁剪在使用时遇到的问题 1.this.cropper.getCroppedCanvas is not a func ...
input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
vue 图片裁剪压缩
<template><div class="vue-box"><img :src=&q ...
头像上传和图片裁剪功能(cropper.js)
<template><div class="user-profile"><input type="file" name=" ...

图片裁剪cropperjs的使用

图片裁剪cropperjs的使用相关推荐

最新文章

热门文章