PHP Extract Color From Website URL using ajax

By | June 10, 2018
PHP Extract Color From Website URL

Hi guys, In this article i will let you know about PHP extract color from website url using ajax. Sometime we need in a application to implement color palette and colors in the palette should be from other website which we want.

In that case i am going to write a script to fetch color data from website url into json format. So create a file named as extract_color_from_url.php. And copy below code that file.

extract_color_from_url.php

<!DOCTYPE html>
<html>
  <head>
    <title>Extract color from url </title>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      
      <h2>PHP Extract Color From Website URL</h2>
      <hr>
      <div class="row">
        <div class="col-md-8">
          <form method="post" action="" name="extract_form">
            <div class="form-group">
              <label>Website Url</label>
              <input type="text" name="website_url" id="website_url" class="form-control">
            </div>
            <div class="form-group">
              <label>Extract from css files also</label>
              <input type="checkbox" name="include_css" id="include_css" value="1">
            </div>
            <div class="form-group">
              <input type="button" id="extract_button" name="submit_button" class="btn btn-primary" value="Extract Color">
            </div>
          </form>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="border:solid 1px #fefefe;">
          <h3>Response</h3>
          <div id="loader" style="display: none;">
            <img src="https://cdn-images-1.medium.com/max/1600/1*9EBHIOzhE1XfMYoKz1JcsQ.gif">
          </div>
          <div id="response_body">
            
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      
      $(document).ready(function(){

        $('#extract_button').on('click',function(){
          var website_url = $('#website_url').val();
          var include_css = 'false';
          if ($('#include_css').is(':checked')) {
            var include_css = 'true';
          }
          console.log(include_css);
          $('#response_body').html('');
          $('#loader').show();
          $.ajax({
            'url' : 'extract_action.php',
            'type' : 'post',
            'data' : 'website_url='+website_url+'&include_css='+include_css,
            'success' : function(res){
              $('#loader').hide();
              $('#response_body').html(res);
            }
          });
        });
      });
      
    </script>
  </body>
</html>
 After the first file done. You will have been noticed that we implement ajax request to fetch website data. And we wrote script on another page named as extract_action.php. So let’s create that file and put the following code inside that file

extract_action.php

<?php

function extractColor($site_name,$discover=null){
  if(isset($discover) && $discover=='true'){
    $is_discover = 'true';
  }else{
    $is_discover = 'false';
  }
  $url = "https://www.colorfyit.com/api/swatches/list.json?url=".$site_name."&discover=".$is_discover;
  $ch = curl_init();  
  curl_setopt($ch,CURLOPT_URL,$url);
  curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
  curl_setopt($ch,CURLOPT_HEADER, false); 
  $response=curl_exec($ch);
  curl_close($ch);
  return $response;
}

if(isset($_POST['website_url']) && !empty($_POST['website_url'])){
  echo extractColor($_POST['website_url'],$_POST['include_css']);
}else{
  echo 'Oops! Something went wrong';
}
exit;


?>

In the above file we have create a curl request to extract the color from a web url. In this article we have used colorfyit api. So it is very simple to implement. You can see the preview in above featured image.

You can get more information about colorfyit api form here – Colorfyit