chore: docs fix & img corss

1587315093 · Oct 31, 2023 · b4c7b57 · b4c7b57
1 parent 8222438
commit b4c7b57
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scratch-card-react",
-  "version": "1.1.0-alpha",
+  "version": "1.0.0-beta",
   "description": "scratch-card-react",
   "license": "MIT",
   "module": "dist/index.js",

diff --git a/src/assets/react.jpeg b/src/assets/react.jpeg
diff --git a/src/scratch-card/demo/DemoCop.tsx b/src/scratch-card/demo/DemoCop.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { CSSProperties, FC, ReactNode } from 'react';
 
 const DemoBlock: FC<{ children: ReactNode; title: string }> = (props) => {
   return (
@@ -9,14 +9,15 @@ const DemoBlock: FC<{ children: ReactNode; title: string }> = (props) => {
   );
 };
 
-const ChildrenElement = () => (
+const ChildrenElement: FC<{ style?: CSSProperties }> = (props) => (
   <div
     style={{
       width: '100%',
       height: '100%',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
+      ...props.style,
     }}
   >
     <span>恭喜您，刮中了法拉利5元代金劵</span>

diff --git a/src/scratch-card/demo/demo1.tsx b/src/scratch-card/demo/demo1.tsx
@@ -1,5 +1,4 @@
 import { ScratchCard } from 'scratch-card-react';
-import ReactImg from '../../assets/react.jpeg';
 import { ChildrenElement, DemoBlock } from './DemoCop';
 
 export default () => {
@@ -23,7 +22,13 @@ export default () => {
         </ScratchCard>
       </DemoBlock>
       <DemoBlock title="设置蒙版为图片">
-        <ScratchCard width={260} height={180} coverImg={ReactImg}>
+        <ScratchCard
+          width={260}
+          height={226}
+          coverImg={
+            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+          }
+        >
           <ChildrenElement />
         </ScratchCard>
       </DemoBlock>

diff --git a/src/scratch-card/demo/demo2.tsx b/src/scratch-card/demo/demo2.tsx
@@ -27,16 +27,18 @@ export default () => {
         <ScratchCard
           ref={cardRef}
           width={260}
-          height={180}
-          coverImg={import('../../assets/react.jpeg')}
+          height={226}
+          coverImg={
+            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+          }
           callbackInfo={{
             radio: 0.8,
             calllback: () => {
               alert('scratch done');
             },
           }}
         >
-          <ChildrenElement />
+          <ChildrenElement style={{ backgroundColor: 'red' }} />
         </ScratchCard>
         <button
           style={{

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -2,6 +2,7 @@ export function loadImage(url: string): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
     const img = new Image();
     img.src = url;
+    img.setAttribute('crossOrigin', '');
     img.onload = () => resolve(img);
     img.onerror = reject;
   });