Display issue after uploading image

[scorpion-lailai]

[scorpion-lailai]

My image display area is only this large and cannot be expanded

[scorpion-lailai]

import ToolsViewLayout from "@/layouts/tools.View.Layout";
import { downloadBase64File } from "@/utils/file";
import { UploadOutlined } from "@ant-design/icons";
import { Button, Row, message } from "antd";
import { useTranslations } from "next-intl";
import { useState } from "react";
import FilerobotImageEditor, {
TABS,
TOOLS,
} from "react-filerobot-image-editor";

function ImageEditorComponent() {
const [isImgEditorShown, setIsImgEditorShown] = useState(false);
const [source, setSource] = useState<string | null>(null);

const t = useTranslations("tools.imageEditor");
const translations = {
name: t("name"),
save: t("save"),
saveAs: t("saveAs"),
back: t("back"),
loading: t("loading"),
resetOperations: t("resetOperations"),
changesLoseWarningHint: t("changesLoseWarningHint"),
discardChangesWarningHint: t("discardChangesWarningHint"),
cancel: t("cancel"),
apply: t("apply"),
warning: t("warning"),
confirm: t("confirm"),
discardChanges: t("discardChanges"),
undoTitle: t("undoTitle"),
redoTitle: t("redoTitle"),
showImageTitle: t("showImageTitle"),
zoomInTitle: t("zoomInTitle"),
zoomOutTitle: t("zoomOutTitle"),
toggleZoomMenuTitle: t("toggleZoomMenuTitle"),
adjustTab: t("adjustTab"),
finetuneTab: t("finetuneTab"),
filtersTab: t("filtersTab"),
watermarkTab: t("watermarkTab"),
annotateTabLabel: t("annotateTabLabel"),
resize: t("resize"),
resizeTab: t("resizeTab"),
imageName: t("imageName"),
invalidImageError: t("invalidImageError"),
uploadImageError: t("uploadImageError"),
areNotImages: t("areNotImages"),
isNotImage: t("isNotImage"),
toBeUploaded: t("toBeUploaded"),
cropTool: t("cropTool"),
original: t("original"),
custom: t("custom"),
square: t("square"),
landscape: t("landscape"),
portrait: t("portrait"),
ellipse: t("ellipse"),
classicTv: t("classicTv"),
cinemascope: t("cinemascope"),
arrowTool: t("arrowTool"),
blurTool: t("blurTool"),
brightnessTool: t("brightnessTool"),
contrastTool: t("contrastTool"),
ellipseTool: t("ellipseTool"),
unFlipX: t("unFlipX"),
flipX: t("flipX"),
unFlipY: t("unFlipY"),
flipY: t("flipY"),
hsvTool: t("hsvTool"),
hue: t("hue"),
brightness: t("brightness"),
saturation: t("saturation"),
value: t("value"),
imageTool: t("imageTool"),
importing: t("importing"),
addImage: t("addImage"),
uploadImage: t("uploadImage"),
fromGallery: t("fromGallery"),
lineTool: t("lineTool"),
penTool: t("penTool"),
polygonTool: t("polygonTool"),
sides: t("sides"),
rectangleTool: t("rectangleTool"),
cornerRadius: t("cornerRadius"),
resizeWidthTitle: t("resizeWidthTitle"),
resizeHeightTitle: t("resizeHeightTitle"),
toggleRatioLockTitle: t("toggleRatioLockTitle"),
resetSize: t("resetSize"),
rotateTool: t("rotateTool"),
textTool: t("textTool"),
textSpacings: t("textSpacings"),
textAlignment: t("textAlignment"),
fontFamily: t("fontFamily"),
size: t("size"),
letterSpacing: t("letterSpacing"),
lineHeight: t("lineHeight"),
warmthTool: t("warmthTool"),
addWatermark: t("addWatermark"),
addTextWatermark: t("addTextWatermark"),
addWatermarkTitle: t("addWatermarkTitle"),
uploadWatermark: t("uploadWatermark"),
addWatermarkAsText: t("addWatermarkAsText"),
padding: t("padding"),
paddings: t("paddings"),
shadow: t("shadow"),
horizontal: t("horizontal"),
vertical: t("vertical"),
blur: t("blur"),
opacity: t("opacity"),
transparency: t("transparency"),
position: t("position"),
stroke: t("stroke"),
saveAsModalTitle: t("saveAsModalTitle"),
extension: t("extension"),
format: t("format"),
nameIsRequired: t("nameIsRequired"),
quality: t("quality"),
imageDimensionsHoverTitle: t("imageDimensionsHoverTitle"),
cropSizeLowerThanResizedWarning: t("cropSizeLowerThanResizedWarning"),
actualSize: t("actualSize"),
fitSize: t("fitSize"),
addImageTitle: t("addImageTitle"),
mutualizedFailedToLoadImg: t("mutualizedFailedToLoadImg"),
tabsMenu: t("tabsMenu"),
download: t("download"),
width: t("width"),
height: t("height"),
plus: t("plus"),
cropItemNoEffect: t("cropItemNoEffect"),
};

function downloadFile(base64String: string, fileName: string) {
downloadBase64File(base64String, fileName);
}

const openImgEditor = () => {
let input = document.createElement("input"); //创建input type='file'
input.type = "file";
input.onchange = (e) => {
const target = e.target as HTMLInputElement;
if (!target) {
return;
}
//上传图片
let files = target.files;
if (files) {
if (files[0].type.indexOf("image") == -1) {
message.error("please select a file");
return;
} //判断是不是图片
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = (e) => {
const target = e.target as FileReader;
if (!target) {
console.error("Event target is null");
return;
}
setSource(target.result as string);
};
}
};
input.click(); //触发上传
input.remove(); //删除input
setIsImgEditorShown(true);
};

const closeImgEditor = () => {
setSource(null);
setIsImgEditorShown(false);
};

return (
<>
<Row style={{ minHeight: "75vh" }} justify={"center"} align={"middle"}>
{!isImgEditorShown || !source ? (
<Button
type="primary"
style={{ fontSize: "16px" }}
icon={}
onClick={openImgEditor}
>
Upload

) : null}
{isImgEditorShown && source && (
<FilerobotImageEditor

          source={source} //图片的地址，或者base64
          //language='en'语言，默认是英语，可自定义，通过translations
          translations={translations}
          onSave={(editedImageObject, designState) => {
            // setSrc1(editedImageObject.imageBase64);
            console.log("saved", editedImageObject, designState);
            if (editedImageObject.imageBase64 && editedImageObject.fullName)
              downloadFile(
                editedImageObject.imageBase64,
                editedImageObject.fullName
              );
          }}
          onClose={closeImgEditor} //关闭
          annotationsCommon={{
            fill: "#ff0000",
          }}
          Text={{ text: "hello" }}
          Rotate={{ angle: 90, componentType: "slider" }}
          Crop={{
            presetsItems: [
              {
                titleKey: "classicTv",
                descriptionKey: "4:3",
                ratio: 4 / 3,
                // icon: CropClassicTv, // optional, CropClassicTv is a React Function component. Possible (React Function component, string or HTML Element)
              },
              {
                titleKey: "cinemascope",
                descriptionKey: "21:9",
                ratio: 21 / 9,
                // icon: CropCinemaScope, // optional, CropCinemaScope is a React Function component.  Possible (React Function component, string or HTML Element)
              },
            ],
            presetsFolders: [
              {
                titleKey: "socialMedia", // will be translated into Social Media as backend contains this translation key

                // icon: Social, // optional, Social is a React Function component. Possible (React Function component, string or HTML Element)
                groups: [
                  {
                    titleKey: "facebook",
                    items: [
                      {
                        titleKey: "profile",
                        width: 180,
                        height: 180,
                        descriptionKey: "fbProfileSize",
                      },
                      {
                        titleKey: "coverPhoto",
                        width: 820,
                        height: 312,
                        descriptionKey: "fbCoverPhotoSize",
                      },
                    ],
                  },
                ],
              },
            ],
          }}
          tabsIds={[
            TABS.ADJUST,
            TABS.ANNOTATE,
            TABS.WATERMARK,
            TABS.FILTERS,
            TABS.FINETUNE,
            TABS.RESIZE,
          ]} //侧边栏的选项
          defaultTabId={TABS.ANNOTATE} //用户打开插件后默认打开的选项卡。
          defaultToolId={TOOLS.TEXT} // 开插件后的默认打开工具，并且必须是与打开的选项卡相关的工具之一
          savingPixelRatio={0}
          previewPixelRatio={0}
        />
      )}
    </Row>
 
</>

);
}

