• Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
Notretsam

Change Specific Color In A Image

21 posts in this topic

I believe with HTML 5 Canvas and Javascript, you can now detect a specific color on a image and change it.

Am basically looking to build an avatar system for a game, so am thinking before I construct the avatar image (html5 canvas) , I can change the color of the t-shirt image.

I found the below code on the web and can see it at this link:  https://wrestlestarz.c7.ixsecure.com/avatars/test.php

<!DOCTYPE html>
<html>
  
  <head>
    <script type="text/javascript">
    
      //Global variables
      var picWidth = 200; // width of the canvas
      var picHeight = 222; // height of the canvas
      var picLength = picWidth * picHeight; // number of chunks
      var myImage = new Image(); // Create a new blank image.
      
      // Load the image and display it.
      function displayImage() {

        // Get the canvas element.
        canvas = document.getElementById("myCanvas");

        // Make sure you got it.
        if (canvas.getContext) {

          // Specify 2d canvas type.
          ctx = canvas.getContext("2d");

          // When the image is loaded, draw it.
          myImage.onload = function() {
            // Load the image into the context.
            ctx.drawImage(myImage, 0, 0);

            // Get and modify the image data.
            getColorData();

            // Put the modified image back on the canvas.
            putColorData();
          }

          // Define the source of the image.
          // This file must be on your machine in the same folder as this web page.
          myImage.src = "maletshirtred.png";
        }
      }

      function getColorData() {

        myImage = ctx.getImageData(0, 0, 200, 222);

        // Loop through data.
        for (var i = 0; i < picLength * 4; i += 4) {

          // First bytes are red bytes.        
          // Remove all red.
          myImage.data[i] = 2;

          // Second bytes are green bytes.
          // Third bytes are blue bytes.
          // Fourth bytes are alpha bytes
        }
      }

      function putColorData() {

        ctx.putImageData(myImage, 0, 0);
      }
             

    </script>
  </head>
  
  <body onLoad="displayImage()">
    <img id="myPhoto" src="maletshirtred.png"><br>
    <canvas id="myCanvas" width="200" height="222">
    </canvas>

  </body>

</html>
		</body>
		</html>

it seems like that the myImage.data = 2; part is where the color change happens, but sadly, it appears like the #colorcodes don't work 

so can someone fix the above code or point me in right direction on how to do this?

Am basically looking to change one color to any color that a member wants,  not 100% sure its possible to do this. 

Share this post


Link to post
Share on other sites

If you look up getImageData, you'll figure out that it returns an array corresponding to the color values for each pixel.  Each pixel has a red, green, blue, and alpha value.  The comments in that code hint to that point, but you can also just look up the documentation.

https://www.w3schools.com/tags/canvas_getimagedata.asp

https://developer.mozilla.org/en-US/docs/Web/API/ImageData

Note that the MDN documentation says that the data property is read-only, so I don't know if that will work in all browsers.

Share this post


Link to post
Share on other sites

Usually the approach to customizable avatar is to have a grayscale version of the object you want to customize and then give it a tint. Using a multiply blend mode with the color works. I'm not sure what options canvas has for tinting and blending, so I would have to check the reference when I have time. 

In the worst case scenario, create an int array and multiply the color components with the image components, then add it to a canvas using putImageData().

Share this post


Link to post
Share on other sites

 

@justsomeguyyeah I was planning to have a look into getimagedata specific tag today.  would be great if you can use the same #colorcode format as you do in css but sadly as you say, its specific alpha values which I don't know much about. 

@Ingolme   interesting did see a tint question and answer on stackoverflow yesterday 

I figure there got to be a way to detect a specific #colorcode and change to another #colorcode

Some sort of code like   $colorchange =  changecol("#000000");  I think would do the change of color 

Am still trying to work out the coding steps but believe I would need to change the T-Shirt image first, then use Canvas to construct the avatar,  sorta like a jigsaw puzzle.

head + neck,   body + hands,  legs + feet

Its a big project and tricky for me to work out, since am self taught , so any advice I can get will be greatly appreciated. 

Share this post


Link to post
Share on other sites

Posted (edited)

 

OK correct me if am wrong here but I believe the below coding equates to      $rgb(0,0,0,0)  , its basically looping through and changing the number to 0

      function getColorData() {

        myImage = ctx.getImageData(0, 0, 200, 222);

        // Loop through data.
        for (var i = 0; i < picLength * 4; i += 4) {

          // First bytes are red bytes.        
          // Remove all red.
          myImage.data[i] = 0;

          // Second bytes are green bytes.
          // Third bytes are blue bytes.
          // Fourth bytes are alpha bytes
        }
      }

