vue-cropper初始化记录-vue3.2

安装
# npm 安装
npm install vue-cropper@next

# yarn 安装
yarn add vue-cropper@next
注意vue3使用的是vue-cropper@next ， vue2 使用的是vue-cropper。

安装时要做好区分避免不必要的报错。

 

插件地址
https://github.com/xyxiao001/vue-cropper
https://github.com/xyxiao001/vue-cropper

配置引入

单页面引入

import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
//main.js

import VueCropper from 'vue-cropper'

const app = createApp(App)

app.use(VueCropper)

app.mount('#app')
引入完成后，配置页面（ 因为写过react的原因，我比较喜欢vue3的语法糖，算是个惊喜 ）

<template>
<div class='content' style="width:500px;height:500px">
<vue-cropper autoCrop
:img="options.img"
ref="cropper"
centerBox
fixed
outputSize='1'
:auto-crop-width='options.autoCropWidth'
:auto-crop-height='options.autoCropHeight'
:fixedBox='options.fixedBox'
:fixedNumber='options.fixedNumber'
/>
</div>
</template>

<script setup>
import {reactive, ref} from 'vue'

/* vue-cropper DOM */
const cropper = ref(null)

/* vue-cropper 配置项 */
let options = reactive({
img: 'http://121.199.29.175/local/temp/getImage/Koala.jpg',
size: 1,
full: false,
outputType: 'png',
canMove: false,
fixedBox: false,
original: false,
canMoveBox: true,
autoCrop: true,
autoCropWidth: 500,
autoCropHeight: 500,
centerBox: true,
high: true,
max: 99999,
fixed: true,
outputSize: '',
fixedNumber: [1, 1],
colorRange: '150'
})

</script>

 

 

然后就是基础方法：

// 图片上传,并预览
function uploadImg() {
cropper.value.getCropBlob(data => {
let formData = new FormData();
formData.append('file', data, 'xxxx.jpg')
formData.append('colorRange', option.colorRange)

const url = 'http://xxxxxxx.com/file'
fetch(url, {
method: 'post',
body: formData
}).then(response => response.json())
.then(result => {
console.log('Success:', result);
const {code, data} = result

//这里是我的回调方法，注意的是，如果后端不返回base64的话，可能会出现跨域问题，所以可以给后端建议，以base64形式返回图片
if (code == 200) {
options.img = data.imageBase64
state.disabled = false
}
})
.catch(error => {
console.error('Error:', error);
});
});
}

/* 选择图片 转为base64*/
function selectImg(e) {
let file = e.target.files[0]
/* */
if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {

console.log('图片类型必须为：jpeg、jpg、png格式')
return false
}
/* */
let FileReader = new FileReader()
FileReader.onload = (e) => {
let data
if (typeof e.target.result === 'object') {
const blob = new Blob([e.target.result])
data = window.URL.createObjectURL(blob)
} else {
data = e.target.result
}
options.img = data
}
/* 转化为base64 */
FileReader.readAsDataURL(file)
}