JavaScript to implement the function of changing avatar

This article shares the specific code of JavaScript to implement the avatar change function for your reference. The specific content is as follows

The most important thing is to use the jQuery plugin cropper

1. Basic usage steps

1. Import the cropper.css stylesheet in the <head>:

<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

2. Before the closing tag of <body>, import the following js scripts in order:

<script src="/assets/lib/jquery.js"></script>
<!-- Import the cropper js script-->
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

3. Define the following HTML structure:

<!-- Image cropping and preview area in the first row-->
   <div class="row1">
         <!-- Image cropping area-->
            <div class="cropper-box">
                    <!-- This img tag is very important, it will be initialized as the cropping area in the future-->
                    <img id="image" src="/assets/images/sample.jpg" />
             </div>
             <!-- Image preview area-->
             <div class="preview-box">
                    <div>
                        <!-- Preview area with a width and height of 100px -->
                        <div class="img-preview w100"></div>
                        <p class="size">100 x 100</p>
                    </div>
                    <div>
                        <!-- Preview area with a width and height of 50px -->
                        <div class="img-preview w50"></div>
                        <p class="size">50 x 50</p>
                    </div>
                </div>
            </div>
 
 <!-- Button area of the second row-->
<div class="row2">
         <button type="button" class="layui-btn">Upload</button>
         <button type="button" class="layui-btn layui-btn-danger">OK</button>
</div>

4. Style CSS:

/* Set the width of the card body area */
 
.layui-card-body {
    width: 500px;
}
 
 
/* Set the style of the button row */
 
.row2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
 
 
/* Set the style of the clipping area */
 
.cropper-box {
    width: 350px;
    height: 350px;
    background-color: cyan;
    overflow: hidden;
}
 
 
/* Set the style of the first preview area */
 
.w100 {
    width: 100px;
    height: 100px;
    background-color: gray;
}
 
 
/* Set the style of the second preview area */
 
.w50 {
    width: 50px;
    height: 50px;
    background-color: gray;
    margin-top: 50px;
}
 
 
/* Set the style of the text below the preview area */
 
.size {
    font-size: 12px;
    color: gray;
    text-align: center;
}
 
 
/* Set the style of the image row */
 
.row1 {
    display: flex;
}
 
 
/* Set the style of the preview-box area */
 
.preview-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}
 
 
/* Set the style of the img-preview area */
 
.img-preview {
    overflow: hidden;
    border-radius: 50%;
}

5. Import your own jS file and write the following content to achieve basic trimming effect:

$(function() {
    // 1.1 Get the DOM element of the cropping area var $image = $('#image');
    // 1.2 Configuration options const options = {
        // aspect ratio aspectRatio: 1,
        //Specify the preview area preview: '.img-preview'
    };
 
    // 1.3 Create cropping area$image.cropper(options);
})

After completing the above preparations, you can achieve the following results

2. Replace the cropped image

1. Add an input box for uploading files, and make sure to hide the input box:

<!-- Button area of the second row-->
<div class="row2">
<!-- Through the accept attribute, you can specify what type of file the user is allowed to select-->
<input type="file" id="file" accept="image/png,image/jpeg" />
<button type="button" class="layui-btn" id="btnChooseImage">Upload</button>
<button type="button" class="layui-btn layui-btn-danger" id='btnUpload'>OK</button>
</div>

2. Bind the change event to the file selection box

// Bind the change event to the file selection box // The change event will be triggered whenever the selected file changes $('#file').on('change', function(e) {
        // Get the file selected by the user var filelist = e.target.files;
        if (filelist.length === 0) {
            return layer.msg('Please select a photo!');
        }
        // 1. Get the file selected by the user var file = e.target.files[0];
        // 2. Convert the file into a path var imgURL = URL.createObjectURL(file);
        // 3. Reinitialize the clipping area $image
            .cropper('destroy') // Destroy the old cropping area.attr('src', imgURL) // Reset the image path.cropper(options) // Reinitialize the cropping area})

3. Bind click event to confirm button

// Bind click event to confirm button$('#btnUpload').on('click', function() {
 // 1. To get the user's cropped avatar var dataURL = $image
            .cropper('getCroppedCanvas', { // Create a Canvas canvas width: 100,
                height: 100
            })
            .toDataURL('image/png') // Convert the content on the Canvas canvas into a string in base64 format // 2. Call the interface to upload the avatar to the server $.ajax({
            method: 'POST',
            url: '/my/update/avatar',
            data: {
                avatar: dataURL
            },
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg('Change avatar failed!');
                }
                layer.msg('Changed the avatar successfully!');
                window.parent.getUserInfo();
            }
 })

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: