Hoy les presentaré una herramienta de captura de pantalla (como avatar, etc.) que se usa con frecuencia en la web:
Demostración de jcrop
Estructura del proyecto:
Representación:
Esto es útil:
Después de ver esto, todos quieren probarlo ellos mismos.
=============================================
Parte del código:
=============================================
Preparación:
Descargar: Jcrop-0.9.10 (formato zip)
Descomprímalo y colóquelo en su proyecto, tal como la estructura del proyecto anterior...
/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial1.html
jQuery(función($){
// ¿Qué tan fácil es esto?
$('#objetivo').Jcrop();
});
</script>
</cabeza>
<cuerpo>
<div id="exterior">
<div>
<div>
<h1>Jcrop - Hola mundo</h1>
<img src="demo_files/pool.jpg" id="destino" />
<p>
<b>Este ejemplo demuestra el comportamiento predeterminado de Jcrop.</b>
Como no se han adjuntado controladores de eventos, solo realiza
el comportamiento de cultivo.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Inicio de Jcrop</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Documentos)</a>
</div>
</div>
</div>
</div>
</cuerpo>
</html>
Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//ES"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="tipo de contenido" content="text/html;charset=UTF-8" />
<title>Jcrop » Tutoriales » relación de aspecto con vista previa</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<enlace rel="hoja de estilo" href="../css/jquery.Jcrop.css" tipo="texto/css" />
<enlace rel="hoja de estilo" href="demo_files/demos.css" type="text/css" />
<tipo de script="texto/javascript">
jQuery(función($) {
// Crea variables (en este ámbito) para contener la API y el tamaño de la imagen
var jcrop_api, enlazadox, enlazado;
$('#objetivo').Jcrop({
onChange: actualización de vista previa,
onSelect: actualizarVista previa,
relación de aspecto: 1
}, función() {
// Usa la API para obtener el tamaño real de la imagen
var límites = this.getBounds();
límitex = límites[0];
límite = límites[1];
// Almacena la API en la variable jcrop_api
jcrop_api = esto;
});
función actualizarVistaPrevia(c) {
si (parseInt(cw) > 0) {
var rx = 100/cw;
variedad = 100/canal;
$('#vista previa').css({
ancho: Math.round(rx *boundx) + 'px',
altura: Math.round(ry *boundy) + 'px',
margenIzquierdo: '-' + Math.round(rx * cx) + 'px',
marginTop: '-' + Math.round(ry * cy) + 'px'
});
}
}});
</script>
</cabeza>
<cuerpo>
<div id="exterior">
<div>
<div>
<h1>Jcrop: relación de aspecto con panel de vista previa</h1>
<tabla>
<tr>
<td>
<div>
<img src="demo_files/pool.jpg" id="destino"/>
</div>
</td>
<td>
<div>
<img src="demo_files/pool.jpg" id="vista previa" />
</div>
</td>
</tr>
</tabla>
<p>
<b>Un ejemplo de implementación de un panel de vista previa.</b> Obviamente, la demostración más visual, el panel de vista previa se logra completamente fuera de Jcrop con una simple devolución de llamada con estilo jQuery. Este tipo de interfaz podría ser útil para crear una miniatura o un avatar. El controlador de eventos onChange se utiliza para actualizar la vista en el panel de vista previa.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Inicio de Jcrop</a> | <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Documentos) )</a>
</div>
</div>
</div>
</div>
</cuerpo>
</html>
/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial4.html