2277419213 / vue-cropper-h5

h5的万能裁剪框，基于vue，样式类似微信，超好用！走过路过，请留下你们的小星星

🦸🏻‍♂️  About Me

👋🏼  Hi I'm JuLiZhanZhan

✨  A front-end beginner who keeps learning  ✨

🛠  Tech Stack

               

👨🏻‍💻  My Stats

vue-cropper-h5's Issues

影藏hide-input以后自定义获取异常

this.$refs.cropper.loadFile 提示is not a function

部分机型上传图片出现旋转

小米8上QQ浏览器不能拍照上传，不知道是否还有其他机型有也有同样问题

项目打包后调用loadFile()后报错

更新vue-cropper版本

在ios上直接拍照的图片旋转了90度

@getbase64Data="getbase64Data" 安卓机子上传图片后 会黑屏10秒后 才出现 裁剪框和图片

@getbase64Data="getbase64Data" 安卓机子上传图片后 会黑屏10秒后 才出现图片 和裁剪框 和图片

组件以CDN方式使用可能会导致内置事件无法响应

SPA大行其道，现在应该很少有人用CDN方式使用组件了，但是作为一个前后端都要干的技术员，还是觉得jQuery那套引入就用真香，这个组件我试了一下非常棒，也支持cdn方式使用，直接使用dist/index.js即可，但是有个问题，部分情况会导致内置事件无响应，未经过其他场景验证，临时解决方案如下：
1、打开dist/index.js搜索关键词“getbase64Data”、“getblobData”并替换成小写，我直接替换成了base64和blob这样就可以响应事件了。
2、如遇到组件无法原样输出未渲染的情况，可以将标签改为小写-的形式
<h5-cropper :option="option" @base64="getbase64Data" @blob="getblobData"></h5-cropper>

Vue3 中getFile会连续触发两次

引用：


组件源码：

源码中定义了两个获取裁剪后File对象的方法：“getFile”和“get-file”，由于vue模板语法自动转换，“@getfile”和“@get-file”写法不敏感，会重复触发

canceltailor在cdn引入的情况下不能触发

部分手机会出现黑屏现象，目前原因暂时不明

最近上线的情况部分用户反馈选图后一直是黑框，但是手头没有测试机，暂时不清楚什么原因

在大图情况下，拖动图片到边缘，进行旋转操作会出现问题，裁剪框不会还原到中间

uniapp 编译出错 问题已放gitee上了

问题已放gitee上了

为什么有时候在剪裁页面时，取消和确认按钮会消失

页面有canvas 加载图片就很慢 一直黑屏 要吧canvas删掉才快

页面有canvas 加载图片就很慢 一直黑屏 要吧canvas删掉才快 这个怎么解决

建议在emit个取消按钮的事件

建议在emit个取消按钮的事件

vue3调用loadFile方法时报loadFile is not a function

能添加对heic格式图片的支持吗

现在导入heic格式图片 展示不出来

关于截图后生成的图片格式及名称问题

在使用getFile获取截图后的图片时，生成的文件名是随机的吗？格式目前是固定成png，可以实现跟传入图片的格式同步吗

iphone11自带浏览器 裁图界面的操作按钮显示不出来

iphone11自带浏览器 裁图界面的操作按钮显示不出来

cnpm install 不下来怎么办，一直重试

cnpm install 不下来怎么办，一直重试

⠦ [0/1] Installing vue-cropper@git+https://github.com/2277419213/vue-cropper.git#master[npminstall:get] retry GET https://github.com/2277419213/vue-cropper/tarball/master after 400ms, retry left 1, error: ResponseError: write EPROTO 4371340736:error:1409442E:SSL routines:ssl3_read_bytes:tlsv1 alert protocol version:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1407:SSL alert number 70
, GET https://github.com/2277419213/vue-cropper/tarball/master -1 (connected: true, keepalive socket: false, agent status: {"createSocketCount":6,"createSocketErrorCount":0,"closeSocketCount":5,"errorSocketCount":0,"timeoutSocketCount":2,"requestCount":4,"freeSockets":{},"sockets":{"github.com:443::::::::false:::::::134217728:":1},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 0)
headers: {}, status: -1, headers: {},
stack: Error: write EPROTO 4371340736:error:1409442E:SSL routines:ssl3_read_bytes:tlsv1 alert protocol version:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1407:SSL alert number 70

at WriteWrap.afterWrite [as oncomplete] (net.js:782:14)

⠇ [0/1] Installing vue-cropper@git+https://github.com/2277419213/vue-cropper.git#masterdownload tarball failed: write EPROTO 4371340736:error:1409442E:SSL routines:ssl3_read_bytes:tlsv1 alert protocol version:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1407:SSL alert number 70
, GET https://github.com/2277419213/vue-cropper/tarball/master -1 (connected: true, keepalive socket: false, agent status: {"createSocketCount":7,"createSocketErrorCount":0,"closeSocketCount":6,"errorSocketCount":0,"timeoutSocketCount":2,"requestCount":4,"freeSockets":{},"sockets":{"github.com:443::::::::false:::::::134217728:":1},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 0)
headers: {}, try to clone repository now.
git clone https://github.com/2277419213/vue-cropper.git /Users/lidope/Desktop/其他/node_modules/.tmp/d7140f74-d321-42e7-a898-796eff52260c

