How to use the avatar image clipping plug-in cropbox js
How to use the avatar image clipping plug-in cropbox js. To solve this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.
Cropbox.js is a simple and lightweight avatar image clipping plug-in. Users can upload their own pictures, zoom in and out, drag them, and finally clip them to create new avatars. Cropbox.js supports pure js, either in conjunction with jquery or through YUI.
Cropbox.js pure js call plug-in
_ window.onload=function () {
Varoptions=
{
ImageBox:'.imageBox'
ThumbBox:'.thumbBox'
Spinner:'.spinner'
ImgSrc:'avatar.png'
}
Varcropper=newcropbox (options)
Document.querySelector ('# file'). AddEventListener ('change',function () {
Varreader=newFileReader ()
Reader.onload=function (e) {
Options.imgSrc=e.target.result
Cropper=newcropbox (options)
}
Reader.readAsDataURL (this.files [0])
This.files= []
})
Document.querySelector ('# btnCrop'). AddEventListener ('click',function () {
Varimg=cropper.getDataURL ()
Document.querySelector ('.cropped') .innerhtml + =''
})
Document.querySelector ('# btnZoomIn'). AddEventListener ('click',function () {
Cropper.zoomIn ()
})
Document.querySelector ('# btnZoomOut'). AddEventListener ('click',function () {
Cropper.zoomOut ()
})
}
Cropbox.js is used in conjunction with jquery
$(window) .load (function () {
Varoptions=
{
ThumbBox:'.thumbBox'
Spinner:'.spinner'
ImgSrc:'avatar.png'
}
Varcropper=$ ('.imageBox') .cropbox (options)
This is the answer to the question about how to use the avatar image clipping plug-in cropbox js. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.
