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文档

posted @   写前端的扛把子  阅读(1188)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示