這款vue圖片剪裁開源項目，簡直逆天了！

大家好，我是你們的於小二。

前言

在做web前端開發的時候，你一定遇到過這樣的業務場景，上傳用戶頭像的時候，需要將圖片進行裁剪等操作，這個時候，我們一般會用到第三方插件。

技術github學習地址：https://github.com/codeGoogler/JavaCodeHub

程序員編程書籍：https://github.com/codeGoogler/ProgramBooks

如果自己造輪子的話，就太慢了，耽誤時間不說，搞不好還要留下來加班。

這裏就推薦一個簡單易用的vue圖片裁剪插件，支持移動圖像，裁剪圖片，放大縮小圖片，上下左右移動，固定比例，固定尺寸，遠程圖片裁剪，只需要很少的代碼就可以實現裁剪功能，也可以通過調整參數以適應你自己的業務需求。

話不多說，首先附上項目地址：

Github鏈接：https://github.com/acccccccb/vue-img-cutter

是不是莫名的眼熟，是不是在幾年前還用着jquery的時候在插件庫裏面看到過，小編曾經用過基於cropper.js的圖片上傳和裁剪的庫，和這個簡直是出自同一人之手，反正就是好用。

兼容性也是挺好的喲，兼容IE9+,MSEdge,chrome,firefox等主流瀏覽器，還可以使用此配置工具進行更多個性化設置，不僅能實時預覽，還可直接生成代碼複製粘貼到你的項目。

第一步

1:在自己的項目裏面安裝上傳圖片裁剪預覽插件vue-img-cutter

npm install vue-img-cutter --save-dev 

安裝完成之後可以看到package.json裏面的關於插件vue-img-cutter版本信息

第二步

2：新建一個index.vue的組件，將ImgCutter.vue文件引入項目：

import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
} 

第三步

3：在頁面中使用：

<ImgCutter v-on:cutDown="cutDown">
    <button slot="open">選擇圖片</button>
</ImgCutter> 

index.vue的參考代碼

<template>
  <div class="tab-container">
    <ImgCutter v-on:cutDown="cutDown">
      <button slot="open">選擇圖片</button>
    </ImgCutter>
  </div>
</template>
<script>
import ImgCutter from "vue-img-cutter";
export default {
  components: {
    ImgCutter,
  },
};
</script> 

第四步

4：整體效果是這個樣子的

今天的推薦不知道大家喜歡嗎？如果你喜歡，請在文章底部留言和點贊，以表示對我的支持，你們的留言、點贊和轉發關注是我持續更新的動力哦！

作者：源大俠
鏈接：https://www.jianshu.com/p/436ef2eaab55
來源：csdn

關於如何學習Java，一方面需要不斷的去學習，把基礎知識學紮實，另一方面也要認識到java的學習不能僅僅靠理論，更多的是靠實操，所以要多練習多做項目，在實踐中學習纔是最好的學習方法。很多人剛開始不知道怎麼去學習，這裏我將一些重要的技術文章整理到了github上開源項目上，希望能給大家帶來一些幫助,項目是：JavaCodeHub

另外，還整理了一些針對於程序員的編程書籍項目，都放到了github上面，項目爲：ProgramBooks 需要的話可以自取。地址：https://github.com/codeGoogler/ProgramBooks

如果github訪問太慢？我同時也把去放到了碼雲上面ProgramBooks