xy-image-editor
v1.0.14
Published
imageEditor
Downloads
3
Readme
使用说明
cdn方式
<script src="https://cdn.jsdelivr.net/[email protected]/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/[email protected]/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>参数 |参数名|默认值|类型|描述| |-|-|-|-| |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|错误信息对象|图片上传失败回调|