diff --git a/apps/web-antd/src/components/cropper/src/cropper-modal.vue b/apps/web-antd/src/components/cropper/src/cropper-modal.vue index dc591953..e7daa940 100644 --- a/apps/web-antd/src/components/cropper/src/cropper-modal.vue +++ b/apps/web-antd/src/components/cropper/src/cropper-modal.vue @@ -84,6 +84,10 @@ function handleReady(cropperInstance: Cropper) { modalLoading(false); } +function handleReadyError() { + modalLoading(false); +} + function handlerToolbar(event: string, arg?: number) { if (event === 'scaleX') { scaleX = arg = scaleX === -1 ? 1 : -1; @@ -128,9 +132,11 @@ async function handleOk() { v-if="src" :circled="circled" :src="src" + crossorigin="anonymous" height="300px" @cropend="handleCropend" @ready="handleReady" + @ready-error="handleReadyError" /> @@ -322,7 +328,8 @@ async function handleOk() { &-cropper { height: 300px; background: #eee; - background-image: linear-gradient( + background-image: + linear-gradient( 45deg, rgb(0 0 0 / 25%) 25%, transparent 0, diff --git a/apps/web-antd/src/components/cropper/src/cropper.vue b/apps/web-antd/src/components/cropper/src/cropper.vue index 4089ba31..60c438d5 100644 --- a/apps/web-antd/src/components/cropper/src/cropper.vue +++ b/apps/web-antd/src/components/cropper/src/cropper.vue @@ -26,14 +26,14 @@ const props = defineProps({ src: { required: true, type: String }, }); -const emit = defineEmits(['cropend', 'ready', 'cropendError']); +const emit = defineEmits(['cropend', 'ready', 'cropendError', 'readyError']); const defaultOptions: Options = { aspectRatio: 1, autoCrop: true, background: true, center: true, - checkCrossOrigin: true, + checkCrossOrigin: false, checkOrientation: true, cropBoxMovable: true, cropBoxResizable: true, @@ -94,6 +94,11 @@ async function init() { if (!imgEl) { return; } + // 判断是否为正常访问的图片 + const resp = await fetch(props.src); + if (resp.status !== 200) { + emit('readyError'); + } cropper.value = new Cropper(imgEl, { ...defaultOptions, crop() {