scorpion-lailai
commented
3 weeks ago Open scorpion-lailai opened 3 weeks ago
scorpion-lailai
commented
3 weeks ago scorpion-lailai
commented
3 weeks ago My image display area is only this large and cannot be expanded
scorpion-lailai
commented
3 weeks ago 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={
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
commented
3 weeks ago { "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
commented
3 weeks ago Website Links： https://www.easys.tools/tools/image/imageEditor