"use strict";(self["webpackChunkscui"]=self["webpackChunkscui"]||[]).push([[2822,1407],{6411:function(e,l,a){a.r(l),a.d(l,{default:function(){return m}});var t=a(641);const o=(0,t.Lk)("div",{class:"el-form-item-msg"},"固定选区或者不固定",-1),r=(0,t.Lk)("div",{class:"el-form-item-msg"},"图像压缩率，值为：0.1-1",-1),p=["src"];function s(e,l,a,s,c,u){const i=(0,t.g2)("sc-cropper"),d=(0,t.g2)("el-card"),m=(0,t.g2)("el-option"),n=(0,t.g2)("el-select"),b=(0,t.g2)("el-form-item"),g=(0,t.g2)("el-form"),f=(0,t.g2)("el-button"),k=(0,t.g2)("el-col"),F=(0,t.g2)("el-alert"),h=(0,t.g2)("sc-upload"),v=(0,t.g2)("el-row"),_=(0,t.g2)("el-main");return(0,t.uX)(),(0,t.Wv)(_,null,{default:(0,t.k6)((()=>[(0,t.bF)(v,{gutter:15},{default:(0,t.k6)((()=>[(0,t.bF)(k,{lg:14},{default:(0,t.k6)((()=>[(0,t.bF)(d,{shadow:"never"},{default:(0,t.k6)((()=>[(0,t.bF)(i,{src:c.cropperImg,compress:c.compress,aspectRatio:c.aspectRatio,ref:"cropper"},null,8,["src","compress","aspectRatio"])])),_:1}),(0,t.bF)(d,{shadow:"never",header:"参数和方法"},{default:(0,t.k6)((()=>[(0,t.bF)(g,{"label-width":"100px"},{default:(0,t.k6)((()=>[(0,t.bF)(b,{label:"aspectRatio"},{default:(0,t.k6)((()=>[(0,t.bF)(n,{modelValue:c.aspectRatio,"onUpdate:modelValue":l[0]||(l[0]=e=>c.aspectRatio=e),placeholder:"请选择"},{default:(0,t.k6)((()=>[(0,t.bF)(m,{label:"自由",value:0}),(0,t.bF)(m,{label:"1:1",value:1}),(0,t.bF)(m,{label:"4:3",value:4/3}),(0,t.bF)(m,{label:"16:9",value:16/9})])),_:1},8,["modelValue"]),o])),_:1}),(0,t.bF)(b,{label:"compress"},{default:(0,t.k6)((()=>[(0,t.bF)(n,{modelValue:c.compress,"onUpdate:modelValue":l[1]||(l[1]=e=>c.compress=e),placeholder:"请选择"},{default:(0,t.k6)((()=>[(0,t.bF)(m,{label:"0.1",value:.1},null,8,["value"]),(0,t.bF)(m,{label:"0.5",value:.5},null,8,["value"]),(0,t.bF)(m,{label:"1",value:1})])),_:1},8,["modelValue"]),r])),_:1})])),_:1}),(0,t.bF)(f,{type:"primary",plain:"",onClick:u.getBase64},{default:(0,t.k6)((()=>[(0,t.eW)("Base64")])),_:1},8,["onClick"]),(0,t.bF)(f,{type:"primary",plain:"",onClick:u.getBlob},{default:(0,t.k6)((()=>[(0,t.eW)("Blob")])),_:1},8,["onClick"]),(0,t.bF)(f,{type:"primary",plain:"",onClick:u.getFile},{default:(0,t.k6)((()=>[(0,t.eW)("File")])),_:1},8,["onClick"])])),_:1}),(0,t.bF)(d,{shadow:"never",header:"方法结果"},{default:(0,t.k6)((()=>[(0,t.Lk)("img",{src:c.imgData},null,8,p)])),_:1})])),_:1}),(0,t.bF)(k,{lg:10},{default:(0,t.k6)((()=>[(0,t.bF)(d,{shadow:"never",header:"已内置剪裁的上传组件"},{default:(0,t.k6)((()=>[(0,t.bF)(F,{title:"设置cropper就可以开启上传前剪裁, 并已封装compress和aspectRatio, 打开F12查看网络请求",type:"success",style:{"margin-bottom":"20px"}}),(0,t.bF)(h,{modelValue:c.uploadImg,"onUpdate:modelValue":l[2]||(l[2]=e=>c.uploadImg=e),title:"开启剪裁",cropper:!0,compress:1,aspectRatio:1},null,8,["modelValue"])])),_:1})])),_:1})])),_:1})])),_:1})}a(2838);var c=a(4669),u={name:"cropper",components:{scCropper:c["default"]},data(){return{cropperImg:"img/avatar.jpg",compress:.5,aspectRatio:0,uploadImg:"",imgData:""}},methods:{getBase64(){this.$refs.cropper.getCropData((e=>{this.imgData=e}))},getBlob(){this.$refs.cropper.getCropBlob((e=>{this.imgData=URL.createObjectURL(e)}))},getFile(){this.$refs.cropper.getCropFile((e=>{let l=document.createElement("a");l.download=e.name,l.href=URL.createObjectURL(e),l.click()}),"fileName.jpg","image/jpeg")}}},i=a(6262);const d=(0,i.A)(u,[["render",s]]);var m=d}}]);