cropper.jsvue的简单介绍

发布时间：2023-12-08

cropper.jsvue的简单介绍

更新：<time datetime="2022-11-15 01:56">2022-11-15 01:56</time>

本文目录一览：

1、vue-cropper的使用的属性
2、怎样在Vue.js中使用jquery插件
3、基于Vue的图片剪切插件vue-cropper的使用
4、vue裁剪插件cropperjs详解

vue-cropper的使用的属性

1． 首先安装vue-cropper

npm install vue-cropper
yarn add vue-cropper

2． vue-cropper的属性 3． 方法： 内置方法 通过this.$refs.cropper调用

  • this.$refs.cropper.startCrop() 开始截图
  • this.$refs.cropper.stopCrop() 停止截图
  • this.$refs.cropper.clearCrop() 清除截图
  • this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
  • this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
  • this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
  • this.$refs.cropper.goAutoCrop 自动生成截图框函数
  • this.$refs.cropper.rotateRight() 向右边旋转90度
  • this.$refs.cropper.rotateLeft() 向左边旋转90度
    图片加载的回调 imgLoad 返回结果：success, error
    获取截图信息：
  • this.$refs.cropper.cropW 截图框宽度
  • this.$refs.cropper.cropH 截图框高度
    原文链接：

怎样在Vue.js中使用jquery插件

安装 jQuery 和 cropper.js

# install jQuery cropper
$ npm install jquery cropper --save

为jquery和Vue自定义指令配置webpack 为webpack配置添加jquery和Vue自定义指令的映射。 通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。 您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。 这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。 把下面高亮部分添加到build/webpack.base.conf文件中：

resolve: {
  extensions: ['', '.js', '.vue'],
  fallback: [path.join(__dirname, '../node_modules')],
  alias: {
    'src': path.resolve(__dirname, '../src'),
    'assets': path.resolve(__dirname, '../src/assets'),
    'components': path.resolve(__dirname, '../src/components'),
    'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery'),
    'directives': path.resolve(__dirname, '../src/directives')
  }
}

基于Vue的图片剪切插件vue-cropper的使用

剪裁效果图如下 安装 在main.js中引入 这里用到了 a-upload 组件，因为是上传到本地，且不需要展示列表，所以需要将 show-upload-list 设为 false，before-upload 也需要返回 false，阻止直接上传至服务器。 主要用于右侧的图片裁剪预览展示。

vue裁剪插件cropperjs详解

  1. 引入cropperjs
  2. 使用插件 详细参数如下（部分） 仓库地址 注意：如果方法没有被设置返回任何值，那么它会返回一个cropper的实例。因此多个方法可以使用链式写法。
推荐文章