Hoje vou apresentar a vocês uma ferramenta de captura de tela (como avatar, etc.) que é frequentemente usada na web:
JcropDemo
Estrutura do projeto:
Renderização:
Isso é útil:
Depois de ver isso, todos querem experimentar por si mesmos.
===========================================
Parte do código:
===========================================
Preparação:
Baixar: Jcrop-0.9.10 (formato zip)
Descompacte e coloque em seu projeto, assim como a estrutura do projeto acima...
/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial1.html
jQuery(função($){
// Quão fácil é isso??
$('#target').Jcrop();
});
</script>
</head>
<corpo>
<div id="externo">
<div>
<div>
<h1>Jcrop - Olá, mundo</h1>
<img src="demo_files/pool.jpg" id="target" />
<p>
<b>Este exemplo demonstra o comportamento padrão do Jcrop.</b>
Como nenhum manipulador de eventos foi anexado, ele apenas executa
o comportamento de cultivo.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Página inicial do Jcrop</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Documentos)</a>
</div>
</div>
</div>
</div>
</body>
</html>
Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop »Tutoriais» AspectRatio com visualização</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="texto/javascript">
jQuery(função($){
// Cria variáveis (neste escopo) para armazenar a API e o tamanho da imagem
var jcrop_api,boundx,boundy;
$('#alvo').Jcrop({
onChange: atualizaçãoPreview,
onSelect: atualizaçãoPreview,
proporção de aspecto: 1
}, função() {
//Use a API para obter o tamanho real da imagem
var limites = this.getBounds();
limitex = limites[0];
limite = limites[1];
// Armazena a API na variável jcrop_api
jcrop_api = isto;
});
função atualizaçãoPreview(c) {
if (parseInt(cw) > 0) {
var rx = 100/cw;
var ry = 100/ch;
$('#preview').css({
largura: Math.round(rx *boundx) + 'px',
altura: Math.round(ry *boundy) + 'px',
margemEsquerda: '-' + Math.round(rx * cx) + 'px',
marginTop: '-' + Math.round(ry * cy) + 'px'
});
}
}});
</script>
</head>
<corpo>
<div id="externo">
<div>
<div>
<h1>Jcrop - Proporção com painel de visualização</h1>
<tabela>
<tr>
<td>
<div>
<img src="demo_files/pool.jpg" id="target"/>
</div>
</td>
<td>
<div>
<img src="demo_files/pool.jpg" id="preview" />
</div>
</td>
</tr>
</tabela>
<p>
<b>Um exemplo de implementação de um painel de visualização.</b> Obviamente, a demonstração mais visual, o painel de visualização é realizado inteiramente fora do Jcrop com um simples retorno de chamada no estilo jQuery. Esse tipo de interface pode ser útil para criar uma miniatura ou avatar. . O manipulador de eventos onChange é usado para atualizar a visualização no painel de visualização.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Página inicial do Jcrop</a> | <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Documentos )</a>
</div>
</div>
</div>
</div>
</body>
</html>
/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial4.html