{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/cropper","result":{"data":{"current":{"frontmatter":{"title":"Cropper 图片裁切","order":74,"brief":"通过设定裁切框的宽高比例，自由裁切图片","icon":"doc-cropper"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#自定义裁切框比例","title":"自定义裁切框比例"},{"url":"#受控旋转缩放图片","title":"受控旋转/缩放图片"},{"url":"#裁切框设置","title":"裁切框设置"},{"url":"#实时预览裁切效果","title":"实时预览裁切效果"},{"url":"#api","title":"API"},{"url":"#methods","title":"Methods"}]},{"url":"#设计变量","title":"设计变量"}]},"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\": \"zh-CN\",\n \"order\": 74,\n \"category\": \"Plus\",\n \"title\": \"Cropper 图片裁切\",\n \"icon\": \"doc-cropper\",\n \"dir\": \"column\",\n \"brief\": \"通过设定裁切框的宽高比例，自由裁切图片\"\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 }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Cropper \\u7528\\u4E8E\\u88C1\\u5207\\u56FE\\u7247\\uFF0C\\u652F\\u6301\\u81EA\\u5B9A\\u4E49\\u88C1\\u5207\\u6846\\u6837\\u5F0F\\uFF0C\\u53EF\\u901A\\u8FC7\\u62D6\\u52A8\\u8C03\\u6574\\u88C1\\u5207\\u6846\\u4F4D\\u7F6E\\uFF0C\\u88AB\\u88C1\\u5207\\u56FE\\u7247\\u4F4D\\u7F6E\\uFF1B\\u53EF\\u7F29\\u653E\\uFF0C\\u65CB\\u8F6C\\u88AB\\u88C1\\u5207\\u56FE\\u7247\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Cropper \\u4ECE v2.73.0 \\u5F00\\u59CB\\u652F\\u6301\"), 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 }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src\"), \" \\u8BBE\\u7F6E\\u88AB\\u88C1\\u5207\\u7684\\u56FE\\u7247; \\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"shape\"), \" \\u8BBE\\u7F6E\\u88C1\\u5207\\u6846\\u5F62\\u72B6\\uFF0C\\u9ED8\\u8BA4\\u4E3A\\u65B9\\u5F62\\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\\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 }, \"\\u81EA\\u5B9A\\u4E49\\u88C1\\u5207\\u6846\\u6BD4\\u4F8B\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultAspectRatio\"), \" \\u521D\\u59CB\\u7684\\u88C1\\u5207\\u6846\\u6BD4\\u4F8B\\uFF08\\u9ED8\\u8BA4\\u4E3A 1\\uFF09\\u3002\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"aspectRatio\"), \" \\u8BBE\\u7F6E\\u56FA\\u5B9A\\u7684\\u88C1\\u5207\\u6846\\u6BD4\\u4F8B\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultAspectRatio\"), \"\\u4EC5\\u5BF9\\u521D\\u59CB\\u7684\\u88C1\\u5207\\u6846\\u6BD4\\u4F8B\\u751F\\u6548\\uFF0C \\u62D6\\u52A8\\u65F6\\uFF0C\\u88C1\\u5207\\u6846\\u6BD4\\u4F8B\\u4F1A\\u968F\\u7740\\u62D6\\u52A8\\u800C\\u53D8\\u5316\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"aspectRatio\"), \" \\u65F6\\uFF0C\\u88C1\\u5207\\u6846\\u6BD4\\u4F8B\\u56FA\\u5B9A\\uFF0C\\u62D6\\u52A8\\u65F6\\u5C06\\u88C1\\u5207\\u6846\\u5C06\\u4EE5\\u6B64\\u6BD4\\u4F8B\\u53D8\\u5316\\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\\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 \\n \\n

