Q: Preview the image of edited image (on the fly ) on choosing the image I chose the image and preview it before submitting the form. But I wanted to edit the file on the fly after choosing the image and preview it and submit the file.
<input type ="file" accept="image/*" id="image"  name="image"  onchange="preview();">
<p>
   <canvas id ="can1" height="0px";></canvas>
</p> 

js code:
<script type="text/javascript">
var img = null;
var canvas1 = document.getElementById("can1");

function preview() {
  var inputfile = document.getElementById("image");
  img = new SimpleImage(inputfile);
  img.drawTo(canvas1);
}
</script>

Actually after submitting form, image process likes this in controller:
if ($request->hasFile('image')) {
        $filename = time().'-'.$request->image->getClientOriginalName();

        $image = Image::make($request->file('image')->getRealPath());
        $footer = Image::make(public_path('footer.png'));
        $path="photos/shares/uploads/{$filename}";


 // Get dimensions for specified images
        $width_x=$image->width();
        $height_x=$image->height();

        $width_y=$footer->width();

// resize the image to a width of $width_x and constrain aspect ratio (auto height)

        $footer->resize($width_x,null, function ($constraint) {
            $constraint->aspectRatio();
        });

        $height_y=$footer->height();

        $img_canvas = Image::canvas($width_x, $height_x+$height_y);
        $img_canvas->insert(Image::make($request->file('image')->getRealPath()));
        $img_canvas->insert($footer, 'bottom'); // add offset
        $img_canvas->save(public_path($path));

But I want it to happen on the fly as soon as the image is chosen and show the preview and submit form.

A: use this code in your javascript
$("#image").change(function(e) {
var data = new FormData();
data.append('image', $('input[type=file]')[0].files[0]);
data.append('_token', "{{ csrf_token() }}");
$.ajax({
        url:'{{url('/my-admin/imageupload')}}',
        type: 'POST',
        data : data,
        enctype : 'multipart/form-data',
        contentType: false,
        processData: false,
        success: function( data ) {
            var baseUrl = "{{asset('')}}";
            var imageUrl = baseUrl + data.msg;
            $('#changeimage').html('<img src="'+ imageUrl +'" height="100px" width="100px">');
        },
        error: function() {
            alert('error');
        }
   });      
 });


A: It's already answer in the following link:
How to enlarge an image on hover or click?
Hope this will be helpful.
The best answer in the link is:
Add all the images to a container, for example:
<div class="imageContainer">
  <img src ="lion1.jpg" height="150" width="300" />
</div>

Then set some CSS that does something to all <img> tags in that container when hovered:
.imageContainer > img:hover {
  width: 500px;
  height: 200px;
}

I have not tried this but I think it might get you on the right track to experiment yourself. 

A: Here i have posted the answer with running Output. Please check it!


jQuery(function($){
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files)
},false)

fileDiv.addEventListener("click",function(e){
  $(fileInput).show().focus().click().hide();
  e.preventDefault();
},false)

fileDiv.addEventListener("dragenter",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);

fileDiv.addEventListener("dragover",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);

fileDiv.addEventListener("drop",function(e){
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  showThumbnail(files)
},false);

function showThumbnail(files){
  for(var i=0;i<files.length;i++){
    var file = files[i]
    var imageType = /image.*/
    if(!file.type.match(imageType)){
      console.log("Not an Image");
      continue;
    }

    var image = document.createElement("img");
    // image.classList.add("")
    var thumbnail = document.getElementById("thumbnail");
    image.file = file;
    thumbnail.appendChild(image)

    var reader = new FileReader()
    reader.onload = (function(aImg){
      return function(e){
        aImg.src = e.target.result;
      };
    }(image))
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    image.onload= function(){
      ctx.drawImage(image,100,100)
    }
  }
}
          });
.drop-area{
  width:100px;
  height:25px;
  border: 1px solid #999;
  text-align: center;
  padding:10px;
  cursor:pointer;
}
#thumbnail img{
  width:100px;
  height:100px;
  margin:5px;
}
canvas{
  border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" style="display:none" id="upload-image" multiple="multiple"></input>
<div id="upload" class="drop-area">
   Upload File
</div>
<div id="thumbnail"></div>


