图片裁剪组件

前言

此组件的效果:

• 控制图片显示的区域；

• 支持选择不同形状的蒙层，控制显示区域的形状；

  
  

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

控制图片的显示区域

这里我直接用七牛的图片，他们的SDK支持图片裁剪

image.png

原图：

原图

裁剪之后：

裁剪之后的图片

?imageMogr2/crop/!392x338a115a24
表示从源图坐标为 x:115,y:24处截取 392x338 的子图片。

通过移动，动态设置宽高偏移即可；

官方文档链接

蒙层控制显示的形状

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;
}

呈现效果：

image.png

浏览器兼容性：

image.png

Last

此图片裁剪组件有一定的局限性，必须配合七牛图片才可；
css的蒙版：也存在浏览器兼容问题；

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