commited for dynamic canvas change

app/code/Sm/Shop4u/Controller/Index/Index.php

-<?php
-/*------------------------------------------------------------------------
+<?php 
+
 # SM Shop4u - Version 1.0.0
 # Copyright (c) 2016 YouTech Company. All Rights Reserved.
 # @license - Copyrighted Commercial Software
@@ -28,8 +28,38 @@ class Index extends \Magento\Framework\App\Action\Action {
 	 */
 	public function execute()
 	{
-		$resultPage = $this->resultPageFactory->create();
-		$resultPage->getConfig()->getTitle()->prepend(__('Sm Shop4u'));
-		return $resultPage;
+		try {
+      if (isset($_FILES['file'])) {
+        $directory = 'author';
+        if (isset($_POST['directory'])) {
+          $directory = $_POST['directory'];
+        }
+	$imageId = $_POST['image_identifire'] ?? 0;
+        $response = array('status' => FALSE, 'uri' => '', 'message' => '');
+
+	$target_dir = "/var/www/coconva/pub/media/tmp/";
+	$file_name = "d-" . $imageId . "_w-" . $_POST['image_width'] . "_h-" . $_POST['image_heigth'] . "_" . basename($_FILES["file"]["name"]);
+	$uri = "http://coconva.incaendo.com/pub/media/tmp/" . $file_name;
+$target_file = $target_dir . $file_name;
+
+if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
+
+          $response['uri'] = $uri;
+          $response['status'] = TRUE;
+	}
+       // } else {
+         //   $response['message'] = 'We are sorry, we do not support that file type. Please use either png, gif, jpg, jpeg file.';
+         // }
+      } else {
+        $response['message'] = "We are sorry, there was an error uploading your.";
+      }
+      echo json_encode($response);
+      echo "<script> window.parent.imageHolder". $imageId ."('" . @$response['status'] . "', '" . @$response['message'] . "', '" . @$response['uri'] . "'); </script>";
+	die;
+    } catch (Exception $e) {
+      // LOG
+    }
+	die;
 	}
-}
\ No newline at end of file
+}
+

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

@@ -29,8 +29,82 @@ $thumbs_nav    = $_config->getProductDetail('thumbs_navigation');
 
 $breakpoints = $_config->getProductDetail('breakpoints_width');
 
+?>
+
+
+
+
+
+
+<iframe name="my_iframe" src="" style="display: none"></iframe>
+<?php
+$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
+$registry = $objectManager->get('\Magento\Framework\Registry');
+$currentProduct = $registry->registry('current_product');
+$product = $objectManager->get('Magento\Catalog\Model\Product')->load($currentProduct->getId());
+if (!empty($product->getCustomAttribute('image_canvas_area'))) {
+  $imageOptions = $product->getCustomAttribute('image_canvas_area')->getValue();
+//$imageOptions = "200X300:0X0,100X50:250X0,100X50:250X100";
+  $imageOptions = explode(",", $imageOptions);
+  foreach ($imageOptions as $optionKey => $option) {
+    $dimension = explode(':', $option);
+    $hv = explode('X', $dimension[0]);
+    $xy = explode('X', $dimension[1]);
+    ?>
+    <div style="width: <?php echo $hv[0]; ?>px;height: <?php echo $hv[1]; ?>px;
+         position: absolute;border: 2px solid red;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">
+        <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]; ?>"> 
+        <input type="hidden" name="image_heigth" value="<?php echo $hv[1]; ?>"> 
+        <input type="hidden" name="image_x" value="<?php echo $xy[0]; ?>"> 
+        <input type="hidden" name="image_y" value="<?php echo $xy[1]; ?>"> 
+        <div class='image-upload-custom<?php echo $optionKey; ?>' style="width: <?php echo $hv[0]; ?>px;height: <?php echo $hv[1]; ?>px;border: 3px solid gray;"></div>
+
+      </form>
+      <script>
+        require([
+          'jquery',
+        ], function ($) {
+          'use strict';
+          setTimeout(function () {
+            jQuery('.image-upload-custom<?php echo $optionKey; ?>').click(function () {
+              jQuery('#imgupload<?php echo $optionKey; ?>').trigger('click');
+            });
 
+            jQuery('#imgupload<?php echo $optionKey; ?>').change(function () {
+              if (jQuery(this).val() != '') {
+                jQuery("#image_form_<?php echo $optionKey; ?>").submit();
+              }
+            });
+          }, 1500);
+        });
+
+        function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) {
+          if (status) {
+            require([
+              'jquery'
+            ], function ($) {
+              if (jQuery('#imgupload<?php echo $optionKey; ?>').length) {
+                jQuery('.image-upload-custom<?php echo $optionKey; ?>').html("");
+                jQuery('.image-upload-custom<?php echo $optionKey; ?>').append("<img src='" + imageUrl + "' style='width:1000%; height:100%'>");
+              }
+            });
+          }
+        }
+      </script>
+    </div>
+    <?php
+  }
+}
 ?>
+
+
+
+
+
 <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
     <div data-role="loader" class="loading-mask">
         <div class="loader">