cropper.js图片裁剪的使用

1.安装

npm install cropperjs

2.在main.js引入cropper的css样式（一定要加，一定要加，一定要加）

import 'cropperjs/dist/cropper.css'

3.使用

<template><div><h1>Cropper with a range of aspect ratio</h1><div><img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture" ref="image"></div><button @click="clear">清除</button><div>x:{{date.x}} <br>y:{{date.y}} <br>x1:{{date.x1}} <br>y1:{{date.y1}} <br></div></div>
</template>
<script>import Cropper from 'cropperjs';export default {name: 'HomeView',components: {},data() {return {cropper: null,date: {x: null,y: null,x1: null,y1: null,}}},mounted() {this.init();},methods: {init() {this.cropper = new Cropper(this.$refs.image, {autoCrop: false, //是否允许在初始化时自动裁剪图片checkCrossOrigin: false, //检查当前图片是否为跨域图片checkOrientation: false,viewMode: 1, //限制裁剪框不超过图片容器的范围。autoCropArea: 0.3, //定义裁剪区域占图片的大小(百分比)。取值为 0 - 1。aspectRatio: 4 / 4,//裁剪器为正方形crop: (event) => {console.log(event.detail);//获取裁剪框左上坐标和右下左边//注意：它的宽度和高度都是跟着图片缩放比例进行缩放的this.date = {x: event.detail.x,y: event.detail.y,x1: event.detail.x + event.detail.width,y1: event.detail.y + event.detail.height,}},});},clear() {this.cropper.clear();//清除// this.cropper.destroy();},}}
</script><style lang="scss" scoped>.container {margin: 20px auto;max-width: 640px;}img {max-width: 100%;}
</style>

4.关于API

cropper.js的中文文档：(44条消息) CropperJS中文文档（翻译自Cropper.js原英文文档）_Double.杨的博客-CSDN博客_cropperjs文档

cropper.js图片裁剪的使用相关推荐

cropper.js 实现裁剪图片并上传(PC端)
博客地址:http://blog.mambaxin.com 由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比 ...
cropper（图片裁剪插件）
https://github.com/fengyuanchen/cropper cropper使用说明一.特性 jQuery v1.9.1以上版本支持插件有38个options,27种method ...
利用cropper制作图片裁剪，且不失真
废话不多说,上代码; 先把css和js引入进来,如果是webpack项目可以自行npm下载 <link rel="stylesheet" type="text/cs ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
图片裁剪的js有哪些（整理）
图片裁剪的js有哪些(整理) 一.总结一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...
1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片对图片的裁剪以及调整(旋转.缩放 ...
jquery实现截取pc图片_Cropper.js 实现裁剪图片并上传(PC端)
由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比较完善的,所以结合之前的使用情况,编写了此案例.本案例是参考 ...
图片裁剪和异步上传插件--一步到位（记录）
图片上传裁剪这功能随处可见,有的自己写,不过太耗费时间了,插件的话感觉好多,前段时间就想挑一款好的插件,以后就用那款,可是挑了几款插件用上去,效果很好,问题就出在合并了,单一的插件效果是很好的,没问题 ...
vue 移动端头像裁剪_基于vue的移动端图片裁剪压缩处理
前端时间做Vue项目的时候,要用到图片压缩处理,网上查阅了资料后,发现并不能满足实际的业务需求:于是,自己结合网上的资料写了一个,有兴趣的小伙伴不妨试试~ 废话不多说,先上效果图,无图无真相嘛~ 效果 ...

cropper.js图片裁剪的使用

cropper.js图片裁剪的使用相关推荐

最新文章

热门文章