Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:02:24
original
2136 Les gens l'ont consulté

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; 
Copier après la connexion



//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' 
}); 
} 
Copier après la connexion


//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')); 
}); 
Copier après la connexion



//Chargement initial

$(window).load(function () { 
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
}); 
Copier après la connexion


Trois, appelle

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


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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal