Fri Feb 14 13:04:00 CST 2025 inscode

demos/Basic.tsx

+import React, { useRef } from 'react';
+import { Editor } from 'tiny-image-editor';
+import image from './basic.jpg';
+// 
+
+
+const Demo = () => {
+  const EditorRefID =useRef<HTMLCanvasElement>(null);
+setTimeout(()=>{
+  console.log(`dddd`,EditorRefID);
+    const handleUpload =  EditorRefID?.current?.uploadRef?.current?.handleUpload;
+  
+        handleUpload('https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990010.jpg!w320')
+
+},1000)
+setTimeout(()=>{
+  
+    const handleUpload =  EditorRefID?.current?.uploadRef?.current?.handleUpload;
+  
+         const xhr = new XMLHttpRequest();
+            // 要请求的 URL
+            const url = 'https://vercel-api.fivecc.cn/api/annotation';
+            xhr.open('GET', url, true);
+
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) {
+                    if (xhr.status === 200) {
+                        const responseData = JSON.parse(xhr.responseText);
+                       console.log(`asd`,responseData)
+                       
+                       Object.keys(responseData.data).forEach((k)=>{
+                       let itemObj = responseData.data[k]
+                       handleUpload(itemObj.imgUrl,itemObj)
+                       })
+                    } else {
+                        resultDiv.textContent = `Error: ${xhr.status}`;
+                    }
+                }
+            };
+
+            xhr.send();
+
+},6000)
+  return (
+    <div style={{width:"100%",height:"100%"}}>
+      <Editor ref={EditorRefID} url={image} />
+    </div>
+  );
+};
+
+export default Demo;

src/tiny-image-editor/src/components/Download.tsx

@@ -3,7 +3,7 @@ import { IMAGE_NAME, LANG, MENU_TYPE_TEXT } from '../constants';
 import { EditorContext, base64ToBlob, isSupportFileApi } from '../util';
 import Popover from './setting/Popover';
 
-function extractImageNames(str) {
+function extractImageNames(str:any) {
     // 定义更通用的正则表达式
     const regex = /([^\/!]+?)\.(?:jpeg|jpg|png|gif|bmp)(?![^!]*\.)/gi;
     const matches = [];
@@ -25,7 +25,7 @@ const useDownload = () => {
     // 获取画布上的所有元素
     const allObjects = canvas.getObjects();
  // 存储标注信息的数组
- const annotations = [];
+ const annotations:[] = [];
 
    function getDeviceId() {
             let deviceId = localStorage.getItem('deviceId');

src/tiny-image-editor/src/components/Upload.tsx

@@ -14,7 +14,6 @@ function annotationsInit(imgData, canvas, historyRef, positionInfo) {
     // 遍历标注信息，重新创建元素并添加到画布上
     imgData.annotations.forEach((annotation) => {
         let newObject;
-
         switch (annotation.type) {
             case 'rect':
                 newObject = new fabric.Rect({
@@ -157,7 +156,7 @@ export const useUpload = () => {
 
                     });
                     return;
-                }, {
+                },{
                         newLeft,
                         newTop,
                         newScaleFactor,

src/tiny-image-editor/src/util.ts

@@ -23,6 +23,7 @@ export interface IEditorContextProps extends IEditorProps {
     imageUrl: string,
     justBackground: boolean,
     callback?: () => void,
+    annotationsData?:any
   ) => void;
 }