So for me to change  the red, green and blue

I need to detect the first loop to change the red value, then detect the second loop to change the green value and a third loop for changing the blue value? 

ignore the $rgb var, that just me showing its $rgb color code. 

Edited by Notretsam

Share this post


Link to post
Share on other sites

It looks like canvas doesn't support blending or anything similar. You're going to need multiple different canvas which you then composite using drawImage()

First get dats from your source image with getImageData(). Create new image data with createImageData(), then save it onto another canvas using putImageData().

You would pull data from the source image, which should be white with greyscale shading, if it's not white then you can't properly change the color. You would then select a target color. For example, orange (red = 255, green = 120, blue = 0)

For every pixel in the source image data, multiply the red component of the source with your target red, green with your target green and blue with target blue. Store those in the destination image data, use the alpha value from the source image.

Once that's done, you can use drawImage() to draw this canvas onto a final canvas, properly blending the colors with what's behind them.

Share this post


Link to post
Share on other sites

am really sorry Ingolme but that post has completely lost me 

I think maybe you think I coded the code I shown above, its actually code I found online, all I understand is what I shown in my last post. An that is the red value is being changed, but the green and blue isn't , so therefore am not seeing the color am hoping to. 

Am starting to think there isn't a way to do exactly what I want to do and might just have to have different images for each color, but I would like to keep exploring this, an see where it takes me.

 

Share this post


Link to post
Share on other sites

I think it means something like (note really rough example)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />

        <title>Untitled Document</title>
        <script type="text/javascript">

            //Global variables
            var picWidth = 200; // width of the canvas
            var picHeight = 222; // height of the canvas
            var picLength = picWidth * picHeight; // number of chunks
            var myImage = new Image(); // Create a new blank image.
            var myImage2 = new Image(); // Create a new blank image.

            // Load the image and display it.
            function displayImage() {

                // Get the canvas element.
                canvas = document.getElementById("myCanvas");

                // Make sure you got it.
                if (canvas.getContext) {

                    // Specify 2d canvas type.
                    ctx = canvas.getContext("2d");

                    // When the image is loaded, draw it.
                    myImage.onload = function() {
                        // Load the image into the context.
                        ctx.drawImage(myImage, 0, 0);

                        // Get and modify the image data.
                        getColorData();

                        // Put the modified image back on the canvas.
                        putColorData();
                    };

                    // Define the source of the image.
                    // This file must be on your machine in the same folder as this web page.
                    myImage.src = "maletshirtMask.png";
                    myImage2.src = "maletshirtredTrans.png";
                }
            }

            function getColorData() {

                myImage = ctx.getImageData(0, 0, picWidth, picHeight);

                // Loop through data.
                Maskcolor = [255, 255, 255]; //white

                newcolor = [0, 255, 0]; //lime
                //newcolor = [255, 0, 0]; // red
                // newcolor = [0, 0, 255]; // navy
                // newcolor = [255, 255, 255];

                for (var i = 0; i < myImage.data.length; i += 4) {


                    myImage.data[i] = newcolor[0];
                    myImage.data[i + 1] = newcolor[1];
                    myImage.data[i + 2] = newcolor[2];

                }
            }

            function putColorData() {

                ctx.putImageData(myImage, 0, 0);
                myImage2.onload = function() {
                    ctx.drawImage(myImage2, 0, 0);

                };
            }


        </script>
        <style>
            #mask_shadow_wrap {position: relative;}
            #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;}


        </style>
    </head>
    <body onLoad="displayImage()">
        <div id="mask_shadow_wrap">
            <img id="myPhoto" src="maletshirtMask.png" alt="">
            <img src="maletshirtredTrans.png" alt="">
        </div>
        <canvas id="myCanvas" width="200" height="222">
        </canvas>

    </body>

</html>

 

maletshirtMask.png

maletshirtredTrans.png

Share this post


Link to post
Share on other sites

The HTML hex color code is just the RGB values.  The hex code is 3 bytes - one for red, one for green, one for blue, expressed in hex instead of base 10.  So for the color #1c6618, for example, the red is 0x1c, green is 0x66, and blue is 0x18.  You can convert those into base 10 to get the value between 0 and 255 for each color.  HTML hex colors don't have an alpha value, the alpha is always 255, which is 100% opaque / 0% transparent.  You can set the alpha value in the canvas if you want the color overlay to be partially transparent.  It would be pretty trivial to write a function to take a hex color code and return an array with R, G, and B base 10 values if that's what you want to do.

