图片处理

为了适应各种分辨率的显示和速度快，需要将图片进行压缩或者裁剪

前端图片处理

页面示例

• cropperjs可以实现图片的裁剪和压缩
• 裁剪代码如下

import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
initCropper () {
   this.showUpload=true;
     this.$nextTick( () => {
       this.cropper = new Cropper(document.getElementById(this.imgId), {
         viewMode: 1,
         aspectRatio: this.width/this.height,
         minCropBoxWidth: this.width,
         minCropBoxHeight: this.height,
         preview: `#${this.previewId}`,
         // checkCrossOrigin: false,
         // checkOrientation: false,
       })
     })
}

1、引入cropperjs和样式
2、指定dom元素和配置选项
3、调用this.cropper.replace(src)方法，指定src的时候，要保持同域（浏览器限制的）
4、压缩要指定格式“image/jpeg”

this.cropper.getCroppedCanvas({
     width: this.width, height: this.height
 }).toBlob(blob => {
  const isLt300KB = blob.size / 1024 < 300;
  if (!isLt300KB) {
     this.$message.error('图片大小不能超过 300KB!');
     return;
  }
  const formData = new FormData()
  formData.append('file', blob, 'aaa.png')
  uploadImg(formData).then((res) => {
     this.$emit('input', res.data.data);
     this.showUpload = false;
     this.clear()
  })
},'image/jpeg')

阿里云oss图片处理

原始图片上传到OSS后，您可以通过简单的RESTful接口，在任何时间、任何地点、任何互联网设备上对图片进行处理

OSS图片处理提供以下功能：

• 直接参数访问

  http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fill,w_300,h_300,limit_0/auto-orient,0/quality,q_90/watermark,image_cGFuZGEucG5n,t_61,g_se,y_10,x_10

  

• 通过URL参数，使用样式访问

  http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/panda_style

css图片自适应

background-size: cover;  
background-position:center;