vue的图片裁剪

《vue的图片裁剪》正文开始，本次阅读大概9分钟。

对于一个拥有复杂布局的图片网站，准确地表示图片是必要的。有时候，一个更小的，剪切后的图片可能比一个完整的图片更能传达你想要表达的主题。在Vue中，图片的裁剪并不是一个大的问题。在这篇文章中，我们将会学习Vue如何实现图像的裁剪。

Vue提供了一个名为“vue-cropper”的轻量级图像裁剪器。使用它可以帮助我们在Vue中实现图片裁剪的功能。vue-cropper是基于vuejs的一个图像裁剪器，特别适用于移动端的图像裁剪。其使用简单，功能强大。以下是vue-cropper的主要功能：

- 初步定义裁剪框的形状和大小
- canvas坐标裁剪图像
- 图片压缩
- 图片方向调整
- 缩放裁剪框
- 定义新的裁剪框大小和形状

Vue-cropper的主要功能都是通过简单的API完成的。下面我们将展示vue-cropper的一些基本用例：

// 引入vue-cropper组件
import VueCropper from 'vue-cropper'
//设置vue-cropper的初始值//提交裁剪图片的操作
function submit(){
const croppedImage = this.$refs.cropper.getCroppedCanvas().toDataURL('image/jpeg')
 }

在上面的示例中，我们设置了一些初始值用于vue-cropper组件。其中img表示要裁剪的图片，canvas是裁剪后储存图片的容器，cropper是vue-cropper实例的唯一标识。autoCrop用于自定义生成的图片是否可以拖动和缩放，autoCropArea是裁剪区域与画布的比例。aspectRatio表示裁剪区域的宽高比。zoomOnWheel设置为false可以防止鼠标滚轮缩放图片。

另外，对于裁剪后生成的图片，我们通常需要在提交前做一下压缩处理：

//图片压缩操作
function compressImage(url,quality){
return new Promise((resolve, reject) =>{
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function () {         
//压缩图像
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
const outputFormat = 'image/jpeg'
const dataUrl = canvas.toDataURL(outputFormat,quality);
resolve(dataUrl);
};
img.onerror = function(err) {
reject(new Error('image load error'));
}
img.src = url;
})
 }
// 裁剪并压缩图片
function submit(){
const croppedDataUrl = this.$refs.cropper.getCroppedCanvas().toDataURL('image/jpeg')
compressImage(croppedDataUrl,0.1)
.then(dataUrl =>{
// 在这里可以提交处理后的图片
})
}

通过使用vue-cropper配合图片压缩操作，我们就可以轻松地实现图片裁剪。Vue-cropper为我们在移动端实现图片裁剪提供了一种简单的方式。