Share this post


Link to post
Share on other sites

That works but only for an image with solid color, it won't get all the shading.

To get the shading you have to multiply the target color with the image's color, but this only works when each color is represented as a value from 0 to 1, so you have to calculate that. This is called a blending algorithm. This one in particular is the multiply algorithm:

// Set this to the color you want
var newcolor = [ 0xFF, 0, 0 ];

// Convert to unitary value for calculations
newcolor[0] = newcolor[0] / 255;
newcolor[1] = newcolor[1] / 255;
newcolor[2] = newcolor[2] / 255;

// For each pixel, multiply the new color with the pixel's existing color
var r, g, b;
for (var i = 0; i < myImage.data.length; i += 4) {
  // Get unitary value of the pixel
  r = myImage.data[i] / 255;
  g = myImage.data[i+1] / 255;
  b = myImage.data[i+2] / 255;

  // Multiply the values and store them
  myImage.data[i] = Math.floor(255 * r * newcolor[0]);
  myImage.data[i+1] = Math.floor(255 * r * newcolor[1]);
  myImage.data[i+2] = Math.floor(255 * r * newcolor[2]);
}

putImageData() has the drawback of overwriting everything in the rectangular region of the image you're putting it onto including alpha values, this is why I recommend putting it onto its own canvas, then using drawImage() to draw that canvas onto the target canvas.

Share this post


Link to post
Share on other sites
1 hour ago, Ingolme said:

That works but only for an image with solid color, it won't get all the shading.

The mask image has the solid colour of inner shape of t-shirt, you can't see it because it is white, the other image is a transparent image just showing shadow and outline.The three values give the rgb color that change masking image, then the transparent shadow/outline image it placed over it.

Share this post


Link to post
Share on other sites

looks like that code pretty much works @dsonesuk  thanks a heap for that

https://wrestlestarz.c7.ixsecure.com/avatars/test4.php

can see the exact code you showed here on webpage with navy.

sadly it applies the mask to the full image, even the collar area of the t-shirt and any shading color used is also replaced, which I think @Ingolme is talking about. 

Share this post


Link to post
Share on other sites

OK so the code I showed in original post, have two tests I did.

First test is here https://wrestlestarz.c7.ixsecure.com/avatars/test.php  

      function getColorData() {

        myImage = ctx.getImageData(0, 0, 200, 222);

        // Loop through data.
        for (var i = 0; i < picLength * 4; i += 4) {

          // First bytes are red bytes.        
          // Remove all red.
          myImage.data[i] = 2;

          // Second bytes are green bytes.
          // Third bytes are blue bytes.
          // Fourth bytes are alpha bytes
        }
      }

Second test is taken a bit of code from dsonesuk code and combining small part off it into code I had. (Thanks justsomeguy for color code information)

This code works but as you can see, it doesn't retain the shirt collar area or any shading.

https://wrestlestarz.c7.ixsecure.com/avatars/test2.php

      function getColorData() {

        myImage = ctx.getImageData(0, 0, 200, 222);

        // Loop through data.
        for (var i = 0; i < picLength * 4; i += 4) {

          // First bytes are red bytes.        
          // Remove all red.
          myImage.data[i] = 0x00;
		  myImage.data[i + 1] = 0x00;
          myImage.data[i + 2] = 0xFF;

          // Second bytes are green bytes.
          // Third bytes are blue bytes.
          // Fourth bytes are alpha bytes
        }
      }

starting to think there is no way to change just one color in a image while retaining all other original colors.  So say Blue/Red , change blue to green but keep the red.

yet again, replies are much appreciated.  

Share this post


Link to post
Share on other sites
2 hours ago, Notretsam said:

sadly it applies the mask to the full image, even the collar area of the t-shirt and any shading color used is also replaced, which I think @Ingolme is talking about. 

That is why you use the *trans.png image with collar, shading, stitching to place over top of the changed colour t-shirt, you can  also use

13 hours ago, dsonesuk said:

Maskcolor = [255, 255, 255]; //white

The default color/s to target specific colors with if condition and replace to your needs.

Share this post


Link to post
Share on other sites

yeah I was wondering about a saved layer image with the shading , collar and stitching.  Need to speak to my business partner, its his friends daughter that drawing the images for us.

It just clicked with me that myimage2src is most likely the trans.png image you talking about?  

 

Share this post


Link to post
Share on other sites

