在做web前端開發(fā)的時(shí)候，你一定遇到過這樣的業(yè)務(wù)場(chǎng)景，上傳用戶頭像的時(shí)候，需要將圖片進(jìn)行裁剪等操作，這個(gè)時(shí)候，我們一般會(huì)用到第三方插件。
如果自己造輪子的話，就太慢了，耽誤時(shí)間不說，搞不好還要留下來加班。
這里就推薦一個(gè)簡(jiǎn)單易用的vue圖片裁剪插件，支持移動(dòng)圖像，裁剪圖片，放大縮小圖片，上下左右移動(dòng)，固定比例，固定尺寸，遠(yuǎn)程圖片裁剪，只需要很少的代碼就可以實(shí)現(xiàn)裁剪功能，也可以通過調(diào)整參數(shù)以適應(yīng)你自己的業(yè)務(wù)需求。
話不多說，首先附上項(xiàng)目地址：
Github鏈接：https://github.com/acccccccb/vue-img-cutter
是不是莫名的眼熟，是不是在幾年前還用著jquery的時(shí)候在插件庫里面看到過，小編曾經(jīng)用過基于cropper.js的圖片上傳和裁剪的庫，和這個(gè)簡(jiǎn)直是出自同一人之手，反正就是好用。
兼容性也是挺好的喲，兼容IE9+,MSEdge,chrome,firefox等主流瀏覽器，還可以使用此配置工具進(jìn)行更多個(gè)性化設(shè)置，不僅能實(shí)時(shí)預(yù)覽，還可直接生成代碼復(fù)制粘貼到你的項(xiàng)目。
1:在自己的項(xiàng)目里面安裝上傳圖片裁剪預(yù)覽插件vue-img-cutter

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

image.png

安裝完成之后可以看到package.json里面的關(guān)于插件vue-img-cutter版本信息

image.png

2：新建一個(gè)index.vue的組件，將ImgCutter.vue文件引入項(xiàng)目：

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：整體效果是這個(gè)樣子的

image.png

非常不錯(cuò)喲~~
今天的推薦不知道大家喜歡嗎？如果你喜歡，請(qǐng)?jiān)谖恼碌撞苛粞院忘c(diǎn)贊，以表示對(duì)我的支持，你們的留言、點(diǎn)贊和轉(zhuǎn)發(fā)關(guān)注是我持續(xù)更新的動(dòng)力哦！