{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/cropper","result":{"data":{"current":{"frontmatter":{"title":"Cropper","order":74,"brief":"Freely crop pictures","icon":"doc-cropper"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#basic-usage","title":"Basic usage"},{"url":"#customize-crop-box-ratio","title":"Customize crop box ratio"},{"url":"#controlled-rotationzooming-of-images","title":"Controlled rotation/zooming of images"},{"url":"#crop-box-settings","title":"Crop box settings"},{"url":"#实时预览裁切效果","title":"实时预览裁切效果"},{"url":"#api","title":"API"},{"url":"#methods","title":"Methods"}]},{"url":"#design-token","title":"Design Token"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 74,\n \"category\": \"Plus\",\n \"title\": \"Cropper\",\n \"icon\": \"doc-cropper\",\n \"dir\": \"column\",\n \"brief\": \"Freely crop pictures\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"When to use\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Cropper is used to crop pictures. It supports custom cropping box styles. The positions of the cropping box, cropped image can be adjusted by dragging. It can zoom and rotate the cropped pictures.\")), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Cropper is supported starting from version v2.73.0.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import { Cropper } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src\"), \" to set the cropped image; use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"shape\"), \" to set the shape of the cropping box, which defaults to square.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column noInline=true\",\n \"live\": \"true\",\n \"dir\": \"column\",\n \"noInline\": \"true\"\n }, \"import { Cropper, Button, RadioGroup, Radio } from '@douyinfe/semi-ui';\\nimport React, { useState, useRef, useCallback } from 'react';\\n\\nconst containerStyle = {\\n width: 550,\\n height: 300,\\n margin: 20,\\n}\\n\\nfunction Demo() {\\n const ref = useRef(null);\\n const [shape, setShape] = useState('rect');\\n const [cropperUrl, setCropperUrl] = useState('');\\n\\n const onButtonClick = useCallback(() => {\\n const canvas = ref.current.getCropperCanvas();\\n setCropperUrl(canvas.toDataURL());\\n }, []);\\n\\n const onShapeChange = useCallback((e) => {\\n setShape(e.target.value);\\n }, []);\\n\\n return <>\\n \\n rect\\n round\\n roundRect\\n \\n \\n \\n

\\n {cropperUrl && }\\n ;\\n}\\n\\nrender()\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Customize crop box ratio\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The initial crop box ratio can be passed through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultAspectRatio\"), \" (default is 1). A fixed crop box ratio can be set via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"aspectRatio\"), \".\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Setting \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultAspectRatio\"), \" only takes effect on the initial crop box ratio. When dragging, the crop box ratio will change with dragging.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When setting \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"aspectRatio\"), \", the crop box ratio is fixed, and the crop box will change according to this ratio when dragging.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column noInline=true\",\n \"live\": \"true\",\n \"dir\": \"column\",\n \"noInline\": \"true\"\n }, \"import { Cropper, Button, RadioGroup, Radio } from '@douyinfe/semi-ui';\\nimport React, { useState, useRef, useCallback } from 'react';\\n\\nconst containerStyle = {\\n width: 550,\\n height: 300,\\n margin: 20,\\n}\\n\\nfunction Demo() {\\n const ref = useRef(null);\\n const [cropperUrl, setCropperUrl] = useState('');\\n\\n const onButtonClick = useCallback(() => {\\n const canvas = ref.current.getCropperCanvas();\\n const url = canvas.toDataURL();\\n setCropperUrl(url);\\n }, []);\\n\\n return <>\\n \\n \\n

\\n {cropperUrl && }\\n ;\\n}\\n\\nrender()\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Controlled rotation/zooming of images\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Control image rotation and zoom through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rotate\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"zoom\"), \", and get the latest \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"zoom\"), \" value through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onZoomChange\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column noInline=true\",\n \"live\": \"true\",\n \"dir\": \"column\",\n \"noInline\": \"true\"\n }, \"import { Cropper, Button, Slider } from '@douyinfe/semi-ui';\\nimport React, { useState, useRef, useCallback } from 'react';\\n\\nconst containerStyle = {\\n width: 550,\\n height: 300,\\n margin: 20,\\n}\\n\\nconst actionStyle = {\\n marginTop: 20,\\n display: 'flex',\\n alignItems: 'center',\\n justifyContent: 'center',\\n width: 'fit-content'\\n}\\n\\nfunction Demo() {\\n const [rotate, setRotate] = useState(0);\\n const [zoom, setZoom] = useState(1);\\n const ref = useRef();\\n const [cropperUrl, setCropperUrl] = useState('');\\n\\n const onZoomChange = useCallback((value) => {\\n setZoom(value);\\n })\\n\\n const onSliderChange = useCallback((value) => {\\n setRotate(value);\\n }, []);\\n\\n const onButtonClick = useCallback(() => {\\n const canvas = ref.current.getCropperCanvas();\\n setCropperUrl(canvas.toDataURL());\\n }, []);\\n\\n return (\\n
\\n \\n
\\n Rotate\\n \\n
\\n
\\n Zoom\\n \\n
\\n
\\n \\n

