Vue-图像-基于Vue的移动图像裁剪组件裁剪示例

本文介绍了一个基于vue的vue-image-crop移动图像裁剪组件的实例，并与大家分享如下：

代码地址：https://github.com/jczzq/vue-image-crop

vue-image-裁剪

基于Vue的移动图像裁剪组件

组件使用新功能，如URL.createObjectURL()，在使用前注意兼容性问题。IE=10注：该组件适用于PC，不推荐手机使用。

功能预览

快速启动

安装节点=8.9.0(推荐的LTS=8.11.0)

#安装vue-cli3 . xnpminstall-g @ vue/clicdvue-image-crop NPM安装NPM run dev。您可以通过启动开发模式自定义功能。

结构

npm运行buildbuild后，将重新生成lib文件夹

应用程序接口

小道具

属性名称类型的默认值描述了由值对象{}裁剪的图片对象；必须通过；可以使用v-model绑定命题对象{w: 2，h: 1}图片宽高比对象；没必要通过；用于动态计算宽高比，所以w和h两个属性没有定义定值质量数0.92；没必要通过；第二个参数是否有Remove布尔false的HTMLCanvasElement.toDataURL()显示Remove按钮；没必要通过；是否直接上传skipCrop布尔值false，可以在列表中使用；没必要通过；设置为true时，图片不会被裁剪，直接返回configobject {size : 1200，isslice : true，path : null }；此对象没有默认值，传递时必须传递对象中的每个属性；Size:图片最大宽度(px)，isSlice:是否需要裁剪，path:显示图片的路径，path参数将直接与图片id (path id)事件拼接

事件名称表示单击时会触发回调参数remove按钮-更改会在所选图片更改时触发event.target.files[0]，并在新文件提交图片操作完成时触发当前裁剪的图片对象-取消图片操作时触发-示例代码

Template div class=' ctnr一般用法/p m-image-crop class=' micmi C1 ' v-model=' img '/m-image-crop调整比例/p m-image-crop class=' mic mic2 ' v-model=' img 2 ' : partition=' { w : 100，h : 35 } '/m-image-crop list/p div class=' list ' div class=' item ' v-for='(item，index) in imgList}，methods : { AddHandle(){ this . IMglist . push({ })；}，remove handle(index){ this . imglist . splice(index，1)；} }};/scriptstyle lang='less'html，body { margin 3360 0；}.ctnr { height: 100vh。mic { border: 1px虚线# 4fc08d} .mic1 { width: 200px高度： 100像素；} .mic2 { width: 100vw高： 35大众；} .列表{ font-size : 0；项目{ box-sizing:边框-box；font-size : 14px；垂直对齐：中间；display:内联块；border: 1px虚线# 4fc08d宽度： 33.33 VW；高度： 33.33大众；} .添加{ text-align : center；线高： 33.33 VW；} }}/style以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。