接口 那栏目的咋么使用啊

接口 那栏目的咋么使用啊

ios14.6 图片不会旋转了 但是插件旋转了一次

复用裁剪组件this指向信息变化

感谢大佬的插件，我开发的时候遇到一个问题，本意是使用vue-copper-h5封装一个可以裁剪上传的组件，在一个页面中，我使用了两次这个组件，但是发现第二个组件文件上传之后会将结果渲染到第一个组件中，一番排查之后发现一个奇怪的问题，我在第二个组件操作的时候，发现在getFile方法中this中的信息竟然指向了第一个组件中的信息；百思不得其解，求大佬指点迷津；
子组件：
`

<h5-cropper
  :key="emitKey"
  ref="copper"
  class="hidden-copper"
  :hide-input="false"
  :option="copperOption"
  @getFile="getFile"
>
</h5-cropper>

<script> import H5Cropper from "vue-cropper-h5"; import uploads from "@/api/trainweb/upload"; import { Image as VanImage } from "vant"; import { Toast } from "vant"; export default { name: "MobileCopper", components: { H5Cropper, VanImage }, computed: { imgUrl: { get() { return this.copperImg; }, set(val) { this.$emit('update:copperImg', val); // this.copperImg = val; } } }, data() { return { copperOption: { outputType: "jpeg", // 裁剪生成图片的格式 fixed: false, // 是否开启截图框狂傲固定比例 fixedBox: false, // 固定截图狂大小不允许改变？ canMoveBox: true, // 截图狂能否拖动 cancelButtonText: "取消", // 取消按钮文本 confirmButtonText: "确定", // 确定按钮文本 cancelButtonBackgroundColor: "#606266", // 取消按钮背景色 confirmButtonBackgroundColor: "#ed594c", // 确认按钮背景色 cancelButtonTextColor: "#FFFFFF", // 取消按钮字体色 confirmButtonTextColor: "#FFFFFF", // 确认按钮字体色 }, activingNow: '', }; }, props: { copperImg: { type: String, required: false, }, emitKey: { type: String, required: false } }, methods: { /* 触发裁剪方法 */ handleCopper(ref) { console.log('触发裁剪方法', this.emitKey) this.activingNow = this.emitKey; console.log('触发裁剪方法activingNow', this.activingNow) const winDom = document.querySelector("input.upbtn"); winDom.click(); }, /* 获取file文件 */ async getFile(file) { console.log('get file by copper', file); console.log('触发裁剪方法getFile', this.activingNow) let formData = new FormData(); formData.append("image", file); try { const res = await uploads.getUploadImgUrl(formData); console.log('res.data', res.data); // this.$emit('update:copperImg', res.data); if(this.emitKey) { console.log('自定义事件', this.activingNow) this.$emit(`${this.activingNow}`, res.data); } else { console.log('默认更新事件') this.$emit('update:copperImg', res.data); } } catch (err) { console.error("err", err); Toast('图片上传错误') } }, async handleGetFile(file, keyVal) { console.log('get file by copper', file); console.log('触发裁剪方法getFile', keyVal) let formData = new FormData(); formData.append("image", file); try { const res = await uploads.getUploadImgUrl(formData); console.log('res.data', res.data); // this.$emit('update:copperImg', res.data); if(this.emitKey) { console.log('自定义事件', keyVal) this.$emit( keyVal, res.data); } else { console.log('默认更新事件') this.$emit('update:copperImg', res.data); } } catch (err) { console.error("err", err); Toast('图片上传错误') } }, }, }; </script> <style lang="stylus" scoped> @import '~@/assets/css/variable'; @import '~@/assets/css/mobile'; .copper-upload { width: 100%; height: 100%; } .hidden-copper { width: 0; height: 0; } </style>

父组件使用：

<copper-upload-verso
key="idCardVersoImgUrlCoppered"
:emitKey="'idCardVersoImgUrlCoppered'"
@idCardVersoImgUrlCoppered="handleEmitVerso"
:copperImg.sync="idCardVersoImgUrlCoppered"
>

姓名面

`

选择图片的时候会出现旋转横屏问题

ios 12.0 拍照之后确定 会刷新页面

在浏览器打开问题

.wrapper{
height: calc(100vh - 21.333vw -50px);
}
这个好像没有处理浏览器底部选择栏问题，导致运行h5用浏览器打开项目后 底部按钮区域被浏览器底部tabbar遮盖住了

为什么裁剪后的图片 那么模糊了。。

为什么裁剪后的图片 那么模糊了。。
我上传1082px6744px 截图出来的base64 就是很糊 上面的文字都看不清 但是 我上传1080px1500px 截图出来的就是很清晰

仔细看了下 我上传1082px*6744px 是上传以后 生成的blob图片宽度和高度等比例缩小了 变成宽度320了

ios拍照会出现旋转90度

lock文件还是要有的，以免出现新版包不兼容的问题

https://github.com/imsnif/synp

synp 可以同步 yarn.lock 和 package-lock.json