使用vue-cropper截取用户头像或者签名图片时，小于定好的尺寸，会补充黑色背景问题结局

faye Fu

于 2024-04-07 13:20:14 发布

阅读量314

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Jacy_Fu/article/details/137460534

版权

好记性不如烂笔头；记录工作实践

只需要将outputType属性设置成png即可

<vue-cropper ref="cropper" :img="options.img" :info="true" 
   :outputType="options.outputType"
   :auto-crop="options.autoCrop"
   :auto-crop-width="options.autoCropWidth" :auto-crop-      
   height="options.autoCropHeight"
   :fixed-box="options.fixedBox" @realTime="realTime">
</vue-cropper>

options: {
   img: '',  // 需要剪裁的图片
   autoCrop: true, // 是否默认生成截图框
   autoCropWidth: 200, // 默认生成截图框的宽度
   autoCropHeight: 200, // 默认生成截图框的长度
   fixedBox: true, // 是否固定截图框的大小 不允许改变
   outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
},