javascript - manipular - Cómo volver a teñir una imagen en escala de grises en un lienzo
convertir imagen a escala de grises online (3)
¿Hay alguna manera rápida de colorear el icono de escala de grises (imagen png con fondo transparente) al dibujarlo en el lienzo? Por colorizar me refiero a convertir el icono de escala de grises en digamos escala de grises (tonos de color determinado en lugar de gris para que coincida con el tema de color dado)
Sé que podría manipular cada píxel manualmente, pero tal vez haya alguna forma más automatizada.
¡Oye, prueba esta alternativa!
Primero crea un elemento de lienzo y usa el contexto canvas para dibujar la imagen. Puede usar los filtros canvas para aplicar efectos. luego use el método toDataURL para obtener el png de la imagen. Todo el procedimiento detallado se explica en los siguientes sitios web.
http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/
Finalmente use el método .toDataURL () para exportar / guardarlo.
¡Espero que funcione para ti!
Puedes lograrlo usando clases de CSS. Verifique el siguiente ejemplo PS: Fuente: w3Schools
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(250%);
filter: brightness(250%);
}
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
<body>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>
<img src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="blur" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="brightness" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="contrast" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="invert" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="opacity" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="saturate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="sepia" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="shadow" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
</body>
Consulte este enlace para aprender qué estilo de filtro puede hacer.
Use la composición para volver a teñir una imagen en escala de grises en "escala verde".
El uso de la composición es más rápido que la manipulación de píxeles y, como beneficio adicional, no se verá afectado por las restricciones de seguridad entre dominios (lo cual se hace si en su lugar se usa getImageData ).
- Crea una versión completamente verde de tu imagen.
- Dibuje su imagen en escala de grises en el lienzo.
- Establezca
globalCompositeOperation=''color''que hace que los píxeles de escala de grises existentes se vuelvan a teñir ("re-hued") con los píxeles dibujados en la parte superior. - Dibuje su imagen totalmente verde en el lienzo.
La composición de "color" convertirá la escala de grises en escala de grises.
Nota: requiere un navegador moderno con capacidades de mezcla (Edge no IE)
Código de ejemplo y una demostración:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/koolBW.png";
function start(){
// create a fully green version of img
var c=document.createElement(''canvas'');
var cctx=c.getContext(''2d'');
c.width=img.width;
c.height=img.height;
cctx.drawImage(img,0,0);
cctx.globalCompositeOperation=''source-atop'';
cctx.fillStyle=''green'';
cctx.fillRect(0,0,img.width,img.height);
cctx.globalCompositeOperation=''source-over'';
// draw the grayscale image onto the canvas
ctx.drawImage(img,0,0);
// set compositing to color (changes hue with new overwriting colors)
ctx.globalCompositeOperation=''color'';
// draw the fully green img on top of the grayscale image
// ---- the img is now greenscale ----
ctx.drawImage(c,0,0);
// Always clean up -- change compositing back to default
ctx.globalCompositeOperation=''source-over'';
}
body{ background-color:white; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=256 height=256></canvas>