Skip to content

Commit

Permalink
add setBackgroundImage and saveImage features
Browse files Browse the repository at this point in the history
  • Loading branch information
lilitsimonyan98 committed Dec 19, 2019
1 parent bca423f commit 302ec35
Show file tree
Hide file tree
Showing 6 changed files with 235 additions and 177 deletions.
29 changes: 18 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,13 @@ Then you'll be able to use Editor component.

You must give your editor component ```ref```,which will help you to call the functions to set editor mode,clean objects or undo/redo your changes.
```vue
<Editor :setBackgroundImage="url" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor"/>
<Editor :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor"/>
mounted() {
$this.$refs.editor.set(this.editor.mode,this.editor.options);
},
data(){
return:{
url:"example.png"
}
}
```
`setBackgroundImage` prop will set editor background image

`canvasWidth` prop will set editor width

Expand Down Expand Up @@ -159,16 +153,29 @@ or you can customize your editor's free drawing mode styles by overwriting defau
this.$refs.editor.set('freeDrawing',customizeFreeDrawing)
```

## Function changeColor(`colorHex`)
##### `changeColor(`colorHex`)` to set color for all objects
```javascript
this.$refs.editor.changeColor('#228B22')
## Function setBackgroundImage(imageUrl)
##### `setBackgroundImage(imageUrl)` to set editor background image
```vue
data(){
return{
imageUrl:"example.png"
}
},
methods:{
this.$refs.editor.setBackgroundImage(this.imageUrl);
}
```

## Function uploadImage(e)
##### `uploadImage(e)` to set background of canvas
```javascript
this.$refs.editor.uploadImage(e)
```
## Function saveImage()
##### `saveImage()` to save your image,which returns image in base64 format.
```javascript
this.$refs.editor.saveImage()
```

## Function clear()
##### `clear()` function delete editor's all objects
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-image-markup",
"version": "1.0.1",
"version": "1.0.2",
"description": "vue-image-markup will provide you to edit uploaded image easily and save it.",
"main": "src/Editor.vue",
"repository": {
Expand Down
Loading

0 comments on commit 302ec35

Please sign in to comment.