Comentário: No passado, se você quis exibir imagens em escala de cinza na web, só poderia usar manualmente o software de imagem para convertê -las. Mas agora esse processo pode ser alcançado com a ajuda da tela HTML5, sem a necessidade de usar o software de edição de imagens
No passado, se você quisesse exibir imagens em escala de cinza na web, só poderia usar manualmente o software de imagem para convertê -las. Mas agora esse processo pode ser alcançado com a ajuda da tela HTML5, sem a necessidade de usar o software de edição de imagens. Usei o HTML5 e o jQuery para fazer uma demonstração para mostrar como implementar essa função.Propósito
Esta demonstração mostrará como alternar entre a imagem em escala de cinza e a imagem original ao mover o mouse na imagem com html5 e jQuery. Antes de aparecer o HTML5, para implementar essa função, duas imagens precisam ser preparadas, uma imagem em escala de cinza e uma imagem original. Mas agora ele pode ser alcançado mais rápido e mais fácil com o HTML5, porque as imagens em escala de cinza são geradas diretamente na imagem original. Espero que esse código JS seja útil quando você criar funções de exibição de arquivos ou imagens.
Diagrama de reprodução
Código jQuery
O código jQuery a seguir procurará a imagem de destino e gerará uma versão em escala de cinza. Quando você move o mouse para a imagem, a imagem em escala de cinza se transforma na cor primária.
<script src = "jquery.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
// Defina o evento de carga da janela para aguardar todas as fotos para carregar antes de executar
$ (janela) .load (function () {
// Faça a imagem inserir gradualmente para que a imagem original com cor não seja exibida e execute o evento de carga da janela
$ (". Item img"). Fadein (500);
// Copie a imagem
$ ('. Item img'). cada (function () {
var el = $ (this);
el.css ({"position": "absoluta"}). wrap ("<div>"). clone (). addclass ('img_grayscale'). css ({"position": "absoluto", "z-index": "998", "opacity": "0"}).
var el = $ (this);
el.parent (). css ({"width": this.width, "altura": this.Height});
el.dequeue ();
});
this.src = cinza (this.src);
});
// Faça a imagem gradualmente entrar
$ ('. Item img'). MouseOver (function () {
$ (this) .Parent (). Find ('img: primeiro'). Stop (). Animate ({Opacity: 1}, 1000);
})
$ ('. img_grayscale'). mouseout (function () {
$ (this) .Stop (). Animate ({Opacity: 0}, 1000);
});
});
// Faça fotos cinza com tela
Função Grayscale (SRC) {
var canvas = document.createElement ('canvas');
var ctx = Canvas.getContext ('2D');
var imgobj = new Image ();
imgobj.src = src;
canvas.width = imgobj.width;
canvas.Height = imgobj.Height;
ctx.drawimage (imgobj, 0, 0);
var iMgpixels = ctx.getImagedata (0, 0, Canvas.width, Canvas.Height);
for (var y = 0; y <imgpixels.Height; y ++) {
for (var x = 0; x <imgpixels.width; x ++) {
var i = (y * 4) * imgpixels.width + x * 4;
var avg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;
imgpixels.data [i] = avg;
imgpixels.data [i + 1] = avg;
imgpixels.data [i + 2] = avg;
}
}
ctx.putImagedata (imgpixels, 0, 0, 0, imgpixels.width, imgpixels.height);
retornar canvas.todataurl ();
}
</script>
Como usar
Siga as etapas abaixo:
CITAÇÃO JQUERY.JS
Copie o código acima
Defina a imagem de destino (por exemplo: .Post-IMG, IMG, .Gallery IMG, etc.)
Você também pode definir a velocidade da animação (ou seja, 1000 = 1 segundo)
compatibilidade
Tentei todos os navegadores que suportam HTML5 e tela, como: Chrome, Safari e Firefox. Se for um navegador que não suporta HTML5, ele usará apenas a imagem original e não gera imagens em escala de cinza.
Nota: Se o arquivo HTML local não puder ser executado no Firefox e Chrome, você precisará implantar o arquivo HTML no servidor.
Auto-prática
Eu mesmo testei de acordo com o tutorial e encontrei algumas coisas a prestar atenção. Abri a página com o Firefox. O programa não pode ser executado corretamente, mas pode ser executado após a implantação do código relevante para o servidor.
Deve ter garantia de ser uma imagem local, caso contrário, você deve relatar um erro de segurança.
Isso é porque:
A tela é um elemento de tela no padrão HTML5 e pode ser usado para desenhar imagens 2D e 3D.
No entanto, é fácil encontrar problemas de erro de segurança durante a depuração.
Atualmente, os erros de segurança que encontrei durante a depuração aparecem principalmente em Todataurl () e SRC.
O erro de segurança indica que esse código não tem problemas semânticos, mas não pode ser executado normalmente devido a razões de segurança.
A situação do erro de segurança de arremesso:
Usando imagens de domínio cruzado em tela
Depuração em um ambiente local sem servidor
Incapaz de obter o relacionamento entre o domínio atual e a imagem
Algumas das soluções encontradas no StackOverflow geralmente permitem que você resolva problemas de domínio cruzado.
Mas, de fato, se você não usar o software do servidor durante a depuração local, isso também causará esse problema.
Por exemplo: a função Todataurl é usada durante a depuração local e o arquivo de imagem local é usado na tela. No Chrome e Firefox, o erro de segurança ainda será lançado.
Uma solução comum é configurar um ambiente de servidor localmente ou enviar o conteúdo ao servidor para depuração.