As I said it is rough and seems to go lighter on dark colours, but you could in theory depending on how lighter or darker the colour, adjust darkness of shadows etc.

Share this post


Link to post
Share on other sites

Posted (edited)

yup starting to see how to do this , its pretty much "layers"  , like you would use in image making program (photoshop etc)

You apply the color selection on the main layer , then apply layer effects images on top. 

Been playing around with the code today and now got PHP added into the code you did, which now means I can get the color values from a mysql database now.  

Its not finished and still to tidy up the code I think, change how the displayImage(); function is called as well. 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<?php
$image1 = "maletshirtred.png";
$image2 = "maletshirtredTrans.png";

$tshirtcolred = "0";
$tshirtcolgreen = "0";
$tshirtcolblue = "255";
?>
    <form>
	<input type="hidden" id="mainimage" name="mainimage" value="<?php echo "$image1"; ?>">
	<input type="hidden" id="maskimage" name="maskimage" value="<?php echo "$image2"; ?>">
	<input type="hidden" id="tshirtcolred" name="tshirtcolred" value="<?php echo "$tshirtcolred"; ?>">
	<input type="hidden" id="tshirtcolblue" name="tshirtcolblue" value="<?php echo "$tshirtcolblue"; ?>">
	<input type="hidden" id="tshirtcolgreen" name="tshirtcolgreen" value="<?php echo "$tshirtcolgreen"; ?>">
	</form>
<script type="text/javascript">

            //Global variables
            var picWidth = 200; // width of the canvas
            var picHeight = 222; // height of the canvas
            var picLength = picWidth * picHeight; // number of chunks
            var myImage = new Image(); // Create a new blank image.
            var myImage2 = new Image(); // Create a new blank image.

            // Load the image and display it.
            function displayImage() {

                // Get the canvas element.
                canvas = document.getElementById("myCanvas");

                // Make sure you got it.
                if (canvas.getContext) {

                    // Specify 2d canvas type.
                    ctx = canvas.getContext("2d");

                    // When the image is loaded, draw it.
                    myImage.onload = function() {
                        // Load the image into the context.
                        ctx.drawImage(myImage, 0, 0);

                        // Get and modify the image data.
                        getColorData();

                        // Put the modified image back on the canvas.
                        putColorData();
                    };

                    // Define the source of the image.
                    // This file must be on your machine in the same folder as this web page.
					var mainimage = document.getElementById('mainimage').value;
					var maskimage = document.getElementById('maskimage').value;
                    myImage.src = mainimage;
                    myImage2.src = maskimage;
                }
            }

            function getColorData() {

                myImage = ctx.getImageData(0, 0, picWidth, picHeight);

                // Loop through data.
                Maskcolor = [255, 255, 255]; //white


				var tshirtcolred = document.getElementById('tshirtcolred').value;
				var tshirtcolgreen = document.getElementById('tshirtcolgreen').value;
				var tshirtcolblue = document.getElementById('tshirtcolblue').value;
				newcolor = [tshirtcolred , tshirtcolgreen, tshirtcolblue];

                for (var i = 0; i < myImage.data.length; i += 4) {
                    myImage.data[i] = newcolor[0];
                    myImage.data[i + 1] = newcolor[1];
                    myImage.data[i + 2] = newcolor[2];
                }
            }

            function putColorData() {
                ctx.putImageData(myImage, 0, 0);
                myImage2.onload = function() {
                    ctx.drawImage(myImage2, 0, 0);
                };
            }


        </script>
        <style>
            #mask_shadow_wrap {position: relative;}
            #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;}
			.mphotozz img { display:none; }


        </style>
		</head>
		<body onLoad="displayImage()">
        <div id="mask_shadow_wrap">
            <img src="<?php echo "$image2"; ?>" alt="">
        </div>
        <canvas id="myCanvas" width="200" height="222">
        </canvas>

</body>

 

 

Edited by Notretsam

Share this post


Link to post
Share on other sites

Posted (edited)

