Thu Feb 6 11:54:00 CST 2025 inscode

df8c2f01 · qq_41923622 · 7c2d9c59 · df8c2f01
隐藏空白更改
内联并排

Showing with 168 addition and 168 deletion

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

未找到文件。
--- a/src/tiny-image-editor/src/components/Upload.tsx
+++ b/src/tiny-image-editor/src/components/Upload.tsx
 // import { Popover } from '@casstime/bricks';
 import React, { forwardRef, useContext, useImperativeHandle } from 'react';
 import { ACTION, LANG, MENU_TYPE_ENUM, MENU_TYPE_TEXT } from '../constants';
 import { EditorContext } from '../util';
 import Popover from './setting/Popover';
 import {fabric} from 'fabric';
 function annotationsInit(annotations,canvas,historyRef){
           // 遍历标注信息，重新创建元素并添加到画布上
                annotations.forEach((annotation) => {
                    let newObject;
                    switch (annotation.type) {
                        case 'rect':
                            newObject = new fabric.Rect({
                                left: annotation.left,
                                top: annotation.top,
                                originX: 'left',
                                originY: 'top',
                                width: annotation.width,
                                height: annotation.height,
                                angle: annotation.angle,
                                fill: annotation.fill,
                                stroke: annotation.stroke,
                                scaleX: annotation.scaleX,
                                scaleY: annotation.scaleY,
                                 strokeWidth: annotation.size,
                                transparentCorners: false,
                                  opacity: annotation.opacity || 1
                            });
                            break;
                        case 'textbox':
                        case 'text':
                            newObject = new fabric.Textbox(annotation.text, {
                                left: annotation.left,
                                top: annotation.top,
                                width: annotation.width,
                                angle: annotation.angle,
                                fill: annotation.fill,
                                stroke: annotation.stroke,
                                scaleX: annotation.scaleX,
                                scaleY: annotation.scaleY,
                                  opacity: annotation.opacity || 1
                            });
                            break;
                        case 'circle':
                            newObject = new fabric.Circle({
                                left: annotation.left,
                                top: annotation.top,
                                radius: annotation.width / 2,
                                angle: annotation.angle||0,
                                fill: annotation.fill||'',
                                originX: 'left',
                                originY: 'top',
                                stroke: annotation.stroke,
                                scaleX: annotation.scaleX,
                                scaleY: annotation.scaleY,
                                strokeWidth: annotation.size,
                                  opacity: annotation.opacity || 1
                            });
                            break;
                        // 可以根据需要添加更多元素类型的处理
                    }
                    if (newObject) {
                     console.log(`annotation`,newObject,annotation,canvas)
                        canvas.add(newObject)
                                canvas.setActiveObject(newObject);
        historyRef.current.updateCanvasState(ACTION.add, true, true);
                        // canvas.setActiveObject(newObject);
                    }
                });
 }
 export const useUpload = () => {
  const {
    canvasInstanceRef,
    canvasEl,
    currentMenuRef,
    historyRef,
    setCurrentMenu,
    initBackGroundImage,
  } = useContext(EditorContext);
  const handleUpload = (e: any,imgData?:any) => {
    console.log(`e`,e,imgData)
    const canvas = canvasInstanceRef.current;
    if(canvasEl?.current&&typeof e === 'string'){
      let imgObj = new Image();
      imgObj.src = e as string;
      initBackGroundImage(e as string, true, () => {
        historyRef.current.updateCanvasState(ACTION.add);
        setTimeout(()=>{
  if(imgData){
 annotationsInit(imgData.annotations,canvas,historyRef);
   }
        })
      },5000);
      return;
    }
    if (
      !canvas ||
      !canvasEl.current ||
      !e.target.files.length ||
      !e.target.files[0]?.type?.includes('image')
    ) {
      return;
    }
    if (currentMenuRef.current !== MENU_TYPE_ENUM.upload) {
      setCurrentMenu(MENU_TYPE_ENUM.upload);
    }
    const reader = new FileReader();
    reader.onload = function (event) {
      if (!event || !event.target) {
        return;
      }
      let imgObj = new Image();
      imgObj.src = event.target.result as string;
      initBackGroundImage(event.target.result as string, true, () => {
        historyRef.current.updateCanvasState(ACTION.add);
      });
    };
    reader.readAsDataURL(e.target.files[0]);
  };
  return { handleUpload };
 };
 /** 上传 */
 export const Upload = forwardRef((props, ref) => {
  const {
    lang = LANG.en
  } = useContext(EditorContext);
  const { handleUpload } = useUpload();
  useImperativeHandle(
    ref,
    () => ({
      handleUpload: handleUpload,
    }),
    [handleUpload],
  );
  return (
    <>
    {/* <div className="tie-image-editor_tool-item tie-image-editor_tool-upload"> */}
      {/* <Popover content={MENU_TYPE_TEXT.upload[lang]} placement="top"> */}
        {/* <i className="tie-image-editor_icon"> */}
          {/* <input
            onChange={handleUpload}
            type="file"
            className="tie-image-editor_tool-upload-input"
            accept="image/*"
          /> */}
        {/* </i> */}
      {/* </Popover> */}
    {/* </div> */}
    </>
  );
 })