Comentário: html5, tão mágico. O programa foi testado no navegador do Google. Os amigos interessados podem se referir às etapas específicas para implementar a escala de cinza de imagem usando a tela do componente HTML5 explicada neste artigo. Espero que seja útil para você.
Crie uma nova página HTML e adicione -a entre as tags do corpo
<Canvas> filtro cinza </lvas>
Adicione um script JavaScript mais simples
<pre> window.onload = function () {
var canvas = document.getElementById ("mycanvas");
<span> </span> // TODO: Faça algo aqui
}
O código para obter o contexto do objeto de desenho do objeto Canvas é o seguinte:
var context = Canvas.getContext ("2D");
O código HTML para adicionar uma imagem à página HTML é a seguinte
<img src = "hanjiaren.jpg" />
O código JavaScript para obter o objeto de imagem do objeto HTML IMG é o seguinte:
var imagem = document.getElementById ("Imagesource");
O código para desenhar a imagem resultante no objeto Canvas é o seguinte:
context.Drawimage (imagem, 0, 0);
O código para obter dados de pixel de imagem de um objeto de tela é o seguinte:
var Canvasdata = context.getImagedata (0, 0, canvas.width, canvas.Height);
O código para ler valores de pixel e implementar o cálculo da escala de cinza é o seguinte:
for (var x = 0; x <canvasdata.width; x ++) {
for (var y = 0; y <canvasdata.Height; y ++) {
// índice do pixel na matriz
var idx = (x + y * canvasdata.width) * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var B = Canvasdata.data [IDX + 2];
// Calcule o valor da escala de cinza
var cinza = .299 * r + .587 * g + .114 * b;
// atribui valor à escala de cinza
canvasdata.data [idx + 0] = cinza; // canal vermelho
canvasdata.data [idx + 1] = cinza; // canal verde
canvasdata.data [idx + 2] = cinza; // canal azul
canvasdata.data [idx + 3] = 255; // canal alfa
// Adicionar borda preta
if (x <8 || y <8 || x> (Canvasdata.width - 8) || y> (Canvasdata.Height - 8))
{
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
}
}
}
Onde o cálculo da fórmula em escala de cinza é cor cinza = 0,299 × cor vermelha + 0,578 × cor verde + 0,114 * cor azul
Os valores de pixel de leitura são RGBA, que representam cor vermelha, cor verde, cor azul, canal alfa.
Os dados processados devem ser recarregados na tela. O código é o seguinte:
context.putImagedata (Canvasdata, 0, 0);
O efeito final do programa é o seguinte:
O código -fonte completo é o seguinte:
<html>
<head>
<Cript>
window.onload = function () {
var canvas = document.getElementById ("mycanvas");
var imagem = document.getElementById ("Imagesource");
// reenvie a desminsion da tela
canvas.width = image.width;
canvas.Height = Image.Height;
// Obtenha o objeto de renderização 2D
var context = Canvas.getContext ("2D");
context.Drawimage (imagem, 0, 0);
var Canvasdata = context.getImagedata (0, 0, canvas.width, canvas.Height);
alerta (Canvasdata.width.toString ());
alerta (Canvasdata.Height.ToString ());
// filtro cinza
for (var x = 0; x <canvasdata.width; x ++) {
for (var y = 0; y <canvasdata.Height; y ++) {
// índice do pixel na matriz
var idx = (x + y * canvasdata.width) * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var B = Canvasdata.data [IDX + 2];
// Calcule o valor da escala de cinza
var cinza = .299 * r + .587 * g + .114 * b;
// atribui valor à escala de cinza
canvasdata.data [idx + 0] = cinza; // canal vermelho
canvasdata.data [idx + 1] = cinza; // canal verde
canvasdata.data [idx + 2] = cinza; // canal azul
canvasdata.data [idx + 3] = 255; // canal alfa
// Adicionar borda preta
if (x <8 || y <8 || x> (Canvasdata.width - 8) || y> (Canvasdata.Height - 8))
{
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
}
}
}
context.putImagedata (Canvasdata, 0, 0); // em Coords 0,0
};
</script>
</head>
<Body>
<H2> Olá, mundo! </h2>
<img src = "hanjiaren.jpg" />
<Canvas> filtro cinza </lvas>
</body>
</html>
Os arquivos no código podem substituir os arquivos de imagem que você deseja ver
Html5, tão mágico. O programa é testado no navegador do Google.
Último conselho, não tente executar o código acima localmente. A verificação de segurança do Google bloqueará automaticamente a leitura e a gravação de arquivos não domínios no navegador.
É melhor publicá -lo no Tomcat ou em qualquer servidor de contêineres da web e visualizar o efeito do navegador do Google.