1 line
17 KiB
JavaScript
1 line
17 KiB
JavaScript
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-80089ee2"],{"0663":function(e,o,t){"use strict";t.r(o);var i,n=function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"wrapper"},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.model,expression:"model"}],staticClass:"model"},[t("div",{staticClass:"model-show",on:{click:function(o){e.model=!1}}},[t("img",{attrs:{src:e.modelSrc,alt:""},on:{click:function(o){e.model=!1}}})])]),t("div",{staticClass:"content"},[t("div",{staticClass:"show-info"},[t("div",{staticClass:"test test1"},[t("vueCropper",{ref:"cropper",attrs:{img:e.option.img,outputSize:e.option.size,outputType:e.option.outputType,info:!0,full:e.option.full,canMove:e.option.canMove,canMoveBox:e.option.canMoveBox,fixedBox:e.option.fixedBox,original:e.option.original,autoCrop:e.option.autoCrop,autoCropWidth:e.option.autoCropWidth,autoCropHeight:e.option.autoCropHeight,centerBox:e.option.centerBox,high:e.option.high,infoTrue:e.option.infoTrue,maxImgSize:e.option.maxImgSize,enlarge:e.option.enlarge,mode:e.option.mode,limitMinSize:e.option.limitMinSize},on:{realTime:e.realTime,imgLoad:e.imgLoad,cropMoving:e.cropMoving}})],1),t("div",{staticClass:"test-button"},[t("button",{staticClass:"btn",on:{click:e.changeImg}},[e._v("changeImg")]),t("label",{staticClass:"btn",attrs:{for:"uploads"}},[e._v("upload")]),t("input",{ref:"uploadImg",staticStyle:{position:"absolute",clip:"rect(0 0 0 0)"},attrs:{type:"file",id:"uploads",accept:"image/png, image/jpeg, image/gif, image/jpg"},on:{change:function(o){return e.uploadImg(o,1)}}}),e.crap?t("button",{staticClass:"btn",on:{click:e.stopCrop}},[e._v("stop")]):t("button",{staticClass:"btn",on:{click:e.startCrop}},[e._v("start")]),t("button",{staticClass:"btn",on:{click:e.clearCrop}},[e._v("clear")]),t("button",{staticClass:"btn",on:{click:e.refreshCrop}},[e._v("refresh")]),t("button",{staticClass:"btn",on:{click:function(o){return e.changeScale(1)}}},[e._v("+")]),t("button",{staticClass:"btn",on:{click:function(o){return e.changeScale(-1)}}},[e._v("-")]),t("button",{staticClass:"btn",on:{click:e.rotateLeft}},[e._v("rotateLeft")]),t("button",{staticClass:"btn",on:{click:e.rotateRight}},[e._v("rotateRight")]),t("button",{staticClass:"btn",on:{click:function(o){return e.finish("base64")}}},[e._v("preview(base64)")]),t("button",{staticClass:"btn",on:{click:function(o){return e.finish("blob")}}},[e._v("preview(blob)")]),t("button",{staticClass:"btn",on:{click:function(){return e.option.img=""}}},[e._v("清除图片")]),t("a",{staticClass:"btn",on:{click:function(o){return e.down("base64")}}},[e._v("download(base64)")]),t("a",{staticClass:"btn",on:{click:function(o){return e.down("blob")}}},[e._v("download(blob)")]),t("a",{ref:"downloadDom",attrs:{href:e.downImg,download:"demo.png"}})]),t("div",{staticClass:"pre"},[t("section",{staticClass:"pre-item"},[t("p",[e._v("截图框大小")]),t("div",{staticClass:"show-preview",style:{width:e.previews.w+"px",height:e.previews.h+"px",overflow:"hidden",margin:"5px"}},[t("div",{style:e.previews.div},[t("img",{style:e.previews.img,attrs:{src:e.previews.url}})])])]),t("section",{staticClass:"pre-item"},[t("p",[e._v("中等大小")]),t("div",{style:e.previewStyle1},[t("div",{style:e.previews.div},[t("img",{style:e.previews.img,attrs:{src:e.previews.url}})])])]),t("section",{staticClass:"pre-item"},[t("p",[e._v("迷你大小")]),t("div",{style:e.previewStyle2},[t("div",{style:e.previews.div},[t("img",{style:e.previews.img,attrs:{src:e.previews.url}})])])]),t("section",{staticClass:"pre-item",attrs:{title:"zoom: (100 / previews.w)"}},[t("p",[e._v("固定为100宽度")]),t("div",{style:e.previewStyle3},[t("div",{style:e.previews.div},[t("img",{style:e.previews.img,attrs:{src:e.previews.url}})])])]),t("section",{staticClass:"pre-item",attrs:{title:"zoom: (100 / previews.h)"}},[t("p",[e._v("固定为100高度")]),t("div",{style:e.previewStyle4},[t("div",{style:e.previews.div},[t("img",{style:e.previews.img,attrs:{src:e.previews.url}})])])])]),t("div",{staticStyle:{display:"block",width:"100%"}},[t("label",{staticClass:"c-item"},[t("span",[e._v("图片默认渲染方式")]),t("select",{directives:[{name:"model",rawName:"v-model",value:e.option.mode,expression:"option.mode"}],on:{change:function(o){var t=Array.prototype.filter.call(o.target.options,(function(e){return e.selected})).map((function(e){var o="_value"in e?e._value:e.value;return o}));e.$set(e.option,"mode",o.target.multiple?t:t[0])}}},[t("option",{attrs:{value:"contain"}},[e._v("contain")]),t("option",{attrs:{value:"cover"}},[e._v("cover")]),t("option",{attrs:{value:"400px auto"}},[e._v("400px auto")]),t("option",{attrs:{value:"auto 400px"}},[e._v("auto 400px")]),t("option",{attrs:{value:"50%"}},[e._v("50%")]),t("option",{attrs:{value:"auto 50%"}},[e._v("auto 50%")])]),t("section",[e._v("\n 类似css background属性设置 设置不符合规范不生效， 参照文档说明\n ")])]),t("label",{staticClass:"c-item"},[t("span",[e._v("上传时图片最大大小(默认会压缩尺寸到这个大小)")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.maxImgSize,expression:"option.maxImgSize"}],attrs:{type:"nubmer"},domProps:{value:e.option.maxImgSize},on:{input:function(o){o.target.composing||e.$set(e.option,"maxImgSize",o.target.value)}}})]),t("label",{staticClass:"c-item"},[t("span",[e._v("上传图片是否显示原始宽高 (针对大图 可以铺满)")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.original,expression:"option.original"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.original)?e._i(e.option.original,null)>-1:e.option.original},on:{change:function(o){var t=e.option.original,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"original",t.concat([a])):r>-1&&e.$set(e.option,"original",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"original",n)}}}),t("span",[e._v("original: "+e._s(e.option.original))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("是否根据dpr生成适合屏幕的高清图片")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.high,expression:"option.high"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.high)?e._i(e.option.high,null)>-1:e.option.high},on:{change:function(o){var t=e.option.high,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"high",t.concat([a])):r>-1&&e.$set(e.option,"high",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"high",n)}}}),t("span",[e._v("high: "+e._s(e.option.high))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("是否输出原图比例的截图")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.full,expression:"option.full"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.full)?e._i(e.option.full,null)>-1:e.option.full},on:{change:function(o){var t=e.option.full,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"full",t.concat([a])):r>-1&&e.$set(e.option,"full",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"full",n)}}}),t("span",[e._v("full: "+e._s(e.option.full))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("截图信息展示是否是真实的输出宽高")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.infoTrue,expression:"option.infoTrue"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.infoTrue)?e._i(e.option.infoTrue,null)>-1:e.option.infoTrue},on:{change:function(o){var t=e.option.infoTrue,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"infoTrue",t.concat([a])):r>-1&&e.$set(e.option,"infoTrue",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"infoTrue",n)}}}),t("span",[e._v("infoTrue: "+e._s(e.option.infoTrue))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("能否拖动图片")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.canMove,expression:"option.canMove"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.canMove)?e._i(e.option.canMove,null)>-1:e.option.canMove},on:{change:function(o){var t=e.option.canMove,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"canMove",t.concat([a])):r>-1&&e.$set(e.option,"canMove",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"canMove",n)}}}),t("span",[e._v("canMove: "+e._s(e.option.canMove))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("能否拖动截图框")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.canMoveBox,expression:"option.canMoveBox"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.canMoveBox)?e._i(e.option.canMoveBox,null)>-1:e.option.canMoveBox},on:{change:function(o){var t=e.option.canMoveBox,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"canMoveBox",t.concat([a])):r>-1&&e.$set(e.option,"canMoveBox",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"canMoveBox",n)}}}),t("span",[e._v("canMoveBox: "+e._s(e.option.canMoveBox))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("截图框固定大小")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.fixedBox,expression:"option.fixedBox"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.fixedBox)?e._i(e.option.fixedBox,null)>-1:e.option.fixedBox},on:{change:function(o){var t=e.option.fixedBox,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"fixedBox",t.concat([a])):r>-1&&e.$set(e.option,"fixedBox",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"fixedBox",n)}}}),t("span",[e._v("fixedBox: "+e._s(e.option.fixedBox))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("是否自动生成截图框")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.autoCrop,expression:"option.autoCrop"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.autoCrop)?e._i(e.option.autoCrop,null)>-1:e.option.autoCrop},on:{change:function(o){var t=e.option.autoCrop,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"autoCrop",t.concat([a])):r>-1&&e.$set(e.option,"autoCrop",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"autoCrop",n)}}}),t("span",[e._v("autoCrop: "+e._s(e.option.autoCrop))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("自动生成截图框的宽高")]),t("span",[e._v("宽度: ")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.autoCropWidth,expression:"option.autoCropWidth"}],attrs:{type:"number"},domProps:{value:e.option.autoCropWidth},on:{input:function(o){o.target.composing||e.$set(e.option,"autoCropWidth",o.target.value)}}}),t("span",[e._v("高度: ")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.autoCropHeight,expression:"option.autoCropHeight"}],attrs:{type:"number"},domProps:{value:e.option.autoCropHeight},on:{input:function(o){o.target.composing||e.$set(e.option,"autoCropHeight",o.target.value)}}})]),t("label",{staticClass:"c-item"},[t("span",[e._v("截图框是否限制在图片里(只有在自动生成截图框时才能生效)")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.centerBox,expression:"option.centerBox"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.option.centerBox)?e._i(e.option.centerBox,null)>-1:e.option.centerBox},on:{change:function(o){var t=e.option.centerBox,i=o.target,n=!!i.checked;if(Array.isArray(t)){var a=null,r=e._i(t,a);i.checked?r<0&&e.$set(e.option,"centerBox",t.concat([a])):r>-1&&e.$set(e.option,"centerBox",t.slice(0,r).concat(t.slice(r+1)))}else e.$set(e.option,"centerBox",n)}}}),t("span",[e._v("centerBox: "+e._s(e.option.centerBox))])]),t("label",{staticClass:"c-item"},[t("span",[e._v("是否按照截图框比例输出 默认为1 ")]),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.enlarge,expression:"option.enlarge"}],attrs:{type:"number"},domProps:{value:e.option.enlarge},on:{input:function(o){o.target.composing||e.$set(e.option,"enlarge",o.target.value)}}})]),t("p",[e._v("输出图片格式")]),t("label",{staticClass:"c-item"},[t("label",[e._v("jpg "),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.outputType,expression:"option.outputType"}],attrs:{type:"radio",name:"type",value:"jpeg"},domProps:{checked:e._q(e.option.outputType,"jpeg")},on:{change:function(o){return e.$set(e.option,"outputType","jpeg")}}})]),t("label",[e._v("png "),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.outputType,expression:"option.outputType"}],attrs:{type:"radio",name:"type",value:"png"},domProps:{checked:e._q(e.option.outputType,"png")},on:{change:function(o){return e.$set(e.option,"outputType","png")}}})]),t("label",[e._v("webp "),t("input",{directives:[{name:"model",rawName:"v-model",value:e.option.outputType,expression:"option.outputType"}],attrs:{type:"radio",name:"type",value:"webp"},domProps:{checked:e._q(e.option.outputType,"webp")},on:{change:function(o){return e.$set(e.option,"outputType","webp")}}})])])])])])])},a=[],r=t("7e79");function p(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function s(e){return s="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}var c=(i={name:"ImagCropper",components:{VueCropper:r["VueCropper"]},data:function(){return{model:!1,modelSrc:"",crap:!1,previews:{},lists:[{img:"https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"},{img:"http://cdn.xyxiao.cn/Landscape_1.jpg"},{img:"http://cdn.xyxiao.cn/Landscape_2.jpg"},{img:"http://cdn.xyxiao.cn/Landscape_3.jpg"},{img:"http://cdn.xyxiao.cn/Landscape_4.jpg"},{img:"http://cdn.xyxiao.cn/Portrait_1.jpg"},{img:"http://cdn.xyxiao.cn/Portrait_2.jpg"}],option:{img:"",size:1,full:!1,outputType:"png",canMove:!0,fixedBox:!1,original:!1,canMoveBox:!0,autoCrop:!0,autoCropWidth:200,autoCropHeight:150,centerBox:!1,high:!1,cropData:{},enlarge:1,mode:"contain",maxImgSize:3e3,limitMinSize:[100,120]},example2:{img:"http://cdn.xyxiao.cn/Landscape_2.jpg",info:!0,size:1,outputType:"jpeg",canScale:!0,autoCrop:!0,autoCropWidth:300,autoCropHeight:250,fixed:!0,infoTrue:!0,fixedNumber:[4,3]},example3:{img:"http://cdn.xyxiao.cn/Landscape_1.jpg",autoCrop:!0,autoCropWidth:200,autoCropHeight:200,fixedBox:!0},downImg:"#",previewStyle1:{},previewStyle2:{},previewStyle3:{},previewStyle4:{},code0:"",code1:"",code2:"",code3:"",preview3:""}},methods:{changeImg:function(){this.option.img=this.lists[~~(Math.random()*this.lists.length)].img},startCrop:function(){this.crap=!0,this.$refs.cropper.startCrop()},stopCrop:function(){this.crap=!1,this.$refs.cropper.stopCrop()},clearCrop:function(){this.$refs.cropper.clearCrop()},refreshCrop:function(){this.$refs.cropper.refresh()},changeScale:function(e){e=e||1,this.$refs.cropper.changeScale(e)},rotateLeft:function(){this.$refs.cropper.rotateLeft()},rotateRight:function(){this.$refs.cropper.rotateRight()},finish:function(e){var o=this;"blob"===e?this.$refs.cropper.getCropBlob((function(e){var t=window.URL.createObjectURL(e);o.model=!0,o.modelSrc=t})):this.$refs.cropper.getCropData((function(e){o.model=!0,o.modelSrc=e}))},realTime:function(e){var o=e,t=.5,i=.2;this.previewStyle1={width:o.w+"px",height:o.h+"px",overflow:"hidden",margin:"0",zoom:t},this.previewStyle2={width:o.w+"px",height:o.h+"px",overflow:"hidden",margin:"0",zoom:i},this.previewStyle3={width:o.w+"px",height:o.h+"px",overflow:"hidden",margin:"0",zoom:100/o.w},this.previewStyle4={width:o.w+"px",height:o.h+"px",overflow:"hidden",margin:"0",zoom:100/o.h},this.previews=e},finish2:function(e){var o=this;this.$refs.cropper2.getCropData((function(e){o.model=!0,o.modelSrc=e}))},finish3:function(e){var o=this;this.$refs.cropper3.getCropData((function(e){o.model=!0,o.modelSrc=e}))},down:function(e){var o=this;"blob"===e?this.$refs.cropper.getCropBlob((function(e){if(o.downImg=window.URL.createObjectURL(e),window.navigator.msSaveBlob){var t=new Blob([e]);window.navigator.msSaveBlob(t,"demo.png")}else o.$nextTick((function(){o.$refs.downloadDom.click()}))})):this.$refs.cropper.getCropData((function(e){if(o.downImg=e,window.navigator.msSaveBlob){var t=new Blob([e]);window.navigator.msSaveBlob(t,"demo.png")}else o.$nextTick((function(){o.$refs.downloadDom.click()}))}))},uploadImg:function(e,o){var t=this,i=e.target.files[0];if(!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value))return alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种"),!1;var n=new FileReader;n.onload=function(e){var i;i="object"===s(e.target.result)?window.URL.createObjectURL(new Blob([e.target.result])):e.target.result,1===o?t.option.img=i:2===o&&(t.example2.img=i),t.$refs.uploadImg.value=""},n.readAsArrayBuffer(i)},imgLoad:function(e){},cropMoving:function(e){this.option.cropData=e}}},p(i,"components",{VueCropper:r["VueCropper"]}),p(i,"mounted",(function(){this.changeImg();var e=[].slice.call(document.querySelectorAll("pre code"));e.forEach((function(e,o){hljs.highlightBlock(e)}))})),i),l=c,u=(t("19a3"),t("2877")),v=Object(u["a"])(l,n,a,!1,null,"2095ef4a",null);o["default"]=v.exports},"19a3":function(e,o,t){"use strict";t("e5b5")},e5b5:function(e,o,t){}}]); |