create virtual host in Ubantu

create virtual host

Localhost name will be : api.local.btv
file's path : /var/www/html/projectfolder/api/web

Step 1 :
create conf file with below command
sudo nano /etc/apache2/sites-available/api.local.btv.conf

Step 2 : paste below code and save and exit

<VirtualHost *:80>
	# The ServerName directive sets the request scheme, hostname and port that
	# the server uses to identify itself. This is used when creating
	# redirection URLs. In the context of virtual hosts, the ServerName
	# specifies what hostname must appear in the request's Host: header to
	# match this virtual host. For the default virtual host (this file) this
	# value is not decisive as it is used as a last resort host regardless.
	# However, you must set it for any further virtual host explicitly.
	#ServerName www.example.com

	ServerAdmin webmaster@localhost
	DocumentRoot /var/www/html/projectfolder/api/web 
        ServerAdmin admin@example.com
        ServerName  api.local.btv
        ServerAlias api.local.btv

	# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
	# error, crit, alert, emerg.
	# It is also possible to configure the loglevel for particular
	# modules, e.g.
	

	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined

	# For most configuration files from conf-available/, which are
	# enabled or disabled at a global level, it is possible to
	# include a line for only one particular virtual host. For example the
	# following line enables the CGI configuration for this host only
	# after it has been globally disabled with "a2disconf".
	#Include conf-available/serve-cgi-bin.conf
</VirtualHost>


Step 3 : sudo a2ensite api.local.btv.conf
Step 4 : sudo service apache2 restart.

image resize in JS

<input id="imageFile" type="file"><input type="button" value="Resize Image"  onclick="ResizeImage()"/> 
<img src="" id="output">

function ResizeImage() {
    var filesToUpload = document.getElementById('imageFile').files;
    var file = filesToUpload[0];

    // Create an image
    var img = document.createElement("img");
    // Create a file reader
    var reader = new FileReader();
    // Set the image once loaded into file reader
    reader.onload = function(e) {
            img.src = e.target.result;

            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 100;
            var MAX_HEIGHT = 100;
            var width = img.width;
            var height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            var dataurl = canvas.toDataURL("image/png");
            document.getElementById('output').src = dataurl;
        }
        // Load files into file reader
    reader.readAsDataURL(file);
}

Image Read, upload with JS as Blob in Database and show on page

<?php

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

if(isset($_POST['image']) && $_POST['image']=='upload')
{
    $image = $_POST['string'] ;
    $sql = "INSERT INTO  image (name, image)
    VALUES ('image_name','".$image."')";

    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

}

?>

<HTML>
<HEAD>
<TITLE>Read image in JS</TITLE>
<style>
   #inputTextToSave {
        width:512px; 
        height:256px;
      }

      #holder { 
        border: 10px dashed #ccc; 
        width: 300px; 
        height: 300px; 
      }

      #holder.hover { 
        border: 10px dashed #333; 
      }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</HEAD>
<BODY>
<table>

      <tr>
        <td colspan="3">Binary data:</td>
      </tr>

      <tr>
        <td colspan="3">
          <textarea id="inputTextToSave"></textarea>
        </td>
      </tr>

      <tr>
        <td>Filename to Save As:</td>
        <td><input id="inputFileNameToSaveAs" /></td>
        <td><button onclick="saveImage()">Save file</button></td>
      </tr>

      <tr>
        <td>Select a File to Load:</td>
        <td><input type="file" id="fileToLoad" /></td>
          <td><button onclick="loadImage()">Load file</button></td>
      </tr>

      <tr>
        <td colspan="3" id="imagePreview">
        </td>
      </tr>

    </table>

<script>
var contentType = '';

      function destroyClickedElement(event) {
        document.body.removeChild(event.target);
      }

      window.loadImage = function() {
        var file = document.getElementById("fileToLoad").files[0];

        var reader = new FileReader();
        reader.onload = function(event) {
          var data = event.target.result;
          document.getElementById("inputTextToSave").value = data;

          var imagePreview = document.getElementById("imagePreview");
          imagePreview.innerHTML = '';

          var dataURLReader = new FileReader();
          dataURLReader.onload = function(event) {
            // Parse image properties
            var dataURL = event.target.result;
            $.post( "image_read_in_js.php", 
                { 
                    "image": "upload",
                    "string":dataURL 
                 },
                function( data ) {
              console.log( data);
            }, "json");
            contentType = dataURL.split(",")[0].split(":")[1].split(";")[0];

            var image = new Image();
            image.src = dataURL;
            image.onload = function() {
              console.log("Image type: " + contentType);
              console.log("Image width: " + this.width);
              console.log("Image height: " + this.height);
              imagePreview.appendChild(this);
            };
          };
          dataURLReader.readAsDataURL(file);


        };
        reader.readAsBinaryString(file);
      }
  
</script>

<div style="border: solid 1px;">
<?php
$sql = "SELECT * FROM image";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo '<img src="' .$row['image'] . '" />';
    }
} else {
    echo "0 results";
}

?>
</div>
</BODY>
</HTML>

Cross domain ajax request to a json file using JSONP

jQuery.ajax({
dataType: "jsonp",
url: https://digimantralabs.com/cishopify/shop/getdata?callback=somefunction,
data: {pid: productID},
success: function(data) { console.log(data);
jQuery('#product_review').html(data);
},
onComplete: function(htmldata){
alert();
}
});

 

$callback =  $this->input->get('callback');
$object=array('postalcodes'
=>array(
array(
"adminName2" => "Westchester",
"adminCode2" => "119",
"postalcode" => "10504",
"adminCode1" => "NY",
"countryCode" => "US",
"lng" => -73.700942,
"placeName" => "Armonk",
"lat" => 41.136002,
"adminName1" => "New York"
)));
echo $callback.'('.json_encode($object).')';