Two tone example, the onload within function images/s causes problems of changing as its already passed that to trigger for changes, so to get over that as a hack I forced a reload.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />

        <title>Untitled Document</title>
        <script type="text/javascript">

            //Global variables
            var picWidth = 200; // width of the canvas
            var picHeight = 222; // height of the canvas
            var picLength = picWidth * picHeight; // number of chunks
            var myImage;
            var myImage2; // Create a new blank image.
            var newcolor = [];
            var newcolor2 = [];
            var r, g, b, rtone, gtone, btone;
            // Load the image and display it.

            function dothis() {
                location.reload();
            }


            function displayImage() {
                // Create a new blank image.

                // Get the canvas element.
                canvas = document.getElementById("myCanvas");

                // Make sure you got it.
                if (canvas.getContext) {
                    myImage = new Image();
                    myImage.src = "ColourApplTShirt2.png";
                    // Specify 2d canvas type.
                    ctx = canvas.getContext("2d");

                    // When the image is loaded, draw it.
                    myImage.onload = function() {
                        // Load the image into the context.
                        ctx.drawImage(myImage, 0, 0);

                        // Get and modify the image data.
                        getColorData();

                        // Put the modified image back on the canvas.
                        putColorData();
                    };

                }
            }

            function getColorData() {

                myImage = ctx.getImageData(0, 0, picWidth, picHeight);

                r = document.getElementById("red");

                g = document.getElementById("green");

                b = document.getElementById("blue");

                rtone = document.getElementById("red2");

                gtone = document.getElementById("green2");

                btone = document.getElementById("blue2");


                Maskcolor = [255, 255, 255]; //white
                if (parseInt(r.value) === 255 && parseInt(g.value) === 255 && parseInt(b.value) === 255 && parseInt(rtone.value) === 255 && parseInt(gtone.value) === 255 && parseInt(btone.value) === 255)
                {
                    newcolor = Maskcolor;
                    newcolor2 = Maskcolor;
                }
                else
                {
                    newcolor[0] = parseInt(r.value);

                    newcolor[1] = parseInt(g.value);

                    newcolor[2] = parseInt(b.value);

                    newcolor2[0] = parseInt(rtone.value);

                    newcolor2[1] = parseInt(gtone.value);

                    newcolor2[2] = parseInt(btone.value);

                }

                for (var i = 0; i < myImage.data.length; i += 4) {

                    if (myImage.data[i] == 255 && myImage.data[i + 1] == 255 && myImage.data[i + 2] == 255) {
                        myImage.data[i] = newcolor[0];
                        myImage.data[i + 1] = newcolor[1];
                        myImage.data[i + 2] = newcolor[2];
                    }
                    if (myImage.data[i] == 0 && myImage.data[i + 1] == 255 && myImage.data[i + 2] == 255)
                    {
                        myImage.data[i] = newcolor2[0];
                        myImage.data[i + 1] = newcolor2[1];
                        myImage.data[i + 2] = newcolor2[2];
                    }

                }
            }

            function putColorData() {
                ctx.putImageData(myImage, 0, 0);
                myImage2 = new Image();
                myImage2.src = "trans3.png";

                myImage2.onload = function() {
                    ctx.drawImage(myImage2, 0, 0);
                    myImage2 = ctx.getImageData(0, 0, picWidth, picHeight);




                };
            }


        </script>
        <style>
            #mask_shadow_wrap {position: relative; display: none;}
            #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;}


        </style>
    </head>
    <body onLoad="displayImage()">
        <div id="mask_shadow_wrap">
            <img id="myPhoto" src="ColourApplTShirt2.png" alt="">
            <img src="trans3.png" alt="">
        </div>
        <canvas id="myCanvas" width="200" height="222">
        </canvas>
        <p>Main colour</p>
        <input id="red" type="number" name="r" min="0" max="255" value="255">
        <input id="green" type="number" name="g" min="0" max="255" value="255">
        <input id="blue" type="number" name="b" min="0" max="255" value="255">


        <p>Chest stripe colour</p>

        <input id="red2" type="number" name="r2" min="0" max="255" value="255">
        <input id="green2" type="number" name="g2" min="0" max="255" value="255">
        <input id="blue2" type="number" name="b2" min="0" max="255" value="255">
        <p></p>
        <button onclick="dothis()">Change t-shirt chest stripe</button>

    </body>

</html>

 

ColourApplTShirt2.png

trans3.png

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Got a completely working selecting color solution done on this test page https://wrestlestarz.c7.ixsecure.com/avatars/test5.php

Am very happy with this, still a tonne of work to do on a avatar system, but this is a very nice start.  thank you very much @dsonesuk  , also appreciate your time @justsomeguy and @Ingolme

here is full coding that I have for anyone who is curious, which works from a mysql database.  

