xyxiao001/vue-cropper

centerBox为true时，图片需要自适应

775822253 opened this issue · 18 comments

775822253 commented

目前的效果：centerBox为true, 并且设置了autoCropWidth以及autoCropHeight。上传的图片尺寸小于设置的值，会把设置的autoCropWidth以及autoCropHeight修改掉。

期望的效果：centerBox为true, 并且设置了autoCropWidth以及autoCropHeight时；无论上传的图片尺寸如何，都不要修改已设置的autoCropWidth以及autoCropHeight, 并且因为设置了centerBox为true, 初始化渲染时，图片尺寸过小或过大时，需要自动放大或缩小到符合centerBox为true的逻辑

xyxiao001 commented

mode可以控制图片尺寸，设置mode 为cover就行

775822253 commented

mode 设置为cover后，图片以容器的宽高去适应了，没有以裁剪框的宽高去适应

775822253 commented

设置了mode：cover后；
上传的大图尺寸为2648 × 5256，效果：
图片过大场景
上传的小图尺寸为300*300，效果：
图片300*300

775822253 commented

现在组件是以外面容器的宽高去cover的， 期望是以裁剪框的尺寸去cover

xyxiao001 commented

目前不支持图片以裁剪框的尺寸去渲染的

775822253 commented

好的，感谢大佬。 只是cover不是以裁剪框的话，这个属性就没意义了不是么

775822253 commented

大佬，mode属性文档中支持100px以及auto 100px这种宽高写法，我用了后，像是100px 200px属性设置后是没效果的； 还有写百分比有用，但是会把设置的autoCropWidth和autoCropHeight给修改掉。这个BUG可以修复吗

xyxiao001 commented

支持的

775822253 commented

目前mode="100px 200px"这种写法设置后,会把设置的autoCropWidth和autoCropHeight给修改掉

xyxiao001 commented

https://jsbin.com/zozidaferu/edit?html,js,output 测试发现确实centerbox是冲突的，感觉最优解还是通过mode: cover来控制好一点

775822253 commented

😭但是cover太大了，设置mode固定值也等于是可以自定义以某个尺寸来cover的， 大佬可以修复一下吗

xyxiao001 commented

mode支持固定值的 比如 200px auto这样的

775822253 commented

主要是需要和centerbox同时用，现在mode设置固定值，裁剪框的尺寸就被改掉了

xyxiao001 commented

那只能通过mode cover来进行兼容了，或者你动态的拿到图片尺寸后再进去设置mode

775822253 commented

最好还是组件能改一下，就是设置mode后，组件不要主动去改设置的裁剪框的宽高

xyxiao001 commented

后面我看看怎么修复下，这应该是centerbox做的处理

775822253 commented

好的好的，感谢大佬

775822253 commented

已经改源码改好了🤝