xy-image-editor

使用说明

cdn方式

<script src="https://cdn.jsdelivr.net/xy-image-editor@1.0.0/dist/xy-image-editor.js"></script>

在非vue中框架使用

<!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添加里

import XyImageEditor from './lib/index.js'
Vue.use(XyImageEditor)

局部使用，在组件内

<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>

参数

事件：