Notretsam

Members
  • Content count

    134
  • 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. well after some thinking decided to remove the following lines and see how that goes ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" was hoping people on here would tell me what they would do.
  2. I presume the cache items related to specific type, image/jpg would cache jpg images and so on with the others. Since I only wanted to cache image files, presume the non image file extensions can be removed. ok so it resizes content and makes it smaller, handy to have. don't have answer to these questions , which is why am on this forum asking. just seems like a big jump in my chrome cache since i added this to my htaccess fille.
  3. I know I do the cache via my .htaccess file but it seems like from my browser, that am caching to much. always have about 500MB+ , which seems a lot , only started to happen after I set cache for my website. I only want the images cached and below is what I have. ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 week" ExpiresByType image/jpeg "access plus 1 week" ExpiresByType image/gif "access plus 1 week" ExpiresByType image/png "access plus 1 week" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> ## EXPIRES CACHING ## I presume the type lines for css, pdf, javascript , shockwave-flash and x-icon can be deleted? am wondering about the ExpiresDefault line is needed? I also have the below coding, which I can't remember what it is for lol I found it on the web, sure it was related to the internet cache. <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary: Accept-Encoding </FilesMatch> </IfModule>
  4. 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>
  5. 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
  6. 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>
  7. OK here is your code and got the trans image from your previous post dsonesuk https://wrestlestarz.c7.ixsecure.com/avatars/test4.php
  8. 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?
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. @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.
  15. 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.