export default ImageEditorComponent;

[scorpion-lailai]

{
"name": "word-press",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"postbuild": "next-sitemap",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@ant-design/cssinjs": "^1.17.0",
"@ant-design/icons": "^5.2.6",
"@ffmpeg/ffmpeg": "^0.12.10",
"@ffmpeg/util": "^0.12.1",
"@formatjs/intl-localematcher": "^0.5.4",
"@react-pdf/renderer": "^3.3.8",
"@types/negotiator": "^0.6.3",
"@types/node": "20.5.9",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
"antd": "^5.13.1",
"axios": "^1.5.0",
"browser-image-size": "^1.1.0",
"buffer": "^6.0.3",
"color-convert": "^2.0.1",
"compressorjs": "^1.2.1",
"convert-units": "^2.3.4",
"crypto-js": "^4.2.0",
"deepmerge": "^4.3.1",
"eslint": "8.48.0",
"eslint-config-next": "13.4.19",
"exif-js": "^2.3.0",
"fabric": "^5.3.0",
"file-saver": "^2.0.5",
"firebase": "^10.11.1",
"get-ascii-image": "^1.3.6",
"html-to-image": "^1.11.11",
"html2canvas": "^1.4.1",
"jsdom": "^24.0.0",
"jsoneditor": "^10.0.1",
"jsqr": "^1.4.0",
"jszip": "^3.10.1",
"mammoth": "^1.7.2",
"mobx": "^6.10.2",
"mobx-react": "^9.0.1",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"nanoid": "^3.1.23",
"next": "^14.2.3",
"next-intl": "^3.7.0",
"next-sitemap": "^4.2.3",
"node-rsa": "^1.1.1",
"pdf-lib": "^1.17.1",
"postcss": "^8.4.35",
"puppeteer": "^22.9.0",
"random-useragent": "^0.5.0",
"react": "18",
"react-advanced-calculator": "^1.0.4",
"react-dom": "18",
"react-draggable": "^4.4.6",
"react-filerobot-image-editor": "^4.8.1",
"react-image-color-picker": "^1.3.4",
"react-image-file-resizer": "^0.4.8",
"react-imported-component": "^6.5.3",
"react-konva": "^18.2.10",
"react-pdf": "^8.0.2",
"recordrtc": "^5.6.2",
"sass-loader": "^13.3.2",
"styled-components": "^6.1.11",
"tui-image-editor": "^3.15.3",
"typescript": "5.2.2"
},
"devDependencies": {
"@babel/cli": "^7.23.0",
"@babel/core": "^7.23.2",
"@babel/plugin-proposal-decorators": "^7.23.0",
"@babel/preset-env": "^7.23.2",
"@babel/preset-react": "^7.22.15",
"@svgr/webpack": "^8.1.0",
"@types/color-convert": "^2.0.3",
"@types/crypto-js": "^4.2.2",
"@types/fabric": "^5.3.7",
"@types/file-saver": "^2.0.7",
"@types/firebase": "^3.2.1",
"@types/jsdom": "^21.1.6",
"@types/jsoneditor": "^9.9.5",
"@types/node-rsa": "^1.1.4",
"@types/random-useragent": "^0.3.3",
"@types/recordrtc": "^5.6.14",
"css-loader": "^6.10.0",
"file-loader": "^6.2.0",
"postcss-loader": "^8.1.0",
"sass": "^1.68.0",
"style-loader": "^3.3.4"
}
}

[scorpion-lailai]

Website Links： https://www.easys.tools/tools/image/imageEditor

[AhmeeedMostafa]

@scorpion-lailai The plugin takes the HTML container's width & height so you should set some absolute height for your container element or try to use this property observePluginContainerSize