Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
vue-plain-avatar-uploader
Advanced tools
This is a plain vue component used to help cropping image when choosing one image as avatar.
Firstly, install this component:
npm install vue-plain-avatar-uploader
Secondly, import and use this component:
<template>
<avatar-uploader />
</template>
<script>
import AvatarUploader from 'vue-plain-avatar-uploader';
export default {
name: 'App',
components: {
AvatarUploader
}
};
</script>
More detailed example is in this REPO.
Name | Type | Default | Description |
---|---|---|---|
height | number | 150 | height of this component |
maskProps | object | undefined | customize mask above image, details are below |
outputProps | object | undefined | customize mask above image, details are below |
backgroundColor | string | '#f2f3f8' | background color of container containing image |
maxMultiple | number | 2 | maximum multiple of enlarging image, the reference is container |
hideShapeGroup | boolean | undefined | sometimes, we don't need to change shape of preview area |
img | string | undefined | url that can be accepted by attribute 'src' of element 'img', to set an image in advance |
When no image is selected, there should be a button used to open file manager in preview area of mask layer.
This slot only provides a function click
, an usage example in framework vuetify is below:
<template>
<avatar-uploader>
<template #[`action.innerSelectButton`]="{ on }">
<v-icon v-on="on">mdi-upload</v-icon>
</template>
</avatar-uploader>
</template>
So called slider is used to adjust image size, and also an example is below:
<template>
<avatar-uploader>
<template #[`action.slider`]="{ on, attrs }">
<v-slider v-on="on" v-bind="attrs" step="0.01" hide-details />
</template>
</avatar-uploader>
</template>
Used to change shape of preview area at mask layer, an example is below:
<template>
<avatar-uploader>
<template #[`action.shapeGroup`]="{ on, attrs, options }">
<v-radio-group @change="on.input" v-bind="attrs" row dense hide-details class="mt-0">
<v-radio :label="option.text" :value="option.value" v-for="(option, index) in options" :key="index"></v-radio>
</v-radio-group>
</template>
</avatar-uploader>
</template>
* Instead of function 'input', component radio-group of vuetify use function 'change' to implement bidirectional binding
Similar with action.selectInnerButton
functionally, but the position of this slot is at right side of component.
Specially, this slot provides an attribute text
, which indicates whether an image has been selected or not.
<template>
<avatar-uploader>
<template #[`action.selectButton`]="{ on, text }">
<v-btn v-on="on" small>{{ text }}</v-btn>
</template>
</avatar-uploader>
</template>
* Recklessly, value of attribute 'text' is one of '选择' and '重选'
Finally, we finish adjusting and cropping image, and click one confirming button.
This slot provides a function confirm
, which we will emit function 'confirm' injected by parent component after triggering.
<template>
<avatar-uploader>
<template #[`action.confirmButton`]="{ on, attrs }">
<v-btn v-on="on" v-bind="attrs" small>确定</v-btn>
</template>
</avatar-uploader>
</template>
Name | Description |
---|---|
confirm | export output to parent component as an url (created by function canvas.toDataUrl ) |
{
// color of mask layer, the default is '#00000025'
// eg. '#00000025', 'rgba(255,255,255, 0.37)'
shadowColor: string,
// border-radius of transparent area of mask
// the default is '5px'
// only works when shape of transparent area is set as 'square'
squareBorderRadius: string,
}
{
// size of output image
// the default is [100, 100]
outputSize: array<number>,
// format of output image
// the default is 'png'
// eg. 'png', 'jpeg'
format: string,
// when selected part of image can not fill a square
// we will see the background
// the default is 'transparent' (when format is 'png') and '#fff' (other format)
// nb. 'transparent' only works when 'png' format
backgroundColor: string,
}
For better understanding of those slots, here's one example in vuetify:
<template>
<avatar-uploader @confirm="confirmAvatar" hideShapeGroup :img="avatar">
<template #[`action.innerSelectButton`]="{ on }">
<v-icon v-on="on">mdi-upload</v-icon>
</template>
<template #[`action.slider`]="{ on, attrs }">
<v-slider v-on="on" v-bind="attrs" step="0.01" hide-details />
</template>
<template #[`action.shapeGroup`]="{ on, attrs, options }">
<v-radio-group @change="on.input" v-bind="attrs" row dense hide-details class="mt-0">
<v-radio :label="option.text" :value="option.value" v-for="(option, index) in options" :key="index"></v-radio>
</v-radio-group>
</template>
<template #[`action.selectButton`]="{ on, text }">
<v-btn v-on="on" small>{{ text }}</v-btn>
</template>
<template #[`action.confirmButton`]="{ on, attrs }">
<v-btn v-on="on" v-bind="attrs" small>确定</v-btn>
</template>
</avatar-uploader>
</template>
<script>
export default {
components: {
AvatarUploader: () => import('vue-plain-avatar-uploader')
}
data() {
return {
avatar: 'xxx.png'
};
},
};
</script>
Result is showing up in the second GIF of REPO README.
CN version is here.
FAQs
A plain component used when setting avatar.
The npm package vue-plain-avatar-uploader receives a total of 9 weekly downloads. As such, vue-plain-avatar-uploader popularity was classified as not popular.
We found that vue-plain-avatar-uploader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.