第三方库 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)
},
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
