It took more than a day to finally get it done, post it and share it
In order to enable users to customize their personal avatars, it is necessary to provide a function of taking screenshots of uploaded pictures. Currently, many websites, especially SNS websites, provide such a function, which is 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 focus on how to implement javascript screenshots, using jQuery's imgAreaSelect plugin to easily achieve custom avatar [avatar]javascript screenshots
First, use the jquery upload and cut plugin imgAreaSelect
Official download address: http://odyniec.net/projects/imgareaselect/
After pressurization, there are two js files in it
One is jquery.min.js the other is jquery.imgareaselect.js
Introduce these two js files into the project
Second, add javascript code to the file
// preview display
function preview(img, selection){
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
//The dynamic small avatar gets the width, height, left border, right border of the currently selected box
$('#view').css({ //view is the id of the preview image
width: Math.round(scaleX * 300) + 'px',
height: Math.round(scaleY * 220) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
//load the avatar
$(document).ready(function () {
$('<div><img id="view" src="bee.jpg" style="position: relative;" /></div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter('#biuuu'); //Put the new element after #biuuu
//.insertAfter($('#biuuu')); //Put the new element after #biuuu
});
//initialize loading
$(window).load(function () {
$('#biuuu').imgAreaSelect({
aspectRatio: '1:1', //Intercept ratio
//show:true,
//resizable:false, //whether resizable
autoHide: false,//Whether the selection box is canceled by itself
key:true, //Whether to enable the keyboard, the default is false
//x1: 75, y1: 30, x2: 225, y2: 180, //The area to be processed, the original
//x1: x-axis coordinate of upper left corner y1: y-axis coordinate of upper left corner x2: x-axis coordinate of lower right corner y2: y-axis coordinate of lower right corner
keys: { arrows: 1, ctrl: 5, shift: 'resize' }, // adjust pixel size
//onInit: function(img, selection) { ias.setSelection(100, 50, 250, 150, true); ias.update(); }, //Set the initial function to draw the selection box
onSelectChange: preview , //Event triggered when the selection box moves
onSelectEnd: getLocation //Event triggered when the selection box ends
});
});
The above detailed parameter configuration is also available on the official website, check it yourself
Finally, in the file use
<div>
<img id="biuuu" src="bee.jpg" title="biuuu" width="320px" height="220px" style="float: left; margin-right: 10px;"/>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
Description: 1. It is easy to use the plug-in to cut the preview effect, but it made me tangled for a long time: how to upload the generated preview image, I found a piece of code on the Internet, and found that as long as the size of the uploaded image is different, then the generated image is generated. The picture is also different, and then I think about the problem of scaling. That is to say, if the size of the actual image is different from the size displayed on the page and is scaled, then when uploading and cutting the image in the background, we must restore the size of the original image and make the part to be cut also Zoom in or out accordingly
Code:
System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(Server.MapPath("bee.jpg"));
int height = Convert.ToInt32(sourceImage.Height);//Get the height of the original image
int width = Convert.ToInt32(sourceImage.Width);//Get the width of the original image
x1 = x1*(width/320);//Scale according to the actual size
x2 = x2*(width/320);
y1 = y1*(height/240);
y2 = y2*(height/240);
The functionality of dynamic avatars is not resolved, this is an issue with the plugin itself