Javascript Girl
  1. Javascript Girl
  3. Remplacez une couleur spécifique par une autre dans une image / sprite
Intereting Posts
Opérateur Javascript! == Désactivez iOS Overscroll mais autorisez le défilement du corps JQuery fonctionne pour obtenir tous les éléments uniques d'un tableau? Angular 2: {{objet}} fonctionne, {{object.child}} erreur de lancer Créer et déclencher des événements tactiles sur un navigateur tactile? Définir une valeur de variable par défaut dans une fonction Filtre de recherche dans Angular.js, Jquery's live () est obsolète. Que puis-je utiliser maintenant? Enveloppez les images sur la pochette (image d'arrière-plan) Traduire le contenu en JavaScript en HTML avec Google Translate API JavaScript – remplit la liste déroulante avec le tableau Comment éviter que sessionStorage soit hérité lors de l'utilisation de target = "_ blank" /window.open () pour ouvrir une nouvelle fenêtre / onglet? En utilisant yepnope, comment puis-je savoir si une ressource css a été chargée avec succès? Flash détruit la mise au point du navigateur Get / set current keyframes @ keyframes / images clés

Remplacez une couleur spécifique par une autre dans une image / sprite

J'essaie de faire un jeu avec la toile de HTML5. J'ai quelques sprites, je peux les charger bien, et ils fonctionnent bien, mais certaines parties de l'image sont spécifiquement #ff0000 et j'aimerais pouvoir la remplacer par une autre couleur, une couleur personnalisée définie par l'utilisateur .

Je n'ai pas vraiment de direction, j'ai vu des filtres d'image, mais je n'ai vraiment pas trouvé d'exemples adaptés à mon usage, et je n'ai pas le cerveau pour le penser seul, croyez-moi, J'ai essayé.

Toute aide, conduite ou tout ce qui sera apprécié sera grandement appréciée.

Vous pouvez utiliser canvas 'getImageData pour remplacer toute couleur par une autre couleur. 

 // pull the entire image into an array of pixel data var imageData = context.getImageData(0, 0, w, h); // examine every pixel, // change any old rgb to the new-rgb for (var i=0;i<imageData.data.length;i+=4) { // is this pixel the old rgb? if(imageData.data[i]==oldRed && imageData.data[i+1]==oldGreen && imageData.data[i+2]==oldBlue ){ // change to your new rgb imageData.data[i]=newRed; imageData.data[i+1]=newGreen; imageData.data[i+2]=newBlue; } } // put the altered data back on the canvas context.putImageData(imageData,0,0);

Voici le code et un violon: http://jsfiddle.net/m1erickson/4apAS/ 

 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; padding:20px; } img{border:1px solid red;} </style> <script> $(function(){ // this just makes an image we can test with // it's just an image of a red rectangle var temp=document.createElement("canvas"); var tempctx=temp.getContext("2d"); tempctx.fillStyle="red"; tempctx.strokeStyle="blue"; tempctx.lineWidth=5; tempctx.rect(20,20,75,50); tempctx.fill(); var image0=document.getElementById("image0"); image0.src=temp.toDataURL(); var image=new Image(); image.onload=function(){ // call function to replace red with green recolorImage(image,255,0,0,0,255,0); } image.src= image0.src; function recolorImage(img,oldRed,oldGreen,oldBlue,newRed,newGreen,newBlue){ var c = document.createElement('canvas'); var ctx=c.getContext("2d"); var w = img.width; var h = img.height; c.width = w; c.height = h; // draw the image on the temporary canvas ctx.drawImage(img, 0, 0, w, h); // pull the entire image into an array of pixel data var imageData = ctx.getImageData(0, 0, w, h); // examine every pixel, // change any old rgb to the new-rgb for (var i=0;i<imageData.data.length;i+=4) { // is this pixel the old rgb? if(imageData.data[i]==oldRed && imageData.data[i+1]==oldGreen && imageData.data[i+2]==oldBlue ){ // change to your new rgb imageData.data[i]=newRed; imageData.data[i+1]=newGreen; imageData.data[i+2]=newBlue; } } // put the altered data back on the canvas ctx.putImageData(imageData,0,0); // put the re-colored image back on the image var img1=document.getElementById("image1"); img1.src = c.toDataURL('image/png'); } }); // end $(function(){}); </script> </head> <body> <p>Original Image</p> <img id="image0" width=200 height=200><br/> <p>Red recolored Green Image</p> <img id="image1" width=200 height=200> </body> </html>

Vous pouvez utiliser globalCompositeOperation = "source-in"

Par exemple, ce qui suit crée l'image sur un (nouveau) canevas, et définit la couleur. 

  ctx.save(); // Draw mask to buffer ctx.clearRect(0, 0, this.width, this.height); ctx.drawImage(your_image, 0, 0, this.width, this.height, 0, 0, this.width, this.height); // Draw the color only where the mask exists (using source-in) ctx.fillStyle = [your color]; // ctx.globalCompositeOperation = "source-in"; ctx.fillRect(0, 0, this.width, this.height); ctx.restore();

J'utilise cette technique exacte pour définir la couleur du texte de mes polices bitmap.