[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9055":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},9055,"vue-croppa","zhanziyang\u002Fvue-croppa","zhanziyang","A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.","https:\u002F\u002Fzhanziyang.github.io\u002Fvue-croppa\u002F",null,"Vue",956,126,12,89,0,50.31,"ISC License",false,"master",true,[23,24,25,26,27,28,29],"cropper","image-cropper","image-preview","upload","vue","vue-component","vue-cropper-component","2026-06-12 04:00:42","# vue-croppa\n\n> A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.\n\n\u003Ca href=\"https:\u002F\u002Fzhanziyang.github.io\u002Fvue-croppa\u002F\">\u003Cimg src=\"https:\u002F\u002Fzhanziyang.github.io\u002Fvue-croppa\u002Fstatic\u002Fpreview2.png?v=3\" width=\"400\" alt=\"try it out\" \u002F>\u003C\u002Fa>\n\n## Features\n\n* **Straightforward**: What you see is what you get\n* **Highly customizable**: You can almost customize anything except the core functionalities\n* **Mobile-friendly**: Supports drag to move and pinch with two fingers to zoom on mobile devices\n* **EXIF orientation**: v0.2.0+ Support correctly show image with EXIF orientation\n\n## Browser Support\n\n* IE 10+\n* Firefox 3.6+\n* Chrome 6+\n* Safari 6+\n* Opera 11.5+\n* iOS Safari 6.1+\n* Android Browser 3+\n\n## Template Example\n\n```html\n\u003Ccroppa v-model=\"myCroppa\"\n        :width=\"400\"\n        :height=\"400\"\n        :canvas-color=\"'default'\"\n        :placeholder=\"'Choose an image'\"\n        :placeholder-font-size=\"0\"\n        :placeholder-color=\"'default'\"\n        :accept=\"'image\u002F*'\"\n        :file-size-limit=\"0\"\n        :quality=\"2\"\n        :zoom-speed=\"3\"\n        :disabled=\"false\"\n        :disable-drag-and-drop=\"false\"\n        :disable-click-to-choose=\"false\"\n        :disable-drag-to-move=\"false\"\n        :disable-scroll-to-zoom=\"false\"\n        :disable-rotation=\"false\"\n        :prevent-white-space=\"false\"\n        :reverse-scroll-to-zoom=\"false\"\n        :show-remove-button=\"true\"\n        :remove-button-color=\"'red'\"\n        :remove-button-size=\"0\"\n        :initial-image=\"'path\u002Fto\u002Finitial-image.png'\"\n        @init=\"handleCroppaInit\"\n        @file-choose=\"handleCroppaFileChoose\"\n        @file-size-exceed=\"handleCroppaFileSizeExceed\"\n        @file-type-mismatch=\"handleCroppaFileTypeMismatch\"\n        @new-image-drawn=\"handleNewImage\"\n        @image-remove=\"handleImageRemove\"\n        @move=\"handleCroppaMove\"\n        @zoom=\"handleCroppaZoom\">\u003C\u002Fcroppa>\n```\n\n**NOTE:** This is an almost-full-use example. Usually you don't need to specify so many props, because they all have default values. Most simply, you can even do:\n\n```html\n\u003Ccroppa v-model=\"myCroppa\">\u003C\u002Fcroppa>\n```\n\n## Method Examples\n\n```js\nthis.myCroppa.remove();\n\nthis.myCroppa.zoomIn();\n\nalert(this.myCroppa.generateDataUrl());\n```\n\n## Quick Start\n\n### 1. Import vue-croppa into your vue.js project.\n\nUsing build tools:\n\n```bash\nnpm install --save vue-croppa\n```\n\n```js\nimport Vue from 'vue';\nimport Croppa from 'vue-croppa';\n\nVue.use(Croppa);\n```\n\n```js\n\u002F\u002F If your build tool supports css module\nimport 'vue-croppa\u002Fdist\u002Fvue-croppa.css';\n```\n\nNot using build tools:\n\n```html\n\u003Clink href=\"https:\u002F\u002Funpkg.com\u002Fvue-croppa\u002Fdist\u002Fvue-croppa.min.css\" rel=\"stylesheet\" type=\"text\u002Fcss\">\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fvue-croppa\u002Fdist\u002Fvue-croppa.min.js\">\u003C\u002Fscript>\n```\n\n```js\nVue.use(Croppa);\n```\n\n### 2. Now you have it. The simplest usage:\n\n```html\n\u003Ccroppa v-model=\"myCroppa\">\u003C\u002Fcroppa>\n```\n\n```js\nnew Vue({\n  \u002F\u002F ... other vm options omitted\n  data: {\n    myCroppa: {}\n  },\n\n  methods: {\n    uploadCroppedImage() {\n      this.myCroppa.generateBlob(\n        blob => {\n          \u002F\u002F write code to upload the cropped image file (a file is a blob)\n        },\n        'image\u002Fjpeg',\n        0.8\n      ); \u002F\u002F 80% compressed jpeg file\n    }\n  }\n});\n```\n\nLive example: https:\u002F\u002Fjsfiddle.net\u002Fjdcvpvty\u002F2\u002F\n\n#### NOTE:\n\n* Since v0.1.0, you can change the default component name to anything you want.\n\n```js\nimport Vue from 'vue';\nimport Croppa from 'vue-croppa';\n\nVue.use(Croppa, { componentName: 'my-image-cropper' });\n```\n\n```html\n\u003Cmy-image-cropper v-model=\"myCroppa\">\u003C\u002Fmy-image-cropper>\n```\n\n* Since v0.1.1, you can get the component object with `Croppa.component`. This is useful when you want to register the component by yourself manually.\n\n```js\nVue.component('croppa', Croppa.component);\n```\n\n```js\n\u002F\u002F Register async component (Webpack 2 + ES2015 Example). More about async component: https:\u002F\u002Fvuejs.org\u002Fv2\u002Fguide\u002Fcomponents.html#Async-Components\nVue.component('croppa', () => import(Croppa.component));\n```\n\n* Since v1.0.0, the v-modeled value and the `ref` both point to the same thing - the component itself. So you don't need to set v-model anymore if you have a `ref` on the component.\n\n```xml\n\u003Ccroppa ref=\"myCroppa\">\u003C\u002Fcroppa>\n```\n\n```js\nthis.$refs.myCroppa.chooseFile();\nthis.$refs.myCroppa.generateDataUrl();\n\u002F\u002F ...\n```\n\n## Documentation\n\n### 🌱 Props\n\n#### v-model\n\nA two-way binding prop. It syncs an object from within the croppa component with a data in parent. We can use this object to call useful methods (Check out \"[Methods](#-methods)\" section). **Since v1.0.0, you don't need this anymore, the `ref` on component can also be used to call methods.**\n\n* type: `object`\n* live example: https:\u002F\u002Fjsfiddle.net\u002Fjdcvpvty\u002F2\u002F\n\n#### width\n\nDisplay width of the preview container.\n\n* type: `number`\n* default: `200`\n* valid: `val > 0`\n\n#### height\n\nDisplay height of the preview container.\n\n* type: `number`\n* default: `200`\n* valid: `val > 0`\n\n#### placeholder\n\nPlaceholder text of the preview container. It shows up when there is no image.\n\n* type: `string`\n* default: `'Choose an image'`\n\n#### placeholder-color\n\nPlaceholder text color.\n\n* type: same as what `CanvasRenderingContext2D.fillStyle` accepts.\n* default: `'#606060'`\n\n#### placeholder-font-size\n\nPlaceholder text font size in pixel. When set to `0`, the font size will be ajust automatically so that the whole placehoder only takes up 2\u002F3 of the container's width.\n\n* type: `number`\n* default: `0`\n\n#### canvas-color\n\nInitial background color and white space color if there is an image.\n\n* type: same as what `CanvasRenderingContext2D.fillStyle` accepts.\n* default: before v0.2.0 - `'#e6e6e6'`; after v0.2.0 - `'transparent'`\n\n#### quality\n\nSpecifies how many times larger the actual image is than the container's display size.\n\n* type: `number`\n* default: `2`\n* valid: `val > 0`\n\n#### zoom-speed\n\nSpecifies how fast the zoom is reacting to scroll gestures. Default to level 3.\n\n* type: `number`\n* default: `3`\n* valid: `val > 0`\n\n#### accept\n\nLimits the types of files that users can choose.\n\n* type: same as what `accept` attribute of HTML `input` element takes.\n* default: no default value since v1.0.0. Specify it as you need.\n\n#### file-size-limit\n\nLimits the byte size of file that users can choose. If set to `0`, then no limit.\n\n* type: `number`\n* default: `0`\n\n#### disabled\n\nDisables user interaction.\n\n* type: `boolean`\n* default: `false`\n\n#### disable-drag-and-drop\n\nDisables the default \"drag and drop a file\" user interaction. You can instead \btrigger the file chooser window programmatically by \"click to choose\" functionality or invoking `chooseFile()` method.\n\n* type: `boolean`\n* default: `false`\n\n#### disable-click-to-choose\n\nDisables the default \"click to choose a file\" (\"tab\" on mobile) user interaction. You can instead \btrigger the file chooser window programmatically by \"drag and drop\" functionality or invoking `chooseFile()` method.\n\n* type: `boolean`\n* default: `false`\n\n#### disable-drag-to-move\n\nDisables the default \"drag to move\" user interaction. You can instead move the image programmatically by invoking `moveUpwards()` \u002F `moveDownwards()` \u002F `moveLeftwards()` \u002F `moveRightwards()` methods.\n\n* type: `boolean`\n* default: `false`\n\n#### disable-scroll-to-zoom\n\nDisables the default \"scroll to zoom\" user interaction. You can instead zoom the image programmatically by invoking `zoomIn()` \u002F `zoomOut()` methods.\n\n* type: `boolean`\n* default: `false`\n\n#### disable-pinch-to-zoom\n\nDisables the default \"pinch with two fingers to zoom\" user interaction **on mobile**. You can instead zoom the image programmatically by invoking `zoomIn()` \u002F `zoomOut()` methods.\n\n* type: `boolean`\n* default: `false`\n\n#### disable-rotation\n\n(**v0.2.0+**) Rotation methods won't work if this is set to `true`\n\n* type: `boolean`\n* default: `false`\n\n#### \u003Cs>reverse-zooming-gesture\u003C\u002Fs>\n\n**Deprecated** Please use `reverse-scroll-to-zoom`\b instead.\n\nReverses the zoom-in\u002Fzoom-out direction when scrolling.\n\n* type: `boolean`\n* default: `false`\n\n#### reverse-scroll-to-zoom\n\nReverses the zoom-in\u002Fzoom-out direction when scrolling.\n\n* type: `boolean`\n* default: `false`\n\n#### prevent-white-space\n\nPrevents revealing background white space when moving or zooming the image.\n\n* type: `boolean`\n* default: `false`\n\n#### show-remove-button\n\nSpecifies whether to show the built-in remove-button. You can change the button's color and size using the following two props. If you still find it ugly, hide it and use the `remove()` method to implement your own trigger.\n\n* type: `boolean`\n* default: `true`\n\n#### remove-button-color\n\nChanges the default color of the remove-button. Accepts any css color format.\n\n* type: `string`\n* default: `'red'`\n\n#### remove-button-size\n\nSpecifies the remove-button's width and height (they are equal). If set to `0`, then it use the default size.\n\n* type: `number`\n* default: default size is ajust accordingly to container's size\n\n#### initial-image\n\n(**v0.1.0+**) Set initial image. You can pass a string as the url or an Image object (HTMLImageElement instance). This is an alternative way to set initial image besides using slot. Useful when you want to set cross origin image as initial image.\n\n* type: `string` or `object` (HTMLImageElement instance)\n* default: `undefined`\n\n#### initial-size\n\n(**v0.2.0+**) works similar to css's background-size. It specifies the image's size when it is first loaded on croppa. `contain` and `natural` won't work if `prevent-white-space` is set to `true`.\n\n* type: `string`\n* default: `'cover'`\n* valid: one of `'cover'`, `'contain'`, `'natural'`\n\n#### initial-position\n\n(**v0.2.0+**) works similar to css's background-position. It specifies the image's position relative to croppa container when it is first loaded.\n\n* type: `string`\n* default: `'center'`\n* valid:\n  * `'center'` (default value)\n  * `'top'`\n  * `'bottom'`\n  * `'left'`\n  * `'right'`\n  * composition of the above words (`'top left'`, `'right top'` etc.)\n  * `'30% 40%'` (similar to background-position in css)\n\n#### input-attrs\n\n(**v1.0.0+**) to pass attributes to the hidden `input[type=file]` element.\n\n```html\n\u003Ccroppa :input-attrs=\"{capture: true, class: 'file-input'}\">\u003C\u002Fcroppa>\n```\n\n#### show-loading\n\n(**v1.1.0+**) show default loading spinner at the bottom right corner of the container when image is loading (will but not yet be drawn on canvas).\n\n* type: `boolean`\n* default: `false`\n\n#### loading-size\n\n(**v1.1.0+**) loading spinner's size in px.\n\n* type: `number`\n* default: `20`\n\n#### loading-color\n\n(**v1.1.0+**) loading spinner's color in css color value formats.\n\n* type: `string`\n* default: `'#606060'`\n\n#### replace-drop\n\n(**v1.1.4+**) Replace current image on drag and drop.\n\n* type: `boolean`\n* default: `false` (By default you need to remove the current image to drop a new one)\n\n#### passive\n\n(**1.2.0**) Switch to passive mode. Croppa in passive mode will sync state with another croppa if they v-model the same object. Also it will not have self-control - user can't manipulate image on passive croppa. This is useful as a preview component.\n\nThese states will be synced:\n\n```js\n[\n  'imgData',\n  'img',\n  'imgSet',\n  'originalImage',\n  'naturalHeight',\n  'naturalWidth',\n  'orientation',\n  'scaleRatio'\n];\n```\n\n* type: `boolean`\n* default: `false`\n* [Demo](https:\u002F\u002Fcodepen.io\u002Fzhanziyang\u002Fpen\u002FxYKbqJ)\n\n#### image-border-radius\n\n(**1.2.0**) Set rounded corders to image. Note that this has effect on the output image. **Note that it only works when `prevent-white-space` is `true`**. ([Demo](https:\u002F\u002Fcodepen.io\u002Fzhanziyang\u002Fpen\u002FjZNmOa))\n\n* type: `number` or `string`\n* default: `0`\\\n\n#### auto-sizing\n\n(**1.3.0**) If it is set to `true`, `width` and `height` will not work. Instead, croppa will adjust itself to it's container(`.croppa-container`)'s size. It's useful to make croppa's dimension responsive.\n\n* type: `boolean`\n* default: `false`\n* [Demo](https:\u002F\u002Fcodepen.io\u002Fzhanziyang\u002Fpen\u002FbvVKzL)\n\n\n#### video-enabled\n\n(**1.3.1**) If it is set to `true`, you can choose a video file. If the video is supported by the browser, the first frame will be drawn on the canvas. You can play\u002Fpause the video by dbclick croppa. This feature is not fully developed yet, but you can still play around with it.\n\n* type: `boolean`\n* default: `false`\n\n---\n\n### 🌱 Slots\n\n#### initial\n\n* You can provide an initial image by putting an `\u003Cimg>` node as a named slot `initial`. For example:\n\n```html\n\u003Ccroppa v-model=\"myCroppa\">\n  \u003Cimg slot=\"initial\" :src=\"initialImageUrl\" \u002F>\n\u003C\u002Fcroppa>\n```\n\n##### NOTE:\n\n* You need to explicitly call `.refresh()` method after changing inital image.\n* If you provide both the slot and `initial-image` prop, the slot will be the one that is used.\n\n---\n\n#### placeholder\n\n* If you are not satified with the simple text placeholder. Since v0.3.0, you can apply an `\u003Cimg>` slot named `placeholder` to get an image placeholder! The image will be draw on croppa under the placeholder text.\n\n```html\n\u003Ccroppa v-model=\"myCroppa\">\n  \u003Cimg slot=\"placeholder\" src=\"static\u002Fplaceholder-image.png\" \u002F>\n\u003C\u002Fcroppa>\n```\n\n##### NOTE:\n\n* It is recommended to use a small-sized image as the placeholder image.\n* The image will be drawn with 100% width and height of croppa container, i.e. it will cover the container. So it is recommended to use a images with the same aspect ratio as the container.\n* Find demo \"Image Placeholder\" in the [demo page](https:\u002F\u002Fzhanziyang.github.io\u002Fvue-croppa\u002F#\u002Fdemos)\n\n#### default\n\n* (**v1.1.0+**) Default slots (unnamed) will be appended to the container element after the built-in elements.\n* Usually you need to set `position: absolute` on these slots or it will expand the container.\n\n### 🌱 Methods\n\n#### getCanvas()\n\n* returns the canvas object\n\n#### getContext()\n\n* returns the canvas context object\n\n#### getChosenFile()\n\n#### \u003Cs>getActualImageSize()\u003C\u002Fs>\n\n* Return an object `{ width, height }` describing the real image size (preview size `* quality`)\n* **Deprecated** Use `this.myCroppa.outputWidth` and `this.myCroppa.outputHeight` instead.\n\n#### moveUpwards( amountInPx: number )\n\n#### moveDownwards( amountInPx: number )\n\n#### moveLeftwards( amountInPx: number )\n\n#### moveRightwards( amountInPx: number )\n\n#### move({x, y})\n\n* (**v1.0.0+**) for more flexibility.\n\n#### zoomIn()\n\n#### zoomOut()\n\n#### zoom(in, timesQuicken)\n\n* (**v1.0.0+**) for more flexibility.\n\n#### rotate(step: number)\n\n* 1 step = 90 deg\n* positive number: rotates clockwise\n* negative number: rotates counterclockwise.\n\n#### flipX()\n\n* Horizontally flip image.\n\n#### flipY()\n\n* Vertically flip image.\n\n#### chooseFile()\n\n* Opens the file chooser window to Choose an image. Useful when default click-to-choose interaction is disabled.\n\n#### \u003Cs>myCroppa.reset()\u003C\u002Fs>\n\n* **Deprecated** Please use `remove()` instead.\n\n#### remove()\n\n* Removes the current image, can be used to implement your own remove-button.\n\n#### refresh()\n\n* Reinitialize the component. Useful when you want to change initial image.\n\n#### hasImage()\n\n* Return boolean value indicating whether currently there is a image.\n\n#### generateDataUrl( type: string, compressionRate: number )\n\n* Returns a data-URL containing a representation of the image in the format specified by the `type` parameter (defaults to png).\n* `compressionRate` (v0.2.0+) defaults to `1`, you can pass a number between 0 and 1 to get a compressed output image.\n\n#### generateBlob( callback: function, mimeType: string, compressionRate: number )\n\n* Creates a Blob object representing the image contained in the canvas. Look up argument definition [here](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FHTMLCanvasElement\u002FtoBlob).\n* If there is no image, the first argument of callback function is `null`.\n\n#### promisedBlob( mimeType: string, compressionRate: number )\n\n* This method returns a `Promise` wrapping around `generateBlob()`, so that you can use `async\u002Fawait` syntax instead of a callback to get blob data, it's simpler.\n\n```js\nconst blob = await this.myCroppa.promisedBlob()\n```\n\n* If there is no image, it will resolve `null`.\n\n#### getMetadata()\n\n* Require v0.3.0+\n* Get metadata that describes current user manipulations (moving, zooming, rotating).\n\n```js\nvar metadata = this.myCroppa.getMetadata();\nconsole.log(metadata);\n\n\u002F* in console\n{\n  startX:-535.5180530546083,\n  startY:-358.0699623303261,\n  scale:2.2502626424905396,\n  orientation:6\n}\n*\u002F\n```\n\n* Find demo \"Use Metadata\" in the [demo page](https:\u002F\u002Fzhanziyang.github.io\u002Fvue-croppa\u002F#\u002Fdemos).\n\n#### applyMetadata(metadata)\n\n* Require v0.3.0+\n* Apply metadata to get to a certain manipulation state (moving, zooming, rotating).\n* `metadata` can have one or more of these 4 properties: `startX`, `startY`, `scale`, `orientation`. Usually you will use the object returned by `getMetadata()`.\n\n```js\nvar metadata = {\n  startX: -535.5180530546083,\n  startY: -358.0699623303261,\n  scale: 2.2502626424905396,\n  orientation: 6\n};\n\nthis.myCroppa.applyMetadata(metadata);\n```\n\n* Find demo \"Use Metadata\" in the [demo page](https:\u002F\u002Fzhanziyang.github.io\u002Fvue-croppa\u002F#\u002Fdemos).\n\n#### addClipPlugin(func)\n\n* Add clip plugin to clip the image. Example:\n\n```js\n\u002F\u002F Add a clip plugin to make a circle clip on image\nonInit(vm) {\n  this.croppa.addClipPlugin(function (ctx, x, y, w, h) {\n    \u002F*\n     * ctx: canvas context\n     * x: start point (top-left corner) x coordination\n     * y: start point (top-left corner) y coordination\n     * w: croppa width\n     * h: croppa height\n    *\u002F\n    ctx.beginPath()\n    ctx.arc(x + w \u002F 2, y + h \u002F 2, w \u002F 2, 0, 2 * Math.PI, true)\n    ctx.closePath()\n  })\n},\n```\n\n* Note: in the plugin function you should always start with `ctx.beginPath()` and end with `ctx.closePath()`.\n* Note: it only works when `prevent-white-space` is `true`.\n* [Demo](https:\u002F\u002Fcodepen.io\u002Fzhanziyang\u002Fpen\u002FGQKmJq?editors=1011)\n\n#### supportDetection()\n\n* Return an object indicating browser supports. Like this:\n\n```js\n{\n  basic: true, \u002F\u002F supports basic functionality\n  dnd: false \u002F\u002F does not support drag and drop\n}\n```\n\n---\n\n### 🌱 Events\n\n#### init\n\n* handler(croppa)\n  * `croppa` is the croppa component itself - same as what `v-model` and `ref` bind.\n\n#### file-choose\n\n* emitted when user choose an image from the poppup window or \"drag and drop\" a file into the container.\n* handler(file)\n  * `file` is a file object - same as what `getChosenFile()` returns.\n\n#### file-size-exceed:\n\n* emitted when the chosen file's size exceeds the limit specified by prop fileSizeLimit.\n* handler(file)\n  * `file` is a file object - same as what `getChosenFile()` returns.\n\n#### file-type-mismatch:\n\n* emitted when the chosen file does not match the specified type, which btw is specified using prop `accept`.\n* handler(file)\n  * `file` is a file object - same as what `getChosenFile()` returns.\n\n#### new-image\n\n* emitted when a new valid image is received and read successfully(v0.2.0).\n\n#### new-image-drawn\n\n* (v1.0.0+) emitted when a new image is drawn on canvas for the first time.\n\n#### image-remove\n\n* emitted when image remove from croppa.\n\n#### move\n\n#### zoom\n\n#### draw\n\n* emitted on every view update (including init, move, zoom, rotate) when it is not empty. It is useful when you want to add attachment on image.\n* handler(ctx)\n  * `ctx` is the `CanvasRenderingContext2D` object for you to draw anything you want on the current image. You can also get it with the method `getContext()`.\n* Find demo \"Attachments\" in the [demo page](https:\u002F\u002Fzhanziyang.github.io\u002Fvue-croppa\u002F#\u002Fdemos).\n\n#### initial-image-loaded\n\n* (v0.3.2+) emitted when initial image loaded. It can be useful when you provide initial image with the `initial-image` prop.\n\n#### loading-start\n\n* (v1.1.0+) emitted when image loading phase starts.\n\n#### loading-end\n\n* (v1.1.0+) emitted when image loading phase ends.\n\n---\n\n### 🌱 State data\n\nSince v1.0.0, you can access all state data of croppa via the instance. For example,\n\n```js\nthis.myCroppa.naturalWidth;\nthis.myCroppa.imgData.startX;\nthis.myCroppa.scaleRatio;\nthis.myCroppa.pinching;\n\u002F\u002F...\n```\n\nAll data available:\n\n\u003Cimg src=\"https:\u002F\u002Fi.imgur.com\u002FKkgN87h.png?v=3\" \u002F>\n\nSorry I'm too lazy to doc about each of them. Please open the **vue-devtool** to figure out what they mean by yourself.\n\nYou can also open an issue to ask me any question about this component.\n\nNote that \"computed\" and \"props\" are read-only. Some value on \"data\" are also not recommended to modify from outside, for example `ctx`, `canvas`, `img`.\n\n* **v1.1.0**: `loading` indicates whether an image is loading (will but not yet be drawn on canvas).\n\n### 🌱 Customize styles\n\n* Check out [default css styles](https:\u002F\u002Fgithub.com\u002Fzhanziyang\u002Fvue-croppa\u002Fblob\u002Fmaster\u002Fdist\u002Fvue-croppa.css). You can add more css styles to those selectors to get a different look. Be careful if you try to overwrite existing styles.\n* Note that CSS styles will not have any effect on the output image.\n\n## Development\n\n#### 1. Fork and clone the repo.\n\n#### 2. Install dependencies.\n\n```bash\n$ cd vue-croppa\n$ npm install\n```\n\n```bash\n$ cd docs\n$ npm install\n```\n\n#### 3. Start developing.\n\n```bash\n# under vue-croppa\u002F\n$ npm run dev\n```\n\n```bash\n# under vue-croppa\u002Fdocs\u002F\n$ npm run dev\n```\n\nEdit file `.\u002Fdocs\u002Fsimple-test.html` and open http:\u002F\u002Flocalhost:3000\u002Fsimple-test.html to test while developing.\n\n#### 4. Build\n\n```bash\n# under vue-croppa\u002F\n$ npm run build\n```\n\n## To Do\n\n* [ ] Native support for grid #115\n* [ ] Auto crop the output image #118\n* [ ] Customizable-size preview #68\n* [ ] Automatically keeps the output size when container resized due to `auto-size=true` #122\n* [ ] Snapshot the current state and restore. #112\n* [ ] Add unit test.\n* [ ] Big image rotation optimizations (blob url?).\n","vue-croppa 是一个为 Vue 2.0 设计的简单易用且高度可定制的移动端友好图片裁剪组件。其核心功能包括直观的操作体验、广泛的自定义选项（如尺寸、颜色、字体等）以及对移动设备手势的支持，比如双指缩放和平移。此外，它还支持 EXIF 方向校正，确保图片以正确的方向显示。该组件适用于需要在网页应用中集成图片上传和裁剪功能的各种场景，尤其是那些注重用户体验和跨平台兼容性的项目。无论是简单的图片预览还是复杂的编辑需求，vue-croppa 都能提供灵活可靠的解决方案。",2,"2026-06-11 03:20:58","top_language"]