vue-cropperjs 获取剪辑后的图片格式
时间: 2023-08-24 11:37:32 浏览: 59
通过 vue-cropperjs 剪辑后得到的图片格式是 base64 格式的字符串。可以在 `cropped()` 方法中获取剪辑后的图片数据,例如:
```javascript
<template>
<vue-cropper
ref="cropper"
...
@cropped="getCroppedData"
/>
</template>
<script>
export default {
methods: {
getCroppedData(dataUrl) {
console.log(dataUrl);
// dataUrl 即为剪辑后的图片数据,格式为 base64 字符串
}
}
}
</script>
```
相关问题
vue-cropperjs 获取剪辑后的图片格式如何转为文件流的形式
将 base64 格式的字符串转换为文件流的形式,可以借助 Blob 对象实现。Blob 对象表示一个不可变、原始数据的类文件对象,可以使用它来存储二进制数据。具体步骤如下:
1. 将 base64 格式的字符串转换为二进制数据。可以使用 atob() 方法将 base64 字符串解码为二进制数据。
```javascript
const binaryStr = atob(dataUrl.split(',')[1]);
```
2. 创建一个 Uint8Array 对象来存储二进制数据。
```javascript
const len = binaryStr.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryStr.charCodeAt(i);
}
```
3. 使用 Blob 对象将二进制数据转换为文件流的形式。
```javascript
const blob = new Blob([bytes], { type: 'image/png' });
```
完整代码如下:
```javascript
<template>
<vue-cropper
ref="cropper"
...
@cropped="getCroppedData"
/>
</template>
<script>
export default {
methods: {
getCroppedData(dataUrl) {
const binaryStr = atob(dataUrl.split(',')[1]);
const len = binaryStr.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryStr.charCodeAt(i);
}
const blob = new Blob([bytes], { type: 'image/png' });
console.log(blob);
// blob 即为剪辑后的图片数据,格式为文件流的形式
}
}
}
</script>
```
注意:在使用 Blob 对象时,需要指定 MIME 类型。可以根据剪辑后的图片格式来确定 MIME 类型,例如上面示例中使用的是 `image/png`。
vue-cropperjs的用法
vue-cropperjs是一个基于Cropper.js的Vue组件,用于实现图片裁剪功能。它可以帮助我们快速地实现图片的裁剪、缩放、旋转等操作。
下面是vue-cropperjs的使用步骤:
1. 安装vue-cropperjs
```
npm install vue-cropperjs --save
```
2. 在Vue组件中引入vue-cropperjs
```
import Vue from 'vue'
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'
Vue.component(VueCropper)
```
3. 在Vue模板中使用vue-cropperjs
```
<template>
<div>
<vue-cropper ref="cropper" :src="imageSrc" :aspect-ratio="1" :auto-crop-area="0.8"></vue-cropper>
<button @click="getCropData">裁剪</button>
</div>
</template>
```
4. 在Vue组件中编写相关方法
```
methods: {
getCropData() {
this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
// 处理裁剪后的图片数据
})
}
}
```
以上就是vue-cropperjs的基本使用方法,你可以根据自己的需求来调整配置,如裁剪比例、自动裁剪区域等。希望能够帮助到你。