✨ add imgCrossOrigin prop

Author: Hccake

README.md

@@ -104,11 +104,12 @@ VueCropper props that can be used are divided into two parts, custom and all pro
 
 ### custom options
 
-| Property | Description                         | Type    | Required |
-| :------- | :---------------------------------- | :------ | :------- |
-| src      | origin image src                    | string  | true     |
-| imgStyle | the img element style               | object  | --       |
-| alt      | the img element alt attribute value | boolean | --       |
+| Property       | Description                                 | Type    | Required |
+| :------------- | :------------------------------------------ | :------ | :------- |
+| src            | origin image src                            | string  | true     |
+| imgStyle       | the img element style                       | object  | --       |
+| imgCrossOrigin | the img element crossOrigin attribute value | string  | --       |
+| alt            | the img element alt attribute value         | boolean | --       |
 
 ### Cropperjs options
 

src/VueCropper.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
-    <img ref="imageRef" :src="props.src" :alt="props.alt" :style="[imageStyle, props.imgStyle]" />
+    <img
+      ref="imageRef"
+      :src="props.src"
+      :alt="props.alt"
+      :crossorigin="imgCrossOrigin"
+      :style="[imageStyle, props.imgStyle]"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import Cropper from 'cropperjs'
 import { nextTick, onMounted, ref, toRaw, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
+import type { CSSProperties, PropType, ImgHTMLAttributes } from 'vue'
 /* Ensure the size of the image fit the container perfectly */
 const imageStyle = {
   display: 'block',
@@ -28,6 +34,10 @@ const props = defineProps({
     type: Object as PropType<CSSProperties>,
     default: () => ({})
   },
+  imgCrossOrigin: {
+    type: String as PropType<ImgHTMLAttributes['crossorigin']>,
+    default: undefined
+  },
   // ========= CropperJS options =======
   // Define the view mode of the cropper
   viewMode: {
@@ -218,21 +228,24 @@ const props = defineProps({
 
 const imageRef = ref()
 
-let cropper: Cropper
-
+let cropper: Cropper | undefined
 function initCropper() {
-  return new Cropper(imageRef.value, toRaw(props) as unknown as Cropper.Options)
+  if (props.src) {
+    cropper = new Cropper(imageRef.value, toRaw(props) as unknown as Cropper.Options)
+  } else {
+    cropper = undefined
+  }
 }
 
 // init when first mounted
-onMounted(() => (cropper = initCropper()))
+onMounted(initCropper)
 
 // reinit when props change
 watch(
   () => props,
   () => {
-    cropper.destroy()
-    nextTick(() => (cropper = initCropper()))
+    cropper?.destroy()
+    nextTick(initCropper)
   },
   { deep: true }
 )
@@ -440,15 +453,19 @@ defineExpose({
    * flip the image horizontally
    */
   flipX() {
-    const { scaleX } = cropper.getData()
-    cropper.scaleX(-scaleX)
+    if (cropper) {
+      const { scaleX } = cropper.getData()
+      cropper.scaleX(-scaleX)
+    }
   },
   /**
    * flip the image vertically
    */
   flipY() {
-    const { scaleY } = cropper.getData()
-    cropper.scaleY(-scaleY)
+    if (cropper) {
+      const { scaleY } = cropper.getData()
+      cropper.scaleY(-scaleY)
+    }
   }
 })
 </script>