Quelqu'un sait d'une façon que je peux obtenir CSS pour faire une image PNG avec transparence regard complètement noirci comme une silhouette?Silhouette une image PNG en utilisant CSS
Dans d'autres mots- Allant de quelque chose comme ceci:
à ceci:
Il est pour beaucoup d'images qui est la raison pour laquelle je voudrais évitez de le faire via Photoshop.
J'ai essayé ce code qui utilise une toile, peut-être vous pouvez l'affiner en particulier sur pixel plus léger dans la pomme
<img id="canvasSource" src="apple.jpg" />
<br />
<canvas id="area" width="264" height="282"></canvas>
<!-- Javascript Code -->
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("area");
var context = canvas.getContext("2d");
var image = document.getElementById("canvasSource");
context.drawImage(image, 0, 0);
var imgd = context.getImageData(0, 0, 264, 282);
var pix = imgd.data;
var blackpixel = 21;
for (var i = 0, n = pix.length; i < n; i += 4) {
//console.log(pix[i], pix[i+1], pix[i+2]);
if (i > 3) {
if ((Math.abs(pix[i-3] - pix[i]) > 10) &&
(Math.abs(pix[i-2] - pix[i+1]) > 10) &&
(Math.abs(pix[i-1] - pix[i+2]) > 10)
) {
pix[i ] = blackpixel;
pix[i+1] = blackpixel;
pix[i+2] = blackpixel;
}
}
else {
if (pix[i] < 250 && pix[i+1] < 250 && pix[i+2] < 250) {
pix[i ] = blackpixel;
pix[i+1] = blackpixel;
pix[i+2] = blackpixel;
}
}
}
context.putImageData(imgd, 0, 0);
};
</script>
Solution de rad, fcalderan! Juste dû ajouter var blackpixel = 0; (fyi pour quiconque trébuche sur ce code). – Susan
Je ne vois pas comment cela pourrait être fait avec des css purs. Javascript peut être en mesure de l'atteindre, mais vous pouvez envisager d'utiliser la programmation côté serveur à la place. Avec php vous pouvez faire une copie de votre png d'origine sur le serveur et remplacer les pixels non transparents par une seule couleur. Ce serait similaire à une fonction de tatouage.
Pouvez-vous penser à un moyen via JavaScript? C'est pour un étudiant dans l'une de mes classes et nous travaillons juste avec le code côté client - alors que je pourrais le comprendre avec PHP GD, j'essaie de trouver une solution applicable à la technologie que nous utilisons. – Susan
Susan, j'ai été incapable de trouver un moyen qui ne repose pas sur le traitement du serveur. Si vous créez une solution, veuillez poster un lien ici. – Dylan
Vous pouvez appliquer le style d'image comme filter: contrast(0%) brightness(50%) pour obtenir une silhouette. Ne pas oublier les préfixes.
Nowdays, filtre combiné pour mélanger-mélange mode peut faire aussi:
span {/* to be used to lay the 'blender mask' over img */
position: relative;
display: inline-block;
overflow:hidden;
}
span img {
display: block;/* erase gap */
max-width:45vw;
filter: contrast(150%);
}
span + span img {
filter: contrast(120%) saturate(0%);/* saturate(0%) is similar to grayscale(100%) */
}
span:before {
content: '';
z-index: 1;
height: 100%;
background: white;
position: absolute;
top: 0;
width: 100%;
display: block;
filter: contrast(10000%) brightness(0) saturate(100%) grayscale(100%);
mix-blend-mode: color-burn;/* bake it to black */
animation : span 2s infinite alternate;
}
@keyframes span {
from{
transform:translate(-100%,0)
}
25%,50% {
transform:translate(0,0);
}
to{
transform:translate(100%,0)
}
}<span><img src="https://i.stack.imgur.com/somZ7.jpg"/></span>
<span><img src="https://i.stack.imgur.com/somZ7.jpg"/></span>
Je suis sûr que ce soit l'un de ces "CSS ne peut pas le faire" exemples. Vous allez juste devoir aller dans Photoshop (en fait assez facile, ne devrait pas prendre plus de deux minutes :)) – Kyle