capture d'écran javascript plug-in jQuery utilisation de imgAreaSelect explication détaillée_jquery

Afin de permettre aux utilisateurs de personnaliser leurs avatars personnels, il est nécessaire de fournir une fonction de capture d'écran des images téléchargées. Actuellement, de nombreux sites Web, notamment les sites SNS, proposent une telle fonction, ce qui est très pratique. Il existe deux formes principales d'implémentation, l'une étant les captures d'écran Flash et l'autre les captures d'écran Javascript. Les deux méthodes ont leurs propres avantages et inconvénients. Concernant les captures d'écran Flash, vous pouvez vous référer à la fonction de téléchargement d'avatar dans le programme UcHome, mais ce n'est pas le cas. le sujet que je souhaite aborder. Mon objectif principal ici est de savoir comment implémenter des captures d'écran javascript, en utilisant le plug-in imgAreaSelect de jQuery pour implémenter facilement la fonction de capture d'écran javascript de l'avatar personnalisé [avatar].

1. Préparation :
Deux fichiers JS
1. Téléchargement de jquery.js : jquery.js
2. jquery.imgareaselect.js Télécharger : jquery.imgareaselect.js[imgareaselect-0.6.2.zip]

2. Utilisez

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

//Avatar dynamique Obtenez la largeur, la hauteur, la bordure gauche et la bordure droite de la boîte actuellement sélectionnée

$('#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' 
}); 
} 

//Charger le petit avatar

$(document).ready(function () { 
$('<div><img src="biuuu.jpg" style="position: relative;" /></div>') 
.css({ 
float: 'left', 
position: 'relative', 
overflow: 'hidden', 
width: '100px', 
height: '100px' 
}) 
.insertAfter($('#biuuu')); 
}); 

//Chargement initial

$(window).load(function () { 
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
}); 

Trois, appelle

<div class="container"> 
<p> 
<img id="biuuu" src="biuuu.jpg" title="biuuu" style="float: left; margin-right: 10px;" /> 
</p> 
</div> 

L'utilisation de la capture d'écran javascript ci-dessus pour développer peut réaliser de nombreuses fonctions dynamiques. Le plug-in imgAreaSelect fourni par jQuery est très simple à appeler. Pour d'autres applications connexes, veuillez vous référer à : Exemples imgAreaSelect
.
Il est très simple d'utiliser le plug-in jQuery imgAreaSelect pour implémenter des captures d'écran javascript. Il s'agit essentiellement d'un affichage d'image dynamique, obtenant la position de l'image source et la taille de la zone de sélection [largeur et hauteur], et réalisant facilement le javascript. fonction de capture d'écran.