In order to enable users to customize their personal avatars, they need to provide a screenshot function for uploading pictures. Currently, many websites, especially SNS-type websites, provide such functions, which are very practical. There are two main forms of implementation, one is flash screenshot, and the other is javascript screenshot. Both methods have swings. For Flash screenshots, you can refer to the avatar upload function in the UcHome program, but this is not the topic I want to discuss. Here I mainly implement javascript screenshots, and use jQuery's imgAreaSelect plug-in to easily implement the custom avatar [avatar]javascript screenshot function.
1. Preparation:
Two JS files
1. Download:
2. Download: [imgareaselect-0.6.]
2. Use
function preview(img, selection){
var scaleX = 100 / ;
var scaleY = 100 / ;
//Dynamic small avatar Get the width, height, left border, right border of the currently selected box
$('#biuuu + div > img').css({
width: (scaleX * 400) + 'px',
height: (scaleY * 300) + 'px',
marginLeft: '-' + (scaleX * selection.x1) + 'px',
marginTop: '-' + (scaleY * selection.y1) + 'px'
});
}
//Load avatar
$(document).ready(function () {
$('<div><img src="" style="position: relative;" /></div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter($('#biuuu'));
});
//Initialize loading
$(window).load(function () {
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
Three, call
<div class="container"> <p> <img src="" title="biuuu" style="float: left; margin-right: 10px;" /> </p> </div>
Using the above javascript screenshot to expand can achieve many dynamic functions. The imgAreaSelect plug-in provided by jQuery is very simple to call. For other related applications, please refer to: imgAreaSelect Examples
It is very simple to implement javascript screenshots using the jQuery plug-in imgAreaSelect. It is basically a dynamic image display, which can obtain the position of the source image and the size [width and height] of the marquee, and easily implement the javascript screenshot function.