Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display issue after uploading image #474

Open
scorpion-lailai opened this issue Jun 12, 2024 · 4 comments
Open

Display issue after uploading image #474

scorpion-lailai opened this issue Jun 12, 2024 · 4 comments

Comments

@scorpion-lailai
Copy link

scorpion-lailai commented Jun 12, 2024

page

@scorpion-lailai
Copy link
Author

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

@scorpion-lailai
Copy link
Author

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
Copy link
Author

{
"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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant