Comentario: HTML5, tan mágico. El programa fue probado en Google Browser. Los amigos interesados pueden referirse a los pasos específicos para implementar la escala de grises de imagen utilizando el lienzo de componente HTML5 explicado en este artículo. Espero que te sea útil.
Cree una nueva página HTML y agréguela entre etiquetas de cuerpo
<Vas> Filtro gris </able>
Agregue un script JavaScript más simple
<pre> window.onload = function () {
var canvas = document.getElementById ("mycanvas");
<span> </span> // TODO: Haz algo aquí
}
El código para obtener el contexto del contexto del objeto de dibujo del objeto Canvas es el siguiente:
var context = canvas.getContext ("2d");
El código HTML para agregar una imagen a la página HTML es el siguiente
<img src = "hanjiaren.jpg" />
El código JavaScript para obtener el objeto de imagen del objeto HTML IMG es el siguiente:
var image = document.getElementById ("ImageSource");
El código para dibujar la imagen resultante en el objeto Canvas es el siguiente:
context.DrawImage (imagen, 0, 0);
El código para obtener datos de píxeles de imagen de un objeto de lienzo es el siguiente:
var canvasdata = context.getImagegedata (0, 0, Canvas.Width, Canvas.Height);
El código para leer valores de píxeles e implementar el cálculo de la escala de grises es el siguiente:
para (var x = 0; x <canvasdata.width; x ++) {
para (var y = 0; y <canvasdata.height; y ++) {
// índice del píxel en la 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];
// Calcular el valor de la escala de grises
var gris = .299 * r + .587 * g + .114 * b;
// Asignar valor de escala de grises
canvasdata.data [idx + 0] = gris; // canal rojo
canvasdata.data [idx + 1] = gris; // canal verde
canvasdata.data [idx + 2] = gris; // canal azul
canvasdata.data [IDX + 3] = 255; // canal alfa
// Agregar borde negro
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;
}
}
}
Donde la fórmula de escala de grises de cálculo es color gris = 0.299 × color rojo + 0.578 × color verde + 0.114 * color azul
Los valores de píxeles de lectura son RGBA, que representan color rojo, color verde, color azul, canal alfa.
Los datos procesados deben volver a cargar en lienzo. El código es el siguiente:
context.putimagedata (Canvasdata, 0, 0);
El efecto final del programa es el siguiente:
El código fuente completo es el siguiente:
<html>
<Evista>
<script>
window.onload = function () {
var canvas = document.getElementById ("mycanvas");
var image = document.getElementById ("ImageSource");
// Vuelva a tamaño la desminsión del lienzo
Canvas.Width = Image.Width;
Canvas.Height = Image.Height;
// Obtener objeto de renderizado 2D
var context = canvas.getContext ("2d");
context.DrawImage (imagen, 0, 0);
var canvasdata = context.getImagegedata (0, 0, Canvas.Width, Canvas.Height);
alerta (CanvasData.Width.ToString ());
alerta (CanvasData.Height.ToString ());
// Filtro gris
para (var x = 0; x <canvasdata.width; x ++) {
para (var y = 0; y <canvasdata.height; y ++) {
// índice del píxel en la 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];
// Calcular el valor de la escala de grises
var gris = .299 * r + .587 * g + .114 * b;
// Asignar valor de escala de grises
canvasdata.data [idx + 0] = gris; // canal rojo
canvasdata.data [idx + 1] = gris; // canal verde
canvasdata.data [idx + 2] = gris; // canal azul
canvasdata.data [IDX + 3] = 255; // canal alfa
// Agregar borde negro
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); // en Coords 0,0
};
</script>
</ablo>
<Body>
<H2> ¡Hola mundo! </h2>
<img src = "hanjiaren.jpg" />
<Vas> Filtro gris </able>
</body>
</html>
Los archivos en el código pueden reemplazar cualquier archivo de imagen que desee ver
Html5, tan mágico. El programa se prueba en Google Browser.
Últimos consejos, no intente ejecutar el código anterior localmente. La verificación de seguridad de Google bloqueará automáticamente la lectura y la redacción de archivos que no son de dominio desde el navegador.
Es mejor publicarlo en Tomcat o en cualquier servidor de contenedores web y ver el efecto de Google Browser.