Comentario: En el pasado, si quisiera mostrar imágenes en escala de grises en la web, solo podría usar el software de imagen para convertirlas. Pero ahora este proceso se puede lograr con la ayuda del lienzo HTML5, sin la necesidad de usar el software de edición de imágenes
En el pasado, si deseaba mostrar imágenes de escala de grises en la web, solo podría usar el software de imagen manualmente para convertirlas. Pero ahora este proceso se puede lograr con la ayuda del lienzo HTML5, sin la necesidad de usar el software de edición de imágenes. Utilicé HTML5 y JQuery para hacer una demostración para mostrar cómo implementar esta función.Objetivo
Esta demostración le mostrará cómo cambiar entre la imagen en escala de grises y la imagen original al mover el mouse en la imagen con HTML5 y jQuery. Antes de que apareciera HTML5, para implementar esta función, dos imágenes deben estar preparadas, una imagen en escala de grises y una imagen original. Pero ahora se puede lograr más rápido y más fácil con HTML5, porque las imágenes en escala de grises se generan directamente en la imagen original. Espero que este código JS sea útil cuando cree funciones de visualización de archivos o imágenes.
Diagrama de reproducción
código jQuery
El siguiente código jQuery buscará la imagen de destino y generará una versión en escala de grises. Cuando mueve el mouse a la imagen, la imagen en escala de grises se convertirá en el color primario.
<script src = "jQuery.min.js" type = "text/javascript"> </script>
<script type = "text/javaScript">
// Establecer el evento de carga de la ventana para esperar a que se carguen todas las imágenes antes de ejecutar
$ (ventana) .load (function () {
// Haga que la imagen ingrese gradualmente para que la imagen original con color no se muestre, y luego ejecute el evento de carga de la ventana
$ (". Artículo img"). Fadein (500);
// copia la imagen
$ ('. Artem img'). Cada (function () {
var el = $ (esto);
el.css ({"posición": "absoluto"}). wrap ("<div>"). clone (). addClass ('img_grayscale'). css ({"posición": "absoluta", "z-index": "998", "opacidad": "0"}). inserte (el) .queue (function () {) {)
var el = $ (esto);
el.parent (). CSS ({"ancho": this.width, "altura": this.height});
el.dequeue ();
});
this.src = GrayScale (this.src);
});
// hacer que la imagen ingrese gradualmente
$ ('. Artem img'). Mouseover (function () {
$ (this) .parent (). find ('img: primero'). stop (). Animate ({Opacidad: 1}, 1000);
})
$ ('. IMG_GRAYSCALE'). MouseOut (function () {
$ (this) .stop (). Animate ({Opacidad: 0}, 1000);
});
});
// Hacer fotos grises con lienzo
Función GrayScale (SRC) {
var lienvas = document.createElement ('Canvas');
var ctx = canvas.getContext ('2d');
var imgobj = nueva imagen ();
imgobj.src = src;
Canvas.width = imgobj.width;
Canvas.Height = imgobj.Height;
ctx.DrawImage (imgobj, 0, 0);
var imgpiXels = ctx.getImagegeATA (0, 0, Canvas.Width, Canvas.Height);
para (var y = 0; y <imgpixels.height; y ++) {
para (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);
return Canvas.todataurl ();
}
</script>
Cómo usar
Siga los pasos a continuación:
Cita jQuery.js
Copiar el código anterior
Establezca la imagen de destino (por ejemplo: .post-img, img, .gallery img, etc.)
También puede establecer la velocidad de la animación (es decir, 1000 = 1 segundo)
compatibilidad
Probé todos los navegadores que admiten HTML5 y lienzo, como: Chrome, Safari y Firefox. Si se trata de un navegador que no admite HTML5, solo usará la imagen original y no generará imágenes en escala de grises.
Nota: Si el archivo HTML local no puede ejecutarse en Firefox y Chrome, debe implementar el archivo HTML en el servidor.
Práctica
Lo probé yo mismo de acuerdo con el tutorial y encontré algunas cosas a las que ser prestado. Abrí la página con Firefox. El programa no puede ejecutarse correctamente, pero puede ejecutarse después de implementar el código relevante al servidor.
Se debe garantizar que sea una imagen local, de lo contrario debe informar un error de seguridad.
Esto es porque:
El lienzo es un elemento de lona en el estándar HTML5 y se puede usar para dibujar imágenes 2D y 3D.
Sin embargo, es fácil encontrar problemas de error de seguridad durante la depuración.
Actualmente, los errores de seguridad que encontré durante la depuración aparecen principalmente en Todataurl () y SRC.
El error de seguridad indica que este código no tiene problemas semánticos, pero no puede ejecutarse normalmente debido a razones de seguridad.
La situación del error de seguridad de lanzamiento:
Uso de imágenes de dominio cruzado en lienzo
Depuración en un entorno local sin servidor
No se puede obtener la relación entre el dominio actual y la imagen
Algunas de las soluciones que se encuentran en StackOverflow generalmente son para resolver los problemas de dominio cruzado.
Pero de hecho, si no usa el software del servidor durante la depuración local, también causará este problema.
Por ejemplo: la función Todataurl se usa durante la depuración local, y el archivo de imagen local se usa en lienzo. En Chrome y Firefox, aún se lanzará un error de seguridad.
Una solución común es configurar un entorno de servidor localmente, o enviar el contenido al servidor para la depuración.