# xy-image-editor

> imageEditor

Latest version **1.0.14** (published 2021-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install xy-image-editor
pnpm add xy-image-editor
yarn add xy-image-editor
bun add xy-image-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2021-09-29 |
| First published | 2021-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | 袁国强 |
| Maintainers | yuanguoqiang |

## Links

- npm: https://www.npmjs.com/package/xy-image-editor
- npm.io page: https://npm.io/package/xy-image-editor

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.1.1
- [tui-image-editor](https://npm.io/package/tui-image-editor.md) ^3.15.0
- [vuejs-progress-bar](https://npm.io/package/vuejs-progress-bar.md) ^1.2.7

## Recent versions

- 1.0.14 (latest) — 2021-09-29
- 1.0.13 — 2021-09-27
- 1.0.12 — 2021-09-26
- 1.0.11 — 2021-09-23
- 1.0.10 — 2021-09-23
- 1.0.9 — 2021-09-23
- 1.0.8 — 2021-09-01
- 1.0.7 — 2021-09-01
- 1.0.6 — 2021-09-01
- 1.0.5 — 2021-09-01
- 1.0.4 — 2021-09-01
- 1.0.3 — 2021-09-01
- 1.0.2 — 2021-09-01
- 1.0.1 — 2021-09-01
- 1.0.0 — 2021-09-01

## README

# 使用说明
cdn方式
```js
<script src="https://cdn.jsdelivr.net/xy-image-editor@1.0.0/dist/xy-image-editor.js"></script>
```
在非vue中框架使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='test' style="width: 1000px;height: 800px">
        <xy-image-editor :image-src='imageSrc' v-on:upload-error="uploadError" v-on:editor-complate='editorcomplate'></xy-image-editor>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xy-image-editor@1.0.11/dist/xy-image-editor.js"></script>
    <!-- <script src="/dist/xy-image-editor.js"></script> -->
    <script>
        var app = new Vue({
            el: '#test',
            data () {
                return {
                    imageSrc: 'https://p6-tt.byteimg.com/origin/pgc-image/88d008d7f72a474f9b02f72d27ba72b6?from=pc'
                }
            },
            methods: {
                editorcomplate (data) {
                    console.log(data)
                },
                uploadError (err) {
                  console.log(err)
                }
            }
        })
        console.log(app)
    </script>
</body>
</html>
```
npm方式
> npm install xy-image-editor --save

全局注册在main.js添加里
```js
import XyImageEditor from './lib/index.js'
Vue.use(XyImageEditor)
```
局部使用，在组件内
```js
<template>
  <div id="app">
    <xy-image-editor :imageSrc='imageSrc' @editorComplate='editorComplate'></xy-image-editor>
  </div>
</template>

<script>
import XyImageEditor from './lib/index.js'
export default {
  components: { XyImageEditor },
  name: 'app',
  data () {
    return {
      imageSrc: 'https://p6-tt.byteimg.com/origin/pgc-image/88d008d7f72a474f9b02f72d27ba72b6?from=pc'
    }
  },
  methods: {
    editorComplate (data) {
      console.log(data)
    }
  }
}
</script>
```

参数
|参数名|默认值|类型|描述|
|-|-|-|-|
|imageSrc|""|string|图片地址
|host|https://my-dev.aihoge.com|string|请求的域名
|secretKey|RriRpHeQoCeCtdNDLvxb|string|secretKey
|accessKeyId|ampClNgAhhGyDOjhxzMu|string|accessKeyId
|bucket|editpic|string|bucket名
|access_token|"dc1e78f469c3490eab09b88d2d64905a"|string|access_token

事件：
|事件名|回调|描述|
|-|-|-|
|editorComplate|图片的信息对象|点击选中按钮回调|
|uploadError|错误信息对象|图片上传失败回调|

---
_Source: https://npm.io/package/xy-image-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
