javascript里裁切图片插件库

第三方库 cropperjs 适用于JS、Vue、Jquery

安装

npm install cropperjs

按照格式要求配置如下

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" src="picture.jpg">
</div>

CSS 如下配置

/* Ensure the size of the image fit the container perfectly */
img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}

Javascript 如下配置

  
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';



mounted () {
    const image = this.$refs.img
    const cropper = new Cropper(image, {
      viewMode: 1,
      dragMode: 'move',
      aspectRatio: 1,
      autoCropArea: 1,
      cropBoxMovable: false,
      cropBoxResizable: false,
      background: false,
      movable: true
    })
    console.log(cropper)
  },