记录uve常见图片截图插件
图片裁剪插件
1.vue-img-cutter
安装：npm i vue-img-cutter -S
插件的使用：
<template>
<div>
<ImgCutter
label="选择图片"
:isModal="true"
:boxWidth="800"
:boxHeight="500"
:cutWidth="300"
:cutHeight="300"
:sizeChange="true"
:moveAble="true"
WatermarkText="水印文字"
v-on:cutDown="cutDown"
>
<!-- <div class="btn btn-primary" slot="open">选择本地图片</div> -->
</ImgCutter>
</div>
</template>
<script>
import ImgCutter from 'vue-img-cutter'
export default{
data(){
return{
}
},
components:{
ImgCutter
},
methods:{
cutDown(res) {
let imgSrc = res.dataURL;
console.log(imgSrc);//输出为base64数据
}
}
}
</script>
相关参数介绍
插槽Slot
<ImgCutter v-on:cutDown="cutDown">
<button slot="open">选择图片button>
ImgCutter>
返回值
2.vue-cropper
详见下面地址：
https://github.com/xyxiao001/vue-cropper
3.vue-cropper-h5
详见下面地址：
https://github.com/2277419213/vue-cropper-h5
使用方法：
npm install vue-cropper-h5
or
cnpm install vue-cropper-h5
demo:
<template>
<div class="dome">
<div class="cropper">
<img :src="img" class="img" />
<!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法 -->
<h5-cropper :option="option" @getbase64Data="getbase64Data" @getblobData="getblobData" @getFile="getFile"></h5-cropper>
</div>
<div class="info">
<div>作者：居里栈栈</div>
<div>Wechat：812936565</div>
</div>
</div>
</template>
<script>
import H5Cropper from "vue-cropper-h5";
export default {
components: { H5Cropper },
data() {
return {
option: {}, //配置
img:
"http://geren.yi-school.top/images/logo.png"
};
},
methods: {
getbase64Data(data) {
this.img = data;
}
}
};
</script>
<style scoped>
.dome {
display: flex;
justify-content: space-between;
padding-left: 22px;
}
.cropper {
width: 80px;
height: 80px;
line-height: 80px;
/* 切记position: relative一定要有 */
position: relative;
border-radius: 80px;
overflow: hidden;
text-align: center;
}
.img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.info {
font-size: 18px;
height: 40px;
line-height: 40px;
margin-left: 30px;
flex: 1;
text-align: left;
}
</style>
Option及默认配置
| 名称 | 功能 | 默认值 | 可选值 |
|---|---|---|---|
| ceilbutton | 操作按钮是否在顶部 | false | true or false |
| outputSize | 裁剪生成图片的质量 | 1 | 0.1 - 1 |
| outputType | 裁剪生成图片的格式 | png | jpeg(就是jpg) or png or webp |
| info | 裁剪框的大小信息 | false | true or false |
| canScale | 图片是否允许滚轮缩放 | true(这个手机上用不到，电脑调试有用) | true or false |
| autoCropWidth | 默认生成截图框宽度 | 容器的80% | 0~max |
| autoCropHeight | 默认生成截图框高度 | 容器的80% | 0~max |
| fixed | 是否开启截图框宽高固定比例 | true | true or false |
| fixedNumber | 截图框的宽高比例 | [1, 1] | [宽度, 高度] |
| full | 是否输出原图比例的截图 | false | true or false |
| fixedBox | 固定截图框大小 不允许改变 | true | true or false |
| canMove | 上传图片是否可以移动 | true | true or false |
| canMoveBox | 截图框能否拖动 | false | true or false |
| original | 上传图片按照原始比例渲染 | false | true or false |
| centerBox | 截图框是否被限制在图片里面 | true | true or false |
| high | 是否按照设备的dpr 输出等比例图片 | true | true or false |
| infoTrue | true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | false | true or false |
| maxImgSize | 限制图片最大宽度和高度 | 2000 | 0-max |
| enlarge | 图片根据截图框输出比例倍数 | 1 | 0-max(建议不要太大不然会卡死的呢) |
| mode | 图片默认渲染方式 | 100% | contain, cover, 100px, 100% auto |
| cancelButtonText | 取消按钮文本 | 取消 | -- |
| confirmButtonText | 确定按钮文本 | 确定 | -- |
| cancelButtonBackgroundColor | 取消按钮背景色 | #606266 | -- |
| confirmButtonBackgroundColor | 确定按钮背景色 | #ed594c | -- |
| cancelButtonTextColor | 取消按钮字体色 | #ffffff | -- |
| confirmButtonTextColor | 确定按钮字体色 | #ffffff | -- |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| getbase64Data | 获取裁剪完成的 Base64 数据 | Base64 |
| getbase64 | 同上，兼容 CDN 使用 | base64 |
| getblobData | 获取裁剪完成的 Blob 数据 | Blob |
| getblob | 同上，兼容 CDN 使用 | Blob |
| getFile | 获取裁剪完成的 File 数据 | File |
| get-file | 同上，兼容 CDN 使用 | File |
| imgorigoinf | 获取裁剪前照片的数据（使用 hide-input 后不会触发） |
file |
| canceltailor | 进入裁剪框页面按取消按钮触发 | -- |
vue-cropper-h5简单的使用
<template>
<div class="dome">
<div>
<img :src="img" class="img" />
<input
style="opacity: 0;width: 50vw;height: 50vw;"
class="upbtn"
type="file"
accept="image/*"
@change="upphoto($event)"
ref="headinput"
/>
</div>
<div class="cropper">
<!-- <img :src="img" class="img" /> -->
<!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法 -->
<h5-cropper ref="H5Cropper" :hideInput="hideInput" :option="option" @getbase64Data="getbase64Data" @getblobData="getblobData" @getFile="getFile"></h5-cropper>
</div>
</div>
</template>
<script>
import H5Cropper from "vue-cropper-h5";
export default {
components: { H5Cropper },
data() {
return {
hideInput:true,//关闭默认的input框，可以自定义input
option: {
fixed:false,//截图框比例任意
canMove:true,//移动图片
canMoveBox:true,//移动截图框
fixedBox:false,//截图框大小任意
}, //配置
img:
require("@/assets/scid_btn_fmzm.png")
};
},
methods: {
getbase64Data(data) {
this.img = data;
},
getblobData(data){
console.log("getblobData="+data);
},
getFile(data){
console.log("getFile="+data);
},
//选择照片
//当hideInput:true,图片上传截取方法如下
async upphoto(e) {
let photourl = e.target.files[0];
this.$refs.headinput.value = null
if (photourl != undefined) {
this.$refs.H5Cropper.$emit("imgorigoinf", photourl);
this.$refs.H5Cropper.img = await this.$refs.H5Cropper.onloadimg(photourl);
this.$refs.H5Cropper.config.autoCrop = true;
setTimeout(() => {
this.$refs.H5Cropper.addsolide();
}, 10);
}
}
}
};
</script>
<style scoped>
.dome {
display: flex;
justify-content: space-between;
padding-left: 22px;
}
.cropper {
width: 80px;
height: 80px;
line-height: 80px;
/* 切记position: relative一定要有 */
position: relative;
border-radius: 80px;
overflow: hidden;
text-align: center;
}
.img {
position: absolute;
/* width: 100%;
height: 100%; */
width: 50vw;
height: 50vw;
left: 0;
top: 0;
}
.info {
font-size: 18px;
height: 40px;
line-height: 40px;
margin-left: 30px;
flex: 1;
text-align: left;
}
</style>
文件参考地址：
浙公网安备 33010602011771号