Notretsam

Members
  • Content count

    131
  • Joined

  • Last visited

Community Reputation

1 Neutral

About Notretsam

  • Rank
    Member
  • Birthday 01/08/1978

Previous Fields

  • Languages
    PHP, HTML, MySql

Contact Methods

  • Website URL
    http://www.shaunmasterton.co.uk

Profile Information

  • Gender
  • Location
    Scotland
  • Interests
    creating, supernatural type TV shows, poker
  1. 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>
  2. 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
  3. 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>
  4. OK here is your code and got the trans image from your previous post dsonesuk https://wrestlestarz.c7.ixsecure.com/avatars/test4.php
  5. 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?
  6. 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.
  7. 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.
  8. 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.
  9. personally prefer the old design myself but I wouldn't say the new design is untidy. its clean and easy enough to use, I might just be used to the old design and why I prefer it.
  10. 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.
  11. @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.
  12. 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.
  13. After thinking about it more there, am now thinking its what justanotherguy said (an Ingolme eluded to), the parse error isn't triggering any code, so the date error is a result off the second error. If there was an actual error with the date timezone, then it would always show up as a single error I would think. You's know how to wrap paragraph tags around each error reported on a page? below code is what I use but bit of a pain with the date error showing up. ini_set('display_errors', 1); error_reporting(E_ALL);
  14. I deliberately did the error, so I can see the date error , I put plain text instead of a variable in sql query , so "Var" instead of "$Var" The error is only out putted by PHP when there a 2nd error, you would think it always show up if it was an actual error, if that makes sense. Maybe it is something in php.ini but I don't touch that file. so if it is misspelled, then that be hosting company then. Maybe I need to contact them.
  15. That code doesn't show anything dsoneuk All I see is below, line 116 is the sql bind line in code. Warning: Unknown: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in admengine.php on line 116 /* this second error ignore, above only shows up when there's a 2nd error on page */ Parse error: syntax error, unexpected '$matchIDpone' (T_VARIABLE) in admengine.php on line 116