Javascript screenshot jQuery plugin imgAreaSelect Usage Details, jquery. imgareaselect

Javascript jQuery plug-in imgAreaSelect Usage Details, jquery. imgareaselect

To enable users to customize their profile pictures, you need to provide an image upload function. Currently, many websites, especially SNS, provide this function, which is very practical. There are two main implementation methods: flash and javascript. Each method has a swing. For details about Flash, refer to the picture upload function in the UcHome program, however, this is not the topic I will discuss. Here I will mainly discuss how to implement javascript and use the imgAreaSelect plug-in of jQuery to easily implement the [avatar] javascript function of the custom avatar.

I. preparation:
Two JS files
1. jquery. js download: jquery. js
2. jquery. imgareaselect. js download: jquery.imgareaselect.js?imgareaselect-0.6.2.zip]

Ii. Use

function preview(img, selection){ var scaleX = 100 / selection.width; var scaleY = 100 / selection.height; 

// Obtain the width, height, left border, and right border of the selected box from the dynamic avatar.

$('#biuuu + div > img').css({ width: Math.round(scaleX * 400) + 'px', height: Math.round(scaleY * 300) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); } 

// Load the Avatar

$(document).ready(function () { $('<div></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 }); }); 

3. Call

<div class="container"> <p>  </p> </div> 

The above javascript extension can implement many dynamic functions. The imgAreaSelect plug-in provided by jQuery is very simple to call. For other related applications, see imgAreaSelect Examples.

Using the jQuery plug-in imgAreaSelect to implement javascript is still very simple, basically it is a dynamic image display, get the location of the source image and the size of the Selection box [width and height], javascript functions can be easily implemented.