search

xyxiao001 / vue-cropper

A simple picture clipping plugin for vue
https://github.xyxiao.cn/vue-cropper/docs/vue3.html
MIT License
4.32k stars 701 forks source link

预览框大小固定，可以把裁剪框的图，不论多大，都完整地显示在预览框里面吗？而不是只以左上角为基准，裁剪框比较大时，预览框显示不全 #203

Closed mj132 closed 5 years ago

JingBin4679 commented 5 years ago

同问

xyxiao001 commented 5 years ago

你的意思是实时预览吗

mj132 commented 5 years ago

是的，就是实时预览的图片大小可以设置吗，无论裁剪框的多大，实时预览显示的图片完整且大小固定

xyxiao001 commented 5 years ago

你可以通过实时获取裁剪的图片实现

mj132 commented 5 years ago

现在实时获取的图片是完整图片，只不过通过坐标偏移，超出部分隐藏，以左上角为基准，不能设置缩放大小吧

xyxiao001 commented 5 years ago

实时获取图片数据可以实现，我去研究下。怎么直接实现

XIEJUNXIRUOFENG commented 5 years ago

图片大小小于vue-cropper这个class设置的宽高时候会缩小，但是如果大于时候就不会放大，transform: scale(1, 1) translate3d(151.225px, 86.5px, 0px) rotateZ(0deg);cropper-box-canvas这个class的scale不会超过1，限制了放大了吗？

hzsrc commented 5 years ago

通过style.zoom按比例缩放即可，我在项目里实现了。 ` 

      </div>`

在js里面： computed: { previewStyle() { var previews = this.previews var cropperHeight = this.cropperHeight return { width: previews.w + 'px', height: previews.h + 'px', overflow: 'hidden', margin: 'auto', zoom: this.isLandscape ? this.previewWidth / previews.w : cropperHeight / previews.h } } }