cropper.jsvue的簡單介紹

本文目錄一覽：

• 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的實例 因此多個方法可以使用鏈式寫法