Skip to content

Commit

Permalink
refactor(component): add save img type parameter to saveSignature method
Browse files Browse the repository at this point in the history
  • Loading branch information
@neighborhood999
neighborhood999 committed Mar 13, 2020
1 parent 5d583a9 commit 38a1ca0
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 46 deletions.
52 changes: 23 additions & 29 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
## Installation

```sh
yarn add vue-signature-pad
$ yarn add vue-signature-pad
```

## Usage
Expand All @@ -29,31 +29,27 @@ Vue.use(VueSignaturePad);
```vue
<template>
<div id="app">
<VueSignaturePad
width="500px"
height="500px"
ref="signaturePad"
/>
<VueSignaturePad width="500px" height="500px" ref="signaturePad" />
<div>
<button @click="save">Save</button>
<button @click="undo">Undo</button>
</div>
</div>
</template>
<script>
export default {
name: 'MySignaturePad',
methods: {
undo() {
this.$refs.signaturePad.undoSignature();
},
save() {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty);
console.log(data);
}
export default {
name: 'MySignaturePad',
methods: {
undo() {
this.$refs.signaturePad.undoSignature();
},
save() {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty);
console.log(data);
}
}
};
</script>
```

Expand All @@ -80,26 +76,25 @@ export default {
console.log('=== End ===');
}
}
}
};
</script>
```

## Props

| Name | Type | Default | Description | Example |
| :---------- | :----- | :------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ |
| width | String | `100%` | Set the `div` width. | - |
| height | String | `100%` | Set the `div` height. | - |
| saveType | String | `image/png` | Image type, support `image/png`, `image/jpeg`, `image/svg+xml`. | - |
| options | Object | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13) | Set the signature pad options. | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13) |
| images | Array | `[]` | Merge signature with the provide images. | `['A.png', 'B.png', 'C.png']` or `[{ src: 'A.png', x: 0, y: 0 }, { src: 'B.png', x: 0, y: 10 }, { src: 'C.png', x: 0, y: 20 }]` |
| customStyle | Object | `{}` | Custom `div` style. | `{ border: black 3px solid }` |
| Name | Type | Default | Description | Example |
| :---------- | :----- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ |
| width | String | `100%` | Set the `div` width. | - |
| height | String | `100%` | Set the `div` height. | - |
| options | Object | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13) | Set the signature pad options. | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13) |
| images | Array | `[]` | Merge signature with the provide images. | `['A.png', 'B.png', 'C.png']` or `[{ src: 'A.png', x: 0, y: 0 }, { src: 'B.png', x: 0, y: 10 }, { src: 'C.png', x: 0, y: 20 }]` |
| customStyle | Object | `{}` | Custom `div` style. | `{ border: black 3px solid }` |

## Methods

| Name | Argument Type | Description |
| :------------------------------------- | :--------------------------- | --------------------------------------------------------------------------- |
| `saveSignature()` | - | Will return target canvas **status** and **data**. |
| `saveSignature(type, encoderOptions)` | `(String, Number)` | Will return target canvas **status** and **data**. |
| `undoSignature()` | - | Undo |
| `clearSignature()` | - | Clear |
| `mergeImageAndSignature(signature)` | `Object` or `String` | Provide `images` as props and will merge with signature. |
Expand All @@ -108,12 +103,11 @@ export default {
| `openSignaturePad()` | - | Open target signature pad. |
| `getPropImagesAndCacheImages()` | - | Get all the images information. |
| `clearCacheImages()` | - | Clear cache images. |
| `fromDataURL(data, options, callback)` | `(String, Object, callback)` | Draw image from data URL. |
| `fromDataURL(data, options, callback)` | `(String, Object, Callback)` | Draw image from data URL. |
| `fromData(data)` | `String` | Returns signature image as an array of point groups. |
| `toData()` | - | Draws signature image from an array of point groups. |
| `isEmpty()` | - | Return signature canvas have data. |


## Credits

[szimek/signature_pad](https://github.com/szimek/signature_pad) - HTML5 canvas based smooth signature drawing
Expand Down
18 changes: 9 additions & 9 deletions src/components/VueSignaturePad.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import mergeImages from 'merge-images';
import {
DEFAULT_OPTIONS,
TRANSPARENT_PNG,
IMAGE_TYPES,
checkSaveType,
convert2NonReactive
} from '../utils/index';
Expand All @@ -21,10 +22,6 @@ export default {
customStyle: {
type: Object
},
saveType: {
type: String,
default: 'image/png'
},
options: {
type: Object,
default: () => ({})
Expand Down Expand Up @@ -74,12 +71,15 @@ export default {
this.signatureData = TRANSPARENT_PNG;
this.signaturePad.fromData(data);
},
saveSignature() {
const { signaturePad, saveType } = this;
saveSignature(type = IMAGE_TYPES[0], encoderOptions) {
const { signaturePad } = this;
const status = { isEmpty: false, data: undefined };

if (!checkSaveType(saveType)) {
throw new Error('Image type is incorrect!');
if (!checkSaveType(type)) {
const imageTypesString = IMAGE_TYPES.join(', ');
throw new Error(
`The Image type is incorrect! We are support ${imageTypesString} types.`
);
}

if (signaturePad.isEmpty()) {
Expand All @@ -88,7 +88,7 @@ export default {
isEmpty: true
};
} else {
this.signatureData = signaturePad.toDataURL(saveType);
this.signatureData = signaturePad.toDataURL(type, encoderOptions);

return {
...status,
Expand Down
8 changes: 2 additions & 6 deletions src/components/__tests__/VueSignatruePad.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,9 @@ describe('VueSignaturePad Component', () => {
});

it('should be throw incorrect image error message', () => {
const addOptionsWrapper = shallowMount(VueSignaturePad, {
propsData: {
saveType: 'text/html'
}
});
const addOptionsWrapper = shallowMount(VueSignaturePad);

expect(() => addOptionsWrapper.vm.saveSignature()).toThrow();
expect(() => addOptionsWrapper.vm.saveSignature('text/html')).toThrow();
});

it('should be return empty status and undefined data', () => {
Expand Down
4 changes: 2 additions & 2 deletions src/utils/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const SAVE_TYPE = ['image/png', 'image/jpeg', 'image/svg+xml'];
export const IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/svg+xml'];

export const checkSaveType = type => SAVE_TYPE.includes(type);
export const checkSaveType = type => IMAGE_TYPES.includes(type);

export const DEFAULT_OPTIONS = {
dotSize: (0.5 + 2.5) / 2,
Expand Down

0 comments on commit 38a1ca0

Please sign in to comment.