Front-end implementation of image cropping scheme

foreword

Using the weekend two days, I made a picture cropping function and preview function. Most of the front-end picture cropping schemes are encapsulated with cropperjs. There is vue-cropperjs on npm which can be used directly. Viewerjs is used to realize pictures The preview, here is directly used v-viewer to achieve.

image cropping

The process of image cropping

First use the el-upload component to render the existing or cropped image
Click File Upload, select the image to be cropped
A pop-up box pops up, and vue-cropperjs is used in the pop-up box to realize image cropping
After the cropping is completed, upload the processed image file (Blob format) to the server or preview it locally through the callback function
Cropped picture list, click full-screen preview through v-viewer (assistance)

The use of vue-cropperjs

Code

First register the VueCropper component in the component
Components can be used directly through the vue-cropper tag
After setting this.$refs.cropper.setAspectRatio(1), the picture can only be cropped according to a certain ratio. If you want to crop at will, you can not set it
Through this.$refs.cropper.relativeZoom, this.onRotateDegreeChange, this.$refs.cropper.move, this.$refs.cropper.scaleX and other APIs, you can pan, zoom, flip, rotate, etc.
Obtain the Blob format file of the processed image through this.$refs.cropper.getCroppedCanvas().toBlob()
After the Blob format file is processed into File format, upload it to the server

// 引入组件并注册
import "cropperjs/dist/cropper.css";
import VueCropper from "vue-cropperjs";

// 直接使用组件
<vue-cropper
  overflow-hidden
  ref="cropper"
  :src="src"
  preview=".preview"
  :minContainerHeight="500"
  background
  :ready="onReady"
/>

// 图片可以在onReady方法中设置裁剪的宽高比例
this.$refs.cropper.setAspectRatio(this.aspectRatioValue);

// 缩放图片
this.$refs.cropper.relativeZoom(percent);

// 图片旋转角度
this.onRotateDegreeChange(this.rotateDegree);

// 图片平移
this.$refs.cropper.move(offsetX, offsetY);

// 图片翻转
this.$refs.cropper.scaleX(scale);
this.$refs.cropper.scaleY(scale);

// 重置
this.$refs.cropper.reset();

// 获取修改后的图片的数据
  this.$refs.cropper
      .getCroppedCanvas({
        // 限制画布大小，限制生成的图片体积
        maxWidth: 2056,
        maxHeight: 2056,
      })
      .toBlob(
        (blob) => {
          // 调用确定的回调函数，将blob上传到服务器或者本地预览
          this.$emit("confirm", blob);
        },
        // 如果旋转角度不为直角，则图片一定会出现空白区域，空白区域默认透明，使用 png 格式
        //this.rotateDegree % 90 === 0 ? this.file.type : 'image/png',
        this.file.type,
        // 质量
        this.quality
      );
      
// 将文件上传到服务器
function onCropperConfirm(blob) {
    let file = new File([blob], filename, { type: blob.type,});
     const formData = new FormData();
     formData.append("file", file);
     // ...
     axios.post("/upload", formData).then((res) => {
          // ...
     })
}

复制代码

achieve effect

Use of v-viewer

Code

v-viewer mainly implements full-screen preview of images, based on viewerjs encapsulation

First introduce css and register v-viewer plugin in main.js
In the page, it can be called directly through this.$viewerApi, and the array of image paths and the corresponding index can be passed in to realize the full-screen preview image.

// 首先在main.js中引入组件
import "viewerjs/dist/viewer.css";
import VueViewer from "v-viewer";
Vue.use(VueViewer);

// 组件中使用
this.$viewerApi({
    options: {
      toolbar: true,
      initialViewIndex: 1,
    },
    images: [
        "https://placem.at/people?random=1&txt=0&w=500&h=500",
        "https://placem.at/people?random=1&txt=0&w=1000&h=500"
    ],
});
复制代码

achieve effect

References

1.www.npmjs.com/package/v-v…

2.www.npmjs.com/package/vue…

finally

If image cropping is implemented using plug-ins, it can only be said that CV engineers should not be too cool. If you want to understand the principle, you still need to spend a lot of time on research. Finally, if this article is helpful to you, you are welcome to like it~