前言
此组件的效果:
- 控制图片显示的区域；
-
支持选择不同形状的蒙层，控制显示区域的形状；
效果演示地址：http://merrylmr.top/admin-vuetify/#/crop
控制图片的显示区域
这里我直接用七牛的图片，他们的SDK支持图片裁剪
image.png
原图：
原图
裁剪之后：
裁剪之后的图片
?imageMogr2/crop/!392x338a115a24
表示从源图坐标为 x:115,y:24处截取 392x338 的子图片。
通过移动，动态设置宽高偏移即可；
蒙层控制显示的形状
使用：
<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
