Viberate 中文站

引言 做了个图片的裁剪的功能和预览的功能，前端图片的裁剪方案，大多数都是用cropperjs进行封装，npm上有vue-cropperjs可以直接用起来，viewerjs是用来实现图片的预览，这里直接使用了v-viewer来实现。 可以点击现在地址体验喔 git仓库地址 以及在线demo地址 图片裁剪 图片裁剪的流程 首先使用el-upload组件，渲染已经存在或者裁剪过的图片点击文件上传，选中需要裁剪的图片弹出一个弹框，在弹框中使用vue-cropperjs实现图片裁剪裁剪完成后，通过回调函数，将处理后的图片文件（Blob格式）上传到服务器或者本地预览出来裁剪完成的图片列表，通过v-viewer实现点击全屏预览（辅助作用） vue-cropperjs的使用 代码实现 首先在组件注册VueCropper组件直接可以通过vue-cropper标签使用组件设置this.$refs.cropper.setAspectRatio(1)之后，图片只能按照一定的比例裁剪，想要随意裁剪可以不设置通过this.$refs.cropper.relativeZoom、this.onRotateDegreeChange、this.$refs.cropper.move、this.$refs.cropper.scaleX 等API，可以对图片进行平移、缩放、翻转、旋转等操作通过this.$refs.cropper.getCroppedCanvas().toBlob()获取到处理后图片的Blob格式文件Blob格式文件处理成File格式后，上传到服务器 实现效果 v-viewer的使用 代码实现 v-viewer主要的实现图片的全屏预览，基于viewerjs封装 首先在main.js中引入css和注册v-viewer插件在页面中可以直接通过this.$viewerApi 调用，传入图片路径的数组和对应的索引，实现全屏预览图片 实现效果 参考资料 www.npmjs.com/package/v-v… www.npmjs.com/package/vue… 推荐 js前端实现word excel pdf ppt mp4图片文本等文件预览 最后 图片剪裁使用插件实现的话，只能说CV工程师不要太爽，要了解原理的话，还是需要花费很多时间研究的；更多关于前端vue-cropperjs图片裁剪的资料请关注脚本之家其它相关文章！