\\n {cropperUrl && }\\n ;\\n}\\n\\nrender()\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u53D7\\u63A7\\u65CB\\u8F6C/\\u7F29\\u653E\\u56FE\\u7247\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rotate\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"zoom\"), \" \\u63A7\\u5236\\u56FE\\u7247\\u65CB\\u8F6C\\u548C\\u7F29\\u653E, \\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onZoomChange\"), \" \\u62FF\\u5230\\u6700\\u65B0\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"zoom\"), \" \\u503C\\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, 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 \\u65CB\\u8F6C\\n \\n
\\n
\\n \\u7F29\\u653E\\n \\n
\\n
\\n \\n

\\n {cropperUrl && }\\n
\\n );\\n};\\n\\nrender()\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u88C1\\u5207\\u6846\\u8BBE\\u7F6E\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"cropperBoxStyle\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"cropperBoxClassName\"), \" \\u81EA\\u5B9A\\u4E49\\u88C1\\u5207\\u6846\\u6837\\u5F0F\\u3002\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showResizeBox\"), \" \\u8BBE\\u7F6E\\u662F\\u5426\\u5C55\\u793A\\u88C1\\u5207\\u6846\\u8FB9\\u89D2\\u7684\\u8C03\\u6574\\u5757\\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, 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\\uFF0C\\u5E76\\u4FEE\\u6539\\u8FB9\\u6846\\u989C\\u8272\\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 [cropperUrl, 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 }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), 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 }, \"\\u88C1\\u5207\\u6846\\u6BD4\\u4F8B\"), 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 }, \"\\u7C7B\\u540D\"), 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 }, \"\\u88C1\\u5207\\u6846\\u7C7B\\u540D\"), 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 }, \"\\u88C1\\u5207\\u6846\\u6837\\u5F0F\"), 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 }, \"\\u521D\\u59CB\\u88C1\\u5207\\u6846\\u6BD4\\u4F8B\"), 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 }, \"\\u900F\\u4F20\\u7ED9 img \\u6807\\u7B7E\\u7684\\u5C5E\\u6027\"), 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 }, \"\\u88C1\\u5207\\u7ED3\\u679C\\u4E2D\\u975E\\u56FE\\u7247\\u90E8\\u5206\\u7684\\u586B\\u5145\\u8272\"), 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 }, \"\\u6700\\u5927\\u7F29\\u653E\\u500D\\u6570\"), 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 }, \"\\u6700\\u5C0F\\u7F29\\u653E\\u500D\\u6570\"), 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 }, \"\\u7F29\\u653E\\u56DE\\u8C03\"), 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 }, \"\\u6307\\u5B9A\\u9884\\u89C8\\u5BB9\\u5668\"), 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 }, \"\\u65CB\\u8F6C\\u89D2\\u5EA6\"), 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 }, \"\\u88C1\\u5207\\u6846\\u5F62\\u72B6\"), 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 }, \"\\u56FE\\u7247\\u5730\\u5740\"), 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 }, \"\\u662F\\u5426\\u5C55\\u793A\\u8C03\\u6574\\u5757\"), 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 }, \"\\u6837\\u5F0F\"), 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 }, \"\\u7F29\\u653E\\u6BD4\\u4F8B\"), 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 }, \"\\u7F29\\u653E\\u6B65\\u957F\"), 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 }, \"\\u7ED1\\u5B9A\\u5728\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u4E0A\\u7684\\u65B9\\u6CD5\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 ref \\u8C03\\u7528\\u5B9E\\u73B0\\u67D0\\u4E9B\\u7279\\u6B8A\\u4EA4\\u4E92\"), 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 }, \"\\u83B7\\u53D6\\u88C1\\u526A\\u56FE\\u7247\\u7684 canvas\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/cropper","next":{"fields":{"slug":"en-US/show/list"},"id":"493f9aab-7304-5c2b-bb35-826f4f0fe06f","frontmatter":{"title":"List","localeCode":"en-US","icon":"doc-list","showNew":null}},"previous":{"fields":{"slug":"en-US/show/cropper"},"id":"9f891138-830a-546f-94ef-f94107a4c7b3","frontmatter":{"title":"Cropper","localeCode":"en-US","icon":"doc-cropper","showNew":null}}}},"staticQueryHashes":["1348983216155057","1477422646155057","3245198693155057","417590761155057","63159454155057"]}