js 图片裁剪器的使用

最新推荐文章于 2022-11-07 16:09:08 发布

259-aaa

最新推荐文章于 2022-11-07 16:09:08 发布

阅读量256

点赞数

分类专栏：学习实战 Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_44680550/article/details/122848979

版权

学习同时被 3 个专栏收录

66 篇文章 2 订阅

订阅专栏

Vue

7 篇文章 1 订阅

订阅专栏

实战

6 篇文章 1 订阅

订阅专栏

js 图片裁剪器的使用

步骤
效果
其它

步骤

下载到项目中

npm install cropperjs

在这里插入图片描述
2. 引入到项目中

  <div class="update-photo">
    <img class="img" :src="img" />
  </div>

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

.img {
  display: block;
  max-width: 100%;
}

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});