vue+图片裁剪vue-cropper以及api
2024-06-16 13:28:12
前言：
因为项目需要，需要实现一个上传完图片，对图片进行二次处理的需求，就使用了vue-cropper来实现这个功能，总的来说还是感觉非常不错的软件，这里分享下我的使用方法，以及vue-cropper的api（见最下）
实现效果：
实现步骤：
步骤一：项目中安装 vue-cropper
npm install vue-cropper步骤二：在main.js中注册（经测试，单独页面注册可能会出不来）
import VueCropper from 'vue-cropper' Vue.use(VueCropper)
步骤三：在页面使用，这里直接提供封装好的组件 vue-cropper.vue（源代码在下面）
1、template部分
2、js部分
源代码：
<template><div class="cropper-component"><!-- 工具箱部分 --><div class="btn-box"><label class="btn" for="uploads">选择图片</label><input type="file" id="uploads" :value="imgFile"style="position:absolute; clip:rect(0 0 0 0);width: 1px;"accept="image/png, image/jpeg, image/gif, image/jpg"@change="uploadImg($event,'blob', 1)"><Button type="primary" icon="ios-add" title="放大" @click="changeScale(1)"/><Button type="primary" icon="ios-remove" title="缩小" @click="changeScale(-1)"/><Button type="primary" title="左旋转" @click="rotateLeft"><span style="font-weight: 500;">↺</span></Button><Button type="primary" title="右旋转" @click="rotateRight"><span style="font-weight: 500;">↻</span></Button><!-- <Button type="primary" title="下载" @click="down('blob')"><span style="font-weight: 500;">↓</span></Button> --><!-- <div class="btn" @click="finish('blob')">上传头像</div> --></div><!-- 展示内容部分 --><div class="show_box"><!-- 展示选中图片 --><div class="cropper"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="option.info":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox"@realTime="realTime"@imgLoad="imgLoad"></vueCropper></div><!-- 展示缩略图 --><div class="preview-box" v-if="previews.url"><div>预览：</div><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img"/></div></div></div></div>
</template>
<script>
export default {name: 'cropper',data() {return {//剪切图片上传crap: false,previews: {},option: {img: '', // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 1, // 剪切后的图片质量（0.1-1）full: true, // 输出原图比例截图 props名fulloutputType: 'jpg', // 裁剪生成额图片的格式canMove: true, // 能否拖动图片original: false, // 上传图片是否显示原始宽高canMoveBox: true, // 能否拖动截图框autoCrop: true, // 是否默认生成截图框autoCropWidth: 150,autoCropHeight: 150,fixedBox: true // 截图框固定大小},fileName:'', // 本机文件地址downImg: '#',imgFile:'',uploadImgRelaPath:'', // 上传后的图片的地址（不带服务器域名）}},methods: {// 放大/缩小changeScale(num) {num = num || 1;this.$refs.cropper.changeScale(num);},// 坐旋转rotateLeft() {this.$refs.cropper.rotateLeft();},// 右旋转rotateRight() {this.$refs.cropper.rotateRight();},// 上传图片（点击上传按钮）finish(type) {let formData = new FormData();// 输出if (type === 'blob') {this.$refs.cropper.getCropBlob((data) => {let img = window.URL.createObjectURL(data);formData.append('images', data);this.$emit('postFile',formData);})} else {this.$refs.cropper.getCropData((data) => {formData.append('images', data);this.$emit('postFile',formData);})}},// 实时预览函数realTime(data) {this.previews = data;},// 下载图片down(type) {var aLink = document.createElement('a');aLink.download = 'author-img';//文件名if (type === 'blob') {// 获取截图的blob数据this.$refs.cropper.getCropBlob((data) => {this.downImg = window.URL.createObjectURL(data);//生成blob格式图片路径aLink.href = window.URL.createObjectURL(data);aLink.click();})} else {// 获取截图的base64 数据this.$refs.cropper.getCropData((data) => {this.downImg = data;aLink.href = data;})}},// 选择本地图片uploadImg(e, type, num) {//num代表第几个// 上传图片var file = e.target.files[0];this.fileName = file.name;if (!/\.(jpg)$/.test(e.target.value)) {this.$Message.info('证件照图片必须是jpg格式');return false;}let reader = new FileReader();reader.onload =(e) => {let data = '';//生成图片地址if (typeof e.target.result === 'object') {if(type == 'blob'){// 把Array Buffer转化为blob 如果是base64不需要data = window.URL.createObjectURL(new Blob([e.target.result]));}}else {data = e.target.result;}if (num === 1) {this.option.img = data;}}if(type == 'blob'){// 转化为blobreader.readAsArrayBuffer(file);}else{// 转化为base64reader.readAsDataURL(file);}},//图片加载的回调 imgLoad 返回结果success, errorimgLoad (msg) {console.log('imgLoad')console.log(msg)},//刷新-清除截图-目前尚未用到refeshImg(type){if(type == 'start'){this.$refs.cropper.startCrop() //开始截图}else if(type == 'end'){this.$refs.cropper.stopCrop() //停止截图}else if(type == 'clear'){this.$refs.cropper.clearCrop() //清除截图}}}}
</script>
<style lang="less">.cropper-component {width: 100%;margin: 0 auto;position: relative;//工具箱部分.btn-box {margin: 20px 0;.btn {padding:0 10px;height:32px;line-height:32px;text-align: center;border-radius: 4px;background-color: #0d8b8e ;color: #fff;cursor: pointer;display: inline-block;vertical-align: bottom;}}//展示内容部分.show_box{display: flex;justify-content: space-between;// 展示选中图片.cropper {width: 260px;height: 260px;}// 展示缩略图.preview-box {top: 60px;right: 10px;.preview {width: 150px;height: 150px;// border-radius: 50%;//这里预览是否需要变成圆的border: 1px solid #ccc;background-color: #ccc;margin: 5px;overflow: hidden;}}}}
</style>
API文档：
这里内置方法的话,我是可以提供可供拷贝的代码：
内置方法 通过this.$refs.cropper 调用
this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度
图片加载的回调 imgLoad 返回结果success, error
获取截图信息
this.$refs.cropper.cropW 截图框宽度this.$refs.cropper.cropH 截图框高度完整api入口
到这里就结束了，有兴趣的朋友可以留言一起交流哈
vue+图片裁剪vue-cropper以及api相关推荐
- VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下 效果图 第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
- VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址 兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗 可旋转.缩放图片 任意比例.大小裁剪 固定比例.大 ...
- vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
- vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
- 简单的移动端图片裁剪vue插件[旋转，平移，缩放，印花]
Continuing the discussion from Vuex 插件 自动缓存store指定数据(配置最简,性能最佳): ============================分割线=:jo ...
- vue图片裁剪固定尺寸/vue-cropper的使用
需求: 用户上传图片不符合大小,提供工具进行裁剪(类似上传头像一样处理) 解决: 使用vue-cropper插件完成 插件官网: https://github.com/xyxiao001/vue-cr ...
- vue 图片裁剪压缩
<!-- 这个图片剪裁插件,兼容ios与安卓 --><template><div class="vue-box"><img :src=&q ...
- 头像上传和图片裁剪功能(cropper.js)
<template><div class="user-profile"><input type="file" name=" ...
- 一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
最新文章
- Xcode 7中Static Cells自动计算高度失效的解决方法
- c语言二级试题讲解,C语言试题,二级C语言试题讲解（9页）-原创力文档
- Office+SharePoint+Server+2007+部署图示指南
- php中怎样阻止网页进行跳转,php中如何阻止网页进行跳转？
- [BJOI2019]送别——非旋转treap
- 用xib自定义UIView并在代码中使用--iOS
- 基于QQ服务器JavaMail邮箱SSL密码第三方发送邮件
- Grunt自动化工具相关
- 解决办法：下列软件包有未满足的依赖关系，依赖。。。但是。。。正要被安装
- window10+cuda+cudnn下载
- 驱动精灵的护眼大师屏保非常不错
- 哪一类功率放大电路效率最高_让我们来复习一下功率放大电路与集成运算放大电路...
- TOEFL wordlist 23
- Matlab中的plotyy细讲（双坐标图）
- TP5.1实现数组内容的分页和数据渲染
- 魅族便签，是否能成为国内便签应用的No.1？
- 解析eBay BASE模式、去哪儿及蘑菇街分布式架构
- 小白之-----------shell脚本批量管理服务器
- DST 根 CA X3 证书过期问题和修复
- 从富士音乐节看O2O音乐的未来