Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-avatar-editor-improved
Advanced tools
Resize, rotate and crop your uploaded image using a clear user interface
Readme
Facebook like, avatar / profile picture component. This is Vue.js clone of mosch/react-avatar-editor
Resize, rotate and crop your uploaded image using a clear user interface.
Demo at https://fpluquet.github.io/vue-avatar-editor/
This is a Node.js module available through the npm registry.
Before installing, download and install Node.js. Node.js 0.10 or higher is required.
Installation is done using the
npm install
command:
$ npm install vue-avatar-editor-improved
<div id="app">
<vue-avatar
:width=400
:height=400
:rotation="rotation"
:scale="scale"
ref="vueavatar"
@vue-avatar-editor:image-ready="onImageReady"
>
</vue-avatar>
<br>
<input
type="range"
min=1
max=3
step=0.02
:value='scale'
/>
<input
type="range"
min=1
max=3
step=0.02
:value='rotation'
/>
<br>
<button v-on:click="saveClicked">Click</button>
<br>
<img ref="image">
</div>
import Vue from 'vue'
import {VueAvatar} from 'vue-avatar-editor-improved'
let vm = new Vue({
el: '#app',
components: {
VueAvatar,
VueAvatarScale
},
data () {
return {
rotation: 0,
scale: 1
};
},
methods: {
saveClicked () {
var img = this.$refs.vueavatar.getImageScaled()
this.$refs.image.src = img.toDataURL()
},
onImageReady () {
this.scale = 1
this.rotation = 0
}
}
})
Prop | Type | Description |
---|---|---|
width | Number | The total width of the editor |
height | Number | The total width of the editor |
border | Number | The cropping border. Image will be visible through the border, but cut off in the resulting image. |
color | Number[] | The color of the cropping border, in the form: [red (0-255), green (0-255), blue (0-255), alpha (0.0-1.0)] |
style | Object | Styles for the canvas element |
scale | Number | The scale of the image. You can use this to add your own resizing slider. |
rotation | Number | The rotation in degrees of the image. You can use this to add your own rotating slider. |
accept | String | Types of accepted files (accept props in file input). Default image/* . Exemplary other value image/png, image/jpeg . |
placeholderSvg | String | Content of svg file for placeholder image |
this.$refs.vueavatar.getImage()
The resulting image will have the same resolution as the original image, regardless of the editor's size.
If you want the image sized in the dimensions of the canvas you can use getImageScaled
.
this.$refs.vueavatar.getImageScaled()
For development you can use following build tools:
npm run build
: Builds the minified dist file: dist/index.js
npm run dev
: Watches for file changes and builds unminified into: dist/index.js
localhost:8080)FAQs
Resize, rotate and crop your uploaded image using a clear user interface
The npm package vue-avatar-editor-improved receives a total of 828 weekly downloads. As such, vue-avatar-editor-improved popularity was classified as not popular.
We found that vue-avatar-editor-improved 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.