前言

此組件的效果:

• 控制圖片顯示的區(qū)域；

• 支持選擇不同形狀的蒙層，控制顯示區(qū)域的形狀；

  
  

效果演示地址：http://merrylmr.top/admin-vuetify/#/crop

控制圖片的顯示區(qū)域

這里我直接用七牛的圖片，他們的SDK支持圖片裁剪

image.png

原圖：

原圖

裁剪之后：

裁剪之后的圖片

?imageMogr2/crop/!392x338a115a24
表示從源圖坐標(biāo)為 x:115,y:24處截取 392x338 的子圖片。

通過移動，動態(tài)設(shè)置寬高偏移即可；

官方文檔鏈接

蒙層控制顯示的形狀

css的-webkit-mask-box-image

使用：

<div class="img-wrapper">
  <img src="https://dora-doc.qiniu.com/gogopher.jpg?imageMogr2/crop/!392x338a113a0" />
</div>

.img-wrapper {
  -webkit-mask-box-image-source: url(/img/triangle.svg);
    -webkit-mask-box-image-width: initial;
    -webkit-mask-box-image-outset: initial;
    -webkit-mask-box-image-repeat: initial;
}

呈現(xiàn)效果：

image.png

瀏覽器兼容性：

image.png

Last

此圖片裁剪組件有一定的局限性，必須配合七牛圖片才可；
css的蒙版：也存在瀏覽器兼容問題；

源碼地址：
https://github.com/merrylmr/admin-vuetify/blob/master/src/views/comps/CropDlg.vue