<?php
$image1 = "maletshirtred.png";
$image2 = "maletshirtredTrans.png";


    $membid = "betatesting";
    $conn = new mysqli($host, $user, $password, $database);
	/* create a prepared statement */
	$stmtgetwrest = $conn->prepare("SELECT tshirtcolor FROM avatarColors WHERE membid=?");
    /* bind parameters for markers */
    $stmtgetwrest->bind_param("s", $membid);
    /* execute query */
    $stmtgetwrest->execute();
	$stmtgetwrest->bind_result($tshirtcolor);
	    /* fetch value */
    $stmtgetwrest->fetch();
	    /* close statement */
    $stmtgetwrest->close();
	
	
$hex= "$tshirtcolor";
    list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x");
    echo "$hex -> $r $g $b";

$tshirtcolred = "$r";
$tshirtcolgreen = "$g";
$tshirtcolblue = "$b";
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WrestleStarz - Account Panel for Member</title>
<meta name="description" content="Members account panel that offers a variety of features for there account.">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script type="text/javascript">

            //Global variables
            var picWidth = 200; // width of the canvas
            var picHeight = 222; // height of the canvas
            var picLength = picWidth * picHeight; // number of chunks
            var myImage = new Image(); // Create a new blank image.
            var myImage2 = new Image(); // Create a new blank image.

            // Load the image and display it.
            function displayImage() {

                // Get the canvas element.
                canvas = document.getElementById("myCanvas");

                // Make sure you got it.
                if (canvas.getContext) {

                    // Specify 2d canvas type.
                    ctx = canvas.getContext("2d");

                    // When the image is loaded, draw it.
                    myImage.onload = function() {
                        // Load the image into the context.
                        ctx.drawImage(myImage, 0, 0);

                        // Get and modify the image data.
                        getColorData();

                        // Put the modified image back on the canvas.
                        putColorData();
                    };

                    // Define the source of the image.
                    // This file must be on your machine in the same folder as this web page.
					var mainimage = document.getElementById('mainimage').value;
					var maskimage = document.getElementById('maskimage').value;
                    myImage.src = mainimage;
                    myImage2.src = maskimage;
                }
            }

            function getColorData() {

                myImage = ctx.getImageData(0, 0, picWidth, picHeight);

                // Loop through data.
                Maskcolor = [255, 255, 255]; //white


				var tshirtcolred = document.getElementById('tshirtcolred').value;
				var tshirtcolgreen = document.getElementById('tshirtcolgreen').value;
				var tshirtcolblue = document.getElementById('tshirtcolblue').value;
				// newcolor = [0, 255, 0]; //lime
                // newcolor = [255, 0, 0]; // red
				newcolor = [tshirtcolred , tshirtcolgreen, tshirtcolblue];
               // newcolor = [0, 0, 255];// navy
                // newcolor = [255, 255, 255];

                for (var i = 0; i < myImage.data.length; i += 4) {


                    myImage.data[i] = newcolor[0];
                    myImage.data[i + 1] = newcolor[1];
                    myImage.data[i + 2] = newcolor[2];

                }
            }

            function putColorData() {

                ctx.putImageData(myImage, 0, 0);
                myImage2.onload = function() {
                    ctx.drawImage(myImage2, 0, 0);

                };
            }


        </script>
		</head>
        <style>
            #mask_shadow_wrap {position: relative;}
            #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;}
        </style>
		
		<body onLoad="displayImage()">
		    <form id="myformlarge" action="yourpathhere" enctype="multipart/form-data" method="post">
	<input type="hidden" id="mainimage" name="mainimage" value="<?php echo "$image1"; ?>">
	<input type="hidden" id="maskimage" name="maskimage" value="<?php echo "$image2"; ?>">
	<input type="hidden" id="tshirtcolred" name="tshirtcolred" value="<?php echo "$tshirtcolred"; ?>">
	<input type="hidden" id="tshirtcolblue" name="tshirtcolblue" value="<?php echo "$tshirtcolblue"; ?>">
	<input type="hidden" id="tshirtcolgreen" name="tshirtcolgreen" value="<?php echo "$tshirtcolgreen"; ?>">
		<input id="background-color" type="color" value="<?php echo "$hex"; ?>" onChange="javascript:document.getElementById('chosen-bgcolor').value = document.getElementById('background-color').value;"/>
	<input id="chosen-bgcolor" name="bodycolor" type="text" size="5" value="<?php echo "$hex"; ?>"/>
	<input type="Submit" class="button" value="Select Color">
	<hr>
	</form>
        <div id="mask_shadow_wrap">
            <img src="<?php echo "$image2"; ?>" alt="">
        </div>
        <canvas id="myCanvas" width="200" height="222">
        </canvas>

</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now