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文档
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战