added more features in canvas desging.

app/design/frontend/Sm/shop4u/Magento_Catalog/templates/product/view/gallery.phtml

@@ -32,8 +32,43 @@ $breakpoints = $_config->getProductDetail('breakpoints_width');
 ?>
 
 
+<style type="text/css">
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+ 
+  border-top: 16px solid #eeeeee;
+  border-bottom: 16px solid #eeeeee;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  position: absolute;
+  z-index: 99999;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  top: 50%;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loader-wrapper{
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    background: rgba(0,0,0,0.4);
+    z-index: 999;
+    top: 0;
+    left: 0;
+}
+
+</style>
 
 
+
+<link rel="Stylesheet" type="text/css" href="https://foliotek.github.io/Croppie/croppie.css" />
 <iframe name="my_iframe" src="" style="display: none"></iframe>
 <?php
 $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
@@ -48,11 +83,20 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
     $dimension = explode(':', $option);
     $hv = explode('X', $dimension[0]);
     $xy = explode('X', $dimension[1]);
+    $path = str_ireplace('/index.php', '/', $_SERVER['SCRIPT_NAME']);
     ?>
     <div style="width: <?php echo $hv[0]; ?>px;height: <?php echo $hv[1]; ?>px;
-         position: absolute;border: 2px solid red;z-index: 9999;
+         position: absolute;z-index: 9999;
          margin-left: <?php echo $xy[0]; ?>px; margin-top: <?php echo $xy[1]; ?>px;">
-      <form name="image_form_<?php echo $optionKey; ?>" id="image_form_<?php echo $optionKey; ?>" action="/shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data">
+      <button class="removeBut" id="image_remove_<?php echo $optionKey; ?>" style="
+    float: right;
+    position: absolute;
+    z-index: 99;
+    display:none;
+    opacity:0.5;  
+    /* width: 4%; */
+">X</button>
+      <form name="image_form_<?php echo $optionKey; ?>" id="image_form_<?php echo $optionKey; ?>" action="<?php echo $path; ?>shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data">
         <input type="file" name="file" id="imgupload<?php echo $optionKey; ?>" style="display:none"/>
         <input type="hidden" name="image_identifire" value="<?php echo $optionKey; ?>"> 
         <input type="hidden" name="image_width" value="<?php echo $hv[0]; ?>"> 
@@ -63,40 +107,136 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
 
       </form>
       <script>