\\n {cropperUrl && }\\n
\\n );\\n};\\n\\nrender()\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Crop box settings\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The crop box style can be customized through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"cropperBoxStyle\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"cropperBoxClassName\"), \". You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showResizeBox\"), \" to set whether to display the adjustment blocks at the corners of the crop box.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column noInline=true\",\n \"live\": \"true\",\n \"dir\": \"column\",\n \"noInline\": \"true\"\n }, \"import { Cropper, Button, Switch } from '@douyinfe/semi-ui';\\nimport React, { useState, useRef, useCallback } from 'react';\\n\\nconst containerStyle = {\\n width: 550,\\n height: 300,\\n margin: 20,\\n}\\n\\nconst centerStyle = {\\n display: 'flex', \\n alignItems: 'center', \\n justifyContent: 'center',\\n width: 'fit-content'\\n}\\n\\nfunction Demo() {\\n const ref = useRef(null);\\n const [cropperUrl, setCropperUrl] = useState('');\\n\\n const onButtonClick = useCallback(() => {\\n const canvas = ref.current.getCropperCanvas();\\n setCropperUrl(canvas.toDataURL());\\n }, []);\\n\\n return <>\\n showResizeBox = false\\uFF0Cand change the outline color of cropper box\\n \\n \\n

\\n {cropperUrl && }\\n ;\\n}\\n\\nrender()\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5B9E\\u65F6\\u9884\\u89C8\\u88C1\\u5207\\u6548\\u679C\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"preview\"), \" \\u6307\\u5B9A\\u9884\\u89C8\\u5BB9\\u5668\\uFF0C\\u5B9E\\u65F6\\u9884\\u89C8\\u88C1\\u5207\\u6548\\u679C\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column noInline=true\",\n \"live\": \"true\",\n \"dir\": \"column\",\n \"noInline\": \"true\"\n }, \"import { Cropper, Button, RadioGroup, Radio } from '@douyinfe/semi-ui';\\nimport React, { useState, useRef, useCallback } from 'react';\\n\\nconst containerStyle = {\\n width: 550,\\n height: 300,\\n margin: 20,\\n}\\n\\nconst actionStyle = {\\n marginTop: 20,\\n display: 'flex',\\n alignItems: 'center',\\n justifyContent: 'center',\\n width: 'fit-content'\\n}\\n\\nfunction Demo() {\\n const [rotate, setRotate] = useState(0);\\n const [zoom, setZoom] = useState(1);\\n const [cropperData, setCropperUrl ] = useState('');\\n const ref = useRef();\\n\\n const onZoomChange = useCallback((value) => {\\n setZoom(value);\\n })\\n\\n const onSliderChange = useCallback((value) => {\\n setRotate(value);\\n }, []);\\n\\n const onButtonClick = useCallback(() => {\\n const canvas = ref.current.getCropperCanvas();\\n const url = canvas.toDataURL();\\n setCropperUrl(url);\\n }, []);\\n\\n const preview = useCallback(() => {\\n const previewContainer = document.getElementById('previewWrapper');\\n return previewContainer;\\n }, []);\\n\\n return (\\n
\\n \\n
\\n \\u65CB\\u8F6C\\n \\n
\\n
\\n \\u7F29\\u653E\\n \\n
\\n
\\n
\\n
\\n \\u5B9E\\u65F6\\u9884\\u89C8\\n
\\n
\\n
\\n \\n

\\n \\n
\\n
\\n
\\n );\\n};\\n\\nrender()\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"API\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"PROPERTIES\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"INSTRUCTIONS\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"TYPE\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"DEFAULT\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"aspectRatio\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Crop box width to height ratio\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"cropperBoxClassName\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The class name passed to the crop box\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"cropperBoxStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The style passed to the crop box\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultAspectRatio\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Initial crop box ratio\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"imgProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Attributes passed through to the img tag\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"fill\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The fill color of the non-picture parts in the cropped result\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'rgba(0, 0, 0, 0)'\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"maxZoom\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Maximum zoom factor\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"3\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"minZoom\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Minimum zoom factor\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"0.1\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onZoomChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback during zoom transformation\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(zoom: number) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"preview\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The container of the preview image\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => HTMLElement\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"rotate\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"rotation angle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"shape\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Crop box shape\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'rect' \", \"|\", \" 'round' \", \"|\", \" 'roundRect'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'rect'\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"src\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The address of the cropped image\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showResizeBox\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to display the adjustment block of the cropping box\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"zoom\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Zoom value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"zoomStep\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Zoom step size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"0.1\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Methods\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Methods bound to component instances can be called through ref to achieve certain special interactions\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Name\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"getCropperCanvas\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Get the canvas of the cropped image\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Token\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/cropper","next":{"fields":{"slug":"zh-CN/show/cropper"},"id":"17ab92b2-fd9e-5884-a4c1-cbb2ed24d213","frontmatter":{"title":"Cropper 图片裁切","localeCode":"zh-CN","icon":"doc-cropper","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/image"},"id":"0ea1845b-da10-52c3-a3e0-e3719575e564","frontmatter":{"title":"Image 图片","localeCode":"zh-CN","icon":"doc-image","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}