label-print-design/es/components/design/image/image.vue2.mjs.map

操作简单，组件丰富的一站式打印解决方案打印设计器

{"version":3,"file":"image.vue2.mjs","sources":["../../../../../../src/components/design/image/image.vue"],"sourcesContent":["<template>\n    <div class=\"width-100-p height-100-p\">\n        <div v-if=\"element.data != null\" class=\"img_wrapper\">\n            <img\n                ref=\"imgRef\"\n                draggable=\"false\"\n                @load=\"loadImg\"\n                :style=\"{width: valueUnit(element.width, getRecursionParentPanel(element)), height: valueUnit(element.height, getRecursionParentPanel(element))}\"\n                :src=\"contentBase64\" alt=\"image\" />\n            \n            <div class=\"img-tool_wrapper\"\n                 v-if=\"displayDesign(element) && elementHandleStatusList.includes(element.runtimeOption.status)\">\n                <my-icon class=\"img-tool-icon\" @click=\"editImgClick\">\n                    <Crop />\n                </my-icon>\n                <!--        <el-icon class=\"img-tool-icon\">-->\n                <!--          <MoreFilled/>-->\n                <!--        </el-icon>-->\n            </div>\n        </div>\n        <div class=\"choose-img_wrapper\" v-else>\n            <my-icon v-if=\"displayDesign(element)\"\n                     :size=\"20\"\n                     class=\"avatar-uploader-icon\" @click=\"clickPlus\">\n                <Plus />\n            </my-icon>\n        \n        </div>\n        <my-dialog\n            class=\"image-crop-dialog\"\n            v-model=\"data.cropVisible\"\n            width=\"640px\"\n            title=\"图片裁剪\">\n            <div style=\"width: 640px; height: 640px\">\n                <VueCropper ref=\"cropper\"\n                            :img=\"sourceBase64\"\n                            :outputSize=\"option.outputSize\"\n                            :outputType=\"option.outputType\"\n                            :info=\"option.info\"\n                            :canScale=\"option.canScale\"\n                            :autoCrop=\"option.autoCrop\"\n                            :autoCropWidth=\"option.autoCropWidth\"\n                            :autoCropHeight=\"option.autoCropHeight\"\n                            :fixed=\"element.option.keepRatio\"\n                            :fixedNumber=\"option.fixedNumber\"\n                            :full=\"option.full\"\n                            :fixedBox=\"option.fixedBox\"\n                            :canMove=\"option.canMove\"\n                            :canMoveBox=\"option.canMoveBox\"\n                            :original=\"option.original\"\n                            :centerBox=\"option.centerBox\"\n                            :height=\"option.height\"\n                            :infoTrue=\"option.infoTrue\"\n                            :maxImgSize=\"option.maxImgSize\"\n                            :enlarge=\"option.enlarge\"\n                            :mode=\"option.mode\"\n                            @realTime=\"realTime\"\n                            @imgLoad=\"imgLoad\">\n                </VueCropper>\n            \n            </div>\n            <div class=\"image-handle-wrapper\">\n                <my-icon class=\"image-handle-icon\" @click=\"imageZoomIn\">\n                    <ZoomIn />\n                </my-icon>\n                <my-icon class=\"image-handle-icon\" @click=\"imageZoomOut\">\n                    <ZoomOut />\n                </my-icon>\n                <my-icon class=\"image-handle-icon\" @click=\"rotateLeft\">\n                    <RefreshLeft />\n                </my-icon>\n                <my-icon class=\"image-handle-icon\" @click=\"rotateRight\">\n                    <RefreshRight />\n                </my-icon>\n                <my-icon class=\"image-handle-icon-sure\" @click=\"sureClip\">\n                    <Check />\n                </my-icon>\n            </div>\n        \n        </my-dialog>\n        \n        <my-dialog\n            class=\"choose-image-type-dialog\"\n            :show-header=\"false\"\n            v-model=\"data.chooseImageVisible\"\n            @close=\"handleCloseChooseImageDialog\"\n            width=\"520px\">\n            \n            <div class=\"choose-image-type-dialog-header display-flex\">\n                <!--        <div class=\"choose-image-type-dialog-header_tab\">-->\n                <!--          <div class=\"choose-image-type-dialog-header-title\">本地上传</div>-->\n                <!--          <div class=\"choose-image-type-dialog-header-title\">图片链接</div>-->\n                <!--        </div>-->\n                <my-tabs class=\"choose-image-type-dialog-header_tab\" v-model=\"data.chooseImageType\"\n                         :item-list=\"chooseImgTypeList\" />\n                <my-icon color=\"#666666\" size=\"20\" class=\"cursor-pointer\" @click=\"data.chooseImageVisible = false\">\n                    <CloseBold />\n                </my-icon>\n            </div>\n            \n            <div class=\"choose-image-localFile-panel display-flex\" v-if=\"data.chooseImageType == 'localFile'\">\n                <div class=\"choose-image-localFile-btn\" @click=\"chooseImage\">上传本地图片</div>\n            </div>\n            \n            <div class=\"choose-image-url-panel display-flex display-flex-column\" v-if=\"data.chooseImageType == 'url'\">\n                <my-input class=\"choose-image-url-input\" placeholder=\"请输入网络地址http/https\"\n                          v-model=\"imageHttpUrlInput\" />\n                \n                <div class=\"choose-image-url-btn\" @click=\"clickSureImageHttpUrl\">\n                    确认\n                </div>\n            </div>\n        </my-dialog>\n        \n        <input type=\"file\" ref=\"uploadFileRef\" style=\"visibility: hidden\"\n               accept=\"image/png, image/jpeg, image/jpg\" @change=\"selectImg($event)\">\n    \n    </div>\n</template>\n<script setup lang=\"ts\">\nimport 'vue-cropper/dist/index.css';\nimport { VueCropper } from 'vue-cropper';\nimport { onMounted, reactive, ref } from 'vue-demi';\nimport { MyElement } from '@myprint/design/types/entity';\n// import {useBase64} from \"@vueuse/core\";\nimport {\n    displayDesign,\n    getRecursionParentPanel,\n    valueUnit\n} from '@myprint/design/utils/elementUtil';\nimport { unit2px } from '@myprint/design/utils/devicePixelRatio';\nimport { chooseImgTypeList, elementHandleStatusList } from '@myprint/design/constants/common';\nimport MyTabs from '@myprint/design/components/my/tabs/my-tabs.vue';\nimport MyDialog from '@myprint/design/components/my/dialog/my-dialog.vue';\nimport MyIcon from '@myprint/design/components/my/icon/my-icon.vue';\nimport Crop from '@myprint/design/components/my/icon/icons/Crop.vue';\nimport Plus from '@myprint/design/components/my/icon/icons/Plus.vue';\nimport ZoomIn from '@myprint/design/components/my/icon/icons/ZoomIn.vue';\nimport ZoomOut from '@myprint/design/components/my/icon/icons/ZoomOut.vue';\nimport RefreshLeft from '@myprint/design/components/my/icon/icons/RefreshLeft.vue';\nimport RefreshRight from '@myprint/design/components/my/icon/icons/RefreshRight.vue';\nimport Check from '@myprint/design/components/my/icon/icons/Check.vue';\nimport CloseBold from '@myprint/design/components/my/icon/icons/CloseBold.vue';\nimport { downloadImg2Base64 } from '@myprint/design/utils/utils';\nimport MyInput from '@myprint/design/components/my/input/my-input.vue';\nimport { isEmpty } from 'lodash';\nimport { MyMessage } from '@myprint/design/components/my/message/my-message';\n\nconst props = withDefaults(defineProps<{\n    element?: MyElement\n}>(), {\n    element: () => ({} as MyElement)\n});\n// type s = typeof VueCropper\nconst cropper = ref({} as InstanceType<any>);\nconst uploadFileRef = ref<HTMLInputElement>();\nconst sourceBase64 = ref();\nconst contentBase64 = ref();\nconst imageHttpUrlInput = ref('');\n\nconst option = reactive({\n    outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)\n    outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）\n    info: true, //图片大小信息\n    canScale: true, //图片是否允许滚轮缩放\n    autoCrop: true, //是否默认生成截图框\n    autoCropWidth: unit2px(props.element.width, getRecursionParentPanel(props.element)), //默认生成截图框宽度\n    autoCropHeight: unit2px(props.element.height, getRecursionParentPanel(props.element)), //默认生成截图框高度\n    fixed: true, //是否开启截图框宽高固定比例\n    fixedNumber: [props.element.width, props.element.height], //截图框的宽高比例\n    full: true, //false按原比例裁切图片，不失真\n    fixedBox: false, //固定截图框大小，不允许改变\n    canMove: true, //上传图片是否可以移动\n    canMoveBox: true, //截图框能否拖动\n    original: false, //上传图片按照原始比例渲染\n    centerBox: false, //截图框是否被限制在图片里面\n    height: true, //是否按照设备的dpr 输出等比例图片\n    infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高\n    maxImgSize: 3000, //限制图片最大宽度和高度\n    enlarge: 1, //图片根据截图框输出比例倍数\n    mode: '640px 640px' //图片默认渲染方式\n});\n\n// console.log(option)\nconst data = reactive({\n    cropVisible: false,\n    chooseImageVisible: false,\n    dragFlag: false,\n    chooseImageType: 'localFile'\n});\n\nfunction editImgClick() {\n    data.cropVisible = true;\n}\n\nfunction realTime(_data: any) {\n    // console.log(data)\n    // let that = this\n    // that.previews = data\n    \n}\n\nfunction imageZoomIn() {\n    cropper.value.changeScale(1);\n}\n\nfunction imageZoomOut() {\n    cropper.value.changeScale(-1);\n    \n}\n\nfunction rotateLeft() {\n    cropper.value.rotateLeft();\n}\n\nfunction rotateRight() {\n    cropper.value.rotateRight();\n}\n\nfunction sureClip() {\n    cropper.value.getCropBlob((result: any) => {\n        blobToDataURI(result, function(res: any) {\n            // console.log(res)\n            // that.previewImg = res\n            props.element.data = res;\n            contentBase64.value = res;\n            data.cropVisible = false;\n        });\n    });\n}\n\nfunction blobToDataURI(blob: any, callback: any) {\n    var reader = new FileReader();\n    reader.readAsDataURL(blob);\n    reader.onload = function(e) {\n        callback(e.target!.result);\n    };\n}\n\nfunction imgLoad() {\n\n}\n\nfunction selectImg(event: any) {\n    \n    let file = event.target.files[0];\n    if (!/\\.(jpg|jpeg|png|JPG|PNG)$/.test(event.target.value)) {\n        // this.$message({\n        //   message: '图片类型要求：jpeg、jpg、png',\n        //   type: \"error\"\n        // });\n        return false;\n    }\n    // console.log('选择图片')\n    //转化为blob\n    let reader = new FileReader();\n    reader.onload = (e) => {\n        // console.log('选择图片1', e.target.result)\n        if (typeof e.target!.result === 'object') {\n            sourceBase64.value = window.URL.createObjectURL(new Blob([e.target!.result!]));\n            // console.log('选择图片3')\n        } else {\n            sourceBase64.value = e.target!.result;\n            props.element.data = sourceBase64.value;\n            // console.log(sourceBase64.value)\n            // console.log('选择图片2', props.element.data)\n        }\n        contentBase64.value = sourceBase64.value;\n        \n        data.chooseImageVisible = false;\n        // data.cropVisible = true\n    };\n    //转化为base64\n    reader.readAsDataURL(file);\n}\n\nfunction clickSureImageHttpUrl() {\n    if (isEmpty(imageHttpUrlInput.value)) {\n        MyMessage.error('请输入图片地址');\n    }\n    if (!imageHttpUrlInput.value.startsWith('http') && !imageHttpUrlInput.value.startsWith('https')) {\n        MyMessage.error('图片地址需要以http/https开头');\n    }\n    props.element.data = imageHttpUrlInput.value;\n    loadData();\n}\n\nfunction handleCloseChooseImageDialog() {\n    imageHttpUrlInput.value = '';\n}\n\nfunction clickPlus(_ev: any) {\n    data.chooseImageVisible = true;\n    // uploadFileRef.value!.click()\n}\n\nfunction chooseImage(_ev: any) {\n    uploadFileRef.value!.click();\n}\n\nconst imgRef = ref<HTMLImageElement>();\nonMounted(() => {\n    loadData();\n});\n\nfunction loadData() {\n    if (!props.element.data) {\n        return;\n    }\n    if ((props.element.data as string).startsWith('http')) {\n        downloadImg2Base64(props.element.data)\n            .then(base64 => {\n                sourceBase64.value = base64;\n                contentBase64.value = base64;\n            }).catch(_e => {\n            \n        });\n    } else {\n        sourceBase64.value = props.element.data;\n        contentBase64.value = props.element.data;\n    }\n}\n\nfunction loadImg() {\n    // console.log(props.element, imgRef);\n    // if (imgRef.value!) {\n    //     const ratioTmp = imgRef.value!.width / imgRef.value!.height;\n    // }\n}\n</script>\n"],"names":[],"mappings":"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"}