vue日益成熟(虽然我还在用2.0没有上到3.0),但是已经成为了主流的前端开发框架之一,于是衍生出了很多跨平台应用,各种常见的web及h5,在这个图片满天飞的时代,避免不了的就是上传图片,于是乎,诞生了一款来着xyxiao001大佬的vue-cropper,功能丰富还好用,唯一不足的就是对h5的样式支持比较滞后,于是乎这款超好用的vue-cropper-h5出现了!!!
jsdelivr(cdn):https://www.jsdelivr.com/package/npm/vue-cropper-h5
npm install vue-cropper-h5
or
yarn add vue-cropper-h5
or
cnpm install vue-cropper-h5
<template>
<div id="app">
<h5-cropper></h5-cropper>
</div>
</template>
<script>
// 局部引入
import H5Cropper from 'vue-cropper-h5'
export default {
name: 'App',
components: { H5Cropper }
};
// 全局引入
import H5Cropper from 'vue-cropper-h5'
Vue.use(H5Cropper)
</script>
cdn使用(版本详见jsdelivr)
简单示例:simple
高级示例(配合各种组件库的Upload使用):hide-input
引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
使用
<h5-cropper></h5-cropper>
事件
| getbase64 | 获取裁剪完成的 Base64 数据 |
| getblob | 获取裁剪完成的 Blob 数据 |
| get-file | 获取裁剪完成的 File 数据 |
<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>
可以到http://www.yi-school.top查看效果演示
感谢Violet_Ice紫冰提供的更新
名称 | 说明 | 默认值 | 可选值 |
---|---|---|---|
hide-input | 隐藏默认的<input type="file" /> |
false | true or false |
option | vue-cropper 的 Attr 配置 | {} | 详见Option及默认配置 |
关于配置详细信息,请查看源文档,感谢原作者xyxiao001大佬的vue-cropper
名称 | 功能 | 默认值 | 可选值 |
---|---|---|---|
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 | 进入裁剪框页面按取消按钮触发 | -- |
感谢Violet_Ice紫冰提供的更新,loadBase64 使用了正则校验:Base64 格式校验正则
接口名 | 说明 | 参数 |
---|---|---|
loadFile | 允许用户自行传入文件(配合 hide-input 使用) |
<file> |
loadBase64 | 允许用户自行传入 Base64 (配合 hide-input 使用) |
<base64> |
更新了原作者修复的bug,关于ios13.4图片旋转的问题
加入了用户点击取消按钮的回调事件(canceltailor)事件@Issues#13
优化了按钮在部分手机上的样式问题,感谢@尤小小提出的问题
加入按钮的可配置选项,文字,文字颜色,背景色,详见Option及默认配置
因为之前为了适配h5,我对原作者的vue-cropper有一点小修改,后面是放在coding上,然后coding改了路由规则,于是npm下载就报错了,感谢发现的热心码友告诉我,我得以即时更新,现在仓库挪到了github上,可能有点慢
请耐心等待,其次1.2.1更新了原作者修复的bug,关于谷歌81内核和ios13.5的图片旋转的,我也一并同步了,有兴趣的朋友可以去看看https://www.chromestatus.com/feature/6313474512650240
新增getFile和get-file获取裁剪完成的 File 数据,感谢@Violet_Ice紫冰
更新了一下cdn引入时的事件,因为之前事件getbase64Data和getblobData会在cdn引入的时候出现无法响应的情况,具体原因不明,如有大佬知道麻烦告知一下,谢谢!
于是在不影响旧事件的前提下,新增getbase64和getblob方法,方便各位cdn引入的朋友调用,感谢@awen1988,提出的问题及解决方案!
感谢下@Violet_Ice紫冰,一个很厉害的大佬,指出了我很多不规范的地方,还新加了两个接口(详见接口,也看了大佬指导的样式篇规范收益颇丰,再次感谢大佬!
感谢下第二位大佬,我的朋友@umbrella22贡献了一套他的webpack配置,顺带帮我优化了一下,再次感谢大佬!
部分码友反映称,原始图片太小会显示得很小,于是修改下默认渲染方式mode
新增@imgorigoinf方法,用于获取裁剪前照片的数据(File)
新增@getblobData方法,用于获取裁剪完成的照片blob数据
感谢码友提供的建议,由于很多不在微信浏览器使用,会有浏览器原生的菜单栏挡住底部按钮,现增加Boolean(ceilbutton),可以自行选择按钮在底部还是顶部,默认底部
同步更新原作者0.5版本vue-cropper,顺带限制了一下裁剪框最小大小
添加transform-runtime
采用异步方法onload图片
修复一下裁剪框初始化时堆积在左上角的问题
修复一下裁剪框参数不生效的问题(踩坑,js将未经申明的Boolean类型false等同于空字符串,if(false=='') => true)
如你所见,当前版本,1.0.2和1.0.0已经用不了了,如果有兴趣或者意见建议,欢迎Wechat告诉我
灰度测试 不可更改option和没有预留方法
初步更新,后面改了项目配置已经用不了
大佬写了个vue-cropper基本百度搜索vue裁剪框就有很多教程都是指向vue-cropper的,理所当然我白嫖了很久,还白嫖进大佬群里,哈哈哈进群方式见原作者github!vue-cropper
一个很有想法的ui,主要这次封装是在和ui做外包项目,ui提供要把vue-cropper改成和微信一样的思路包括细节,设计风格一贯简约新颖,有兴趣的话WeChat联系她吧(WeChat:Jane_Apricot)
更多常见我的nickname是居里栈栈,微信QQ同名,哈哈哈,其实我也就是一个在不断学习的学者,只是比别人稍微多一点行动力,譬如这次的npm模块封装,我从原本的啥都不会,到会发布,我很不好意思的想告诉你们,1.0.0版本其实和1.0.2版本核心代码一样,只是一开始的懵,我package.json文件写错了运行不起来,然后因为npm仓库我原本以为和GitHub一样最后可以删掉重来,没有想到npm过了24小时就不可以删除了,所以就留一下尴尬的历史,不过试错也是成长的一部分,希望大家共同进步,学有所成,最后祝大家新年快乐啦,外带提一句寻找高薪工作(h5,web,小程序)和诚接外包项目,有兴趣的朋友们记得找我聊聊,WeChat:812936565(备注GitHub)