+ var valJson = {};
         require([
           'jquery',
         ], function ($) {
           'use strict';
+          
           setTimeout(function () {
+              var IT = setInterval(function(){
+          var src3 = jQuery('img.fotorama__img').attr('src');
+          var tmpImg3 = new Image();
+              tmpImg3.src=src3;    
+          jQuery(tmpImg3).one('load',function(){
+            jQuery('.fotorama-item').remove();
+            jQuery('.magnifier-preview').remove();
+            clearInterval(IT);
+          });
+         },1000);
             jQuery('span:contains("Canvas Images")').parent().next().children().attr('readonly','readonly');
 
             jQuery('.image-upload-custom<?php echo $optionKey; ?>').click(function () {
+              if(typeof vanilla !=='undefined'){jQuery(vanilla).remove();}
+              if (jQuery('.image-upload-custom<?php echo $optionKey; ?>').find('.cr-image').length) {
+                return;
+              }
               jQuery('#imgupload<?php echo $optionKey; ?>').trigger('click');
             });
 
+            jQuery('#image_remove_<?php echo $optionKey; ?>').click(function () {
+              jQuery('.image-upload-custom<?php echo $optionKey; ?>').removeClass('croppie-container').html("");
+              jQuery('#imgupload<?php echo $optionKey; ?>').val('');
+              jQuery(this).hide();
+            });
+
             jQuery('#imgupload<?php echo $optionKey; ?>').change(function () {
               if (jQuery(this).val() != '') {
                 jQuery("#image_form_<?php echo $optionKey; ?>").submit();
+
+                jQuery(".col2-layout .container .row ").append('<div id="preloader" class="loader-wrapper"><div  class="loader"></div></div>');
               }
             });
-          }, 1500);
+          }, 2000);
         });
 
 
         function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) {
           if (status) {
             require([
-              'jquery'
-            ], function ($) {
+              'jquery',
+              'Croppie'
+            ], function ($, Croppie) {
               if (jQuery('#imgupload<?php echo $optionKey; ?>').length) {
+                jQuery('#image_remove_<?php echo $optionKey; ?>').show();
                 jQuery('.image-upload-custom<?php echo $optionKey; ?>').html("");
-                jQuery('.image-upload-custom<?php echo $optionKey; ?>').append("<img src='" + imageUrl + "' style='width:1000%; height:100%'>");
-var imgSpl = imageUrl.split('/');
-jQuery('span:contains("Canvas Images")').parent().next().children().val((jQuery('span:contains("Canvas Images")').parent().next().children().val()+','+imgSpl[imgSpl.length - 1]).replace(/^,|,$/g,''));
+                //jQuery('.image-upload-custom<?php echo $optionKey; ?>').append("<img src='" + imageUrl + "' style='width:100%; height:100%'>");
+                var imgSpl = imageUrl.split('/');
+
+                var tmpImg = new Image();
+                tmpImg.src=imageUrl; //or  document.images[i].src;
+                var orgWidth,orgHeight;
+                $(tmpImg).one('load',function(){
+                  orgWidth = parseInt(tmpImg.width);
+                  orgHeight = parseInt(tmpImg.height);
+
+                   var putdragWidth = parseInt(<?php echo $hv[0]; ?>);
+                   var putdragHeight = parseInt(<?php echo $hv[1]; ?>);
+                   if(orgWidth > orgHeight){
+                     var percent = (putdragHeight/orgHeight)*100;
+                     orgHeight = putdragHeight;
+                     orgWidth = orgWidth*(percent/100);
+                   }else{
+                      var percent = (putdragWidth/orgWidth)*100;
+                      orgWidth = putdragWidth;
+                      orgHeight = orgHeight*(percent/100);
+                   }
+                 
+                });
+
+                //----------------calculation---------------//
+               
 
-jQuery('span:contains("Canvas Images")').parent().next().children().attr('readonly','readonly');
 
 
+
+
+
+                jQuery('span:contains("Canvas Images")').parent().next().children().val((jQuery('span:contains("Canvas Images")').parent().next().children().val()+','+imgSpl[imgSpl.length - 1]).replace(/^,|,$/g,''));
+
+                jQuery('span:contains("Canvas Images")').parent().next().children().attr('readonly','readonly');
+
+
+                $('.image-upload-custom<?php echo $optionKey; ?>').removeClass('croppie-container').html("");
+                var el = document.getElementsByClassName('image-upload-custom<?php echo $optionKey; ?>');
+                $('.image-upload-custom<?php echo $optionKey; ?>').attr('rel',<?php echo $optionKey; ?>);
+                console.log("-----------------------ELEMENT------------------", el[0]);
+                var vanilla = new Croppie(el[0], {
+                    viewport: { width: <?php echo $hv[0]; ?>, height: <?php echo $hv[1]; ?> },
+                    boundary: { width: orgWidth, height: orgHeight },
+                    showZoomer: false,
+                    enableOrientation: true
+                });
+                console.log("vanilla", vanilla);
+                vanilla.bind({
+                    url: imageUrl,
+                    orientation: 1
+                });
+
+                //on button click
+                vanilla.result('blob').then(function(blob) {
+                    console.log("vanilla", vanilla);
+                    // do something with cropped blob
+                    
+                    var getVal = jQuery('span:contains("Custom Image Canvas")').parent().next('div').children('input').val();
+
+                      // var info = $('.croppie-image').croppie('get');
+                      // consoel.log("------------------------", info);
+                    // console.log('image size==',size);
+valJson={<?php echo $optionKey; ?>:{'image':imageUrl,'width':<?php echo $hv[0]; ?>,'height':<?php echo $hv[1]; ?>,'left':vanilla.element.clientLeft,'top':vanilla.element.clientTop}};
+
+jQuery('span:contains("Custom Image Canvas")').parent().next('div').children('input').val(Object.assign(getVal,valJson));
+
+//Above code to be continued by Ramesh
+
+console.log('valJson=========',valJson,"===clientLeft=",vanilla.element.clientLeft,'=======clientTop==',vanilla.element.clientTop);
+// set value in input from here for all images
+                });
+
+                $('#preloader').remove();
+jQuery('.fotorama-item').remove();
+            jQuery('.magnifier-preview').remove();
+
               }
             });
           }
@@ -114,7 +254,7 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
 
 
 
-<?php /*
+<?php /* ?>
 <div style="width: 120px;height: 300px;position: absolute;border: 2px solid red;z-index: 99999;margin: auto;margin-left: 106px;">
   <form action="/shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data">
     <input type="file" name="file" id="imgupload" style="display:none"/>
@@ -157,7 +297,7 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
       }
   </script>
 </div>
-*/ ?>
+<?php */ ?>
 
 
 
@@ -344,4 +484,3 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
     }
 
 </script>
-