Jump to content
Notretsam

Change Specific Color In A Image

Recommended Posts

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

 

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

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

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

This is testing page am working on, just need to figure out how to get the rgb value of the selected color now. 

Like this does but sadly couldn't get working today https://www.w3schools.com/colors/colors_converter.asp

Share this post


Link to post
Share on other sites

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

×