Updating chnages of image canvas details.

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

@@ -33,6 +33,9 @@ $breakpoints = $_config->getProductDetail('breakpoints_width');
 
 
 <style type="text/css">
+  .image_error {
+    border: 3px solid red !important;
+  }
 .loader {
   border: 16px solid #f3f3f3; /* Light grey */
  
@@ -78,6 +81,60 @@ $product = $objectManager->get('Magento\Catalog\Model\Product')->load($currentPr
 if (!empty($product->getCustomAttribute('image_canvas_area'))) {
   $imageOptions = $product->getCustomAttribute('image_canvas_area')->getValue();
 //$imageOptions = "200X300:0X0,100X50:250X0,100X50:250X100";
+  ?>
+    <script type="text/javascript">
+  var userImages = {};
+  var userImageList = {};
+  require([
+          'jquery',
+        ], function ($) {
+          'use strict';
+          jQuery('#product-addtocart-button').on('click', function() {
+            var error = false;
+            jQuery('.user_image_canvas').each(function() {
+              var imageId = jQuery(this).find('.image_identifire').val();
+              console.log("this", this, jQuery(this).find('.cr-overlay').length, imageId);
+              if (jQuery(this).find('.cr-overlay').length <= 0) {
+                  jQuery('.image-upload-custom' + imageId).addClass('image_error');
+                  error = true;
+              } else {
+                var imageCancas = jQuery(this).find('.cr-overlay');
+                userImages[imageId] = {
+                  image: null,
+                  imageHeight: null,
+                  imageWidth: null,
+                  canvasHeight: null,
+                  canvasWidth: null,
+                  left:0,
+                  top: 0
+                };
+                userImages[imageId].imageHeight = imageCancas.css('height');
+                userImages[imageId].imageWidth = imageCancas.css('width');
+                userImages[imageId].canvasHeight = jQuery(this).find('.cr-viewport').css('width');
+                userImages[imageId].canvasWidth = jQuery(this).find('.cr-viewport').css('width');
+                userImages[imageId].top = imageCancas.css('top');
+                userImages[imageId].left = imageCancas.css('left');
+                userImages[imageId].image = userImageList[imageId];
+                console.log("userImages", userImages);
+              }              
+            });            
+            if (error) {
+              alert("Please upload all canvas images");                
+            }
+            jQuery('.product-custom-option').each(function() {
+              if (jQuery(this).parents('.field').find('.label').text().trim().toLowerCase().indexOf('canvas') > 0) {
+                if (!error) {
+                  jQuery(this).val(JSON.stringify(userImages));
+                } else {
+                  jQuery(this).val("");
+                  return false;
+                }
+              }
+            });
+          });
+        });
+    </script>
+  <?php  
   $imageOptions = explode(",", $imageOptions);
   foreach ($imageOptions as $optionKey => $option) {
     $dimension = explode(':', $option);
@@ -85,7 +142,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
     $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;
+    <div class="user_image_canvas" style="width: <?php echo $hv[0]; ?>px;height: <?php echo $hv[1]; ?>px;
          position: absolute;z-index: 9999;
          margin-left: <?php echo $xy[0]; ?>px; margin-top: <?php echo $xy[1]; ?>px;">
       <button class="removeBut" id="image_remove_<?php echo $optionKey; ?>" style="
@@ -98,7 +155,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
 ">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_identifire" class="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]; ?>"> 
@@ -107,12 +164,12 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
 
       </form>
       <script>
- var valJson = {};
+      var valJson = {};
         require([
           'jquery',
         ], function ($) {
           'use strict';
-          
+                    
           setTimeout(function () {
               var IT = setInterval(function(){
           var src3 = jQuery('img.fotorama__img').attr('src');
@@ -153,6 +210,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
 
         function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) {
           if (status) {
+            userImageList[<?php echo $optionKey; ?>] = imageUrl;
             require([
               'jquery',
               'Croppie'
@@ -160,6 +218,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
               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; ?>').removeClass('image_error');
                 //jQuery('.image-upload-custom<?php echo $optionKey; ?>').append("<img src='" + imageUrl + "' style='width:100%; height:100%'>");
                 var imgSpl = imageUrl.split('/');
 

app/design/frontend/Sm/shop4u/Magento_Checkout/templates/cart/item/default.phtml

+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/** @var $block \Magento\Checkout\Block\Cart\Item\Renderer */
+
+$_item = $block->getItem();
+$product = $_item->getProduct();
+$isVisibleProduct = $product->isVisibleInSiteVisibility();
+/** @var \Magento\Msrp\Helper\Data $helper */
+$helper = $this->helper('Magento\Msrp\Helper\Data');
+$canApplyMsrp = $helper->isShowBeforeOrderConfirm($product) && $helper->isMinimalPriceLessMsrp($product);
+?>
+<tbody class="cart item">
+    <tr class="item-info">
+        <td data-th="<?= $block->escapeHtml(__('Item')) ?>" class="col item">
+            <?php if ($block->hasProductUrl()):?>
+                <a href="<?= /* @escapeNotVerified */ $block->getProductUrl() ?>"
+                   title="<?= $block->escapeHtml($block->getProductName()) ?>"
+                   tabindex="-1"
+                   class="product-item-photo">
+            <?php else:?>
+                <span class="product-item-photo">
+            <?php endif;?>
+            <?= $block->getImage($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml() ?>
+            <?php if ($block->hasProductUrl()):?>
+                </a>
+            <?php else: ?>
+                </span>
+            <?php endif; ?>
+            <div class="product-item-details">
+                <strong class="product-item-name">
+                    <?php if ($block->hasProductUrl()):?>
+                        <a href="<?= /* @escapeNotVerified */ $block->getProductUrl() ?>"><?= $block->escapeHtml($block->getProductName()) ?></a>
+                    <?php else: ?>
+                        <?= $block->escapeHtml($block->getProductName()) ?>
+                    <?php endif; ?>
+                </strong>
+                <?php if ($_options = $block->getOptionList()):?>
+                    <dl class="item-options">
+                        <?php foreach ($_options as $_option) : ?>
+                            <?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>
+                            <dt><?= $block->escapeHtml($_option['label']) ?></dt>
+                            <?php if (stripos($_option['label'], 'Image Canvas') <= 0) { ?>
+                            <dd>
+                                <?php if (isset($_formatedOptionValue['full_view'])): ?>
+                                    <?= /* @escapeNotVerified */ $_formatedOptionValue['full_view'] ?>
+                                <?php else: ?>
+                                    <?= $block->escapeHtml($_formatedOptionValue['value'], ['span']) ?>
+                                <?php endif; ?>
+                            </dd>
+                            <?php } ?>
+                        <?php endforeach; ?>
+                    </dl>
+                <?php endif;?>
+                <?php if ($messages = $block->getMessages()): ?>
+                    <?php foreach ($messages as $message): ?>
+                        <div class="cart item message <?= /* @escapeNotVerified */ $message['type'] ?>"><div><?= $block->escapeHtml($message['text']) ?></div></div>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+                <?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>
+                <?php if ($addInfoBlock): ?>
+                    <?= $addInfoBlock->setItem($_item)->toHtml() ?>
+                <?php endif;?>
+            </div>
+        </td>
+
+        <?php if ($canApplyMsrp): ?>
+            <td class="col msrp" data-th="<?= $block->escapeHtml(__('Price')) ?>">
+                <span class="pricing msrp">
+                    <span class="msrp notice"><?= /* @escapeNotVerified */ __('See price before order confirmation.') ?></span>
+                    <?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>
+                    <a href="#" class="action help map" id="<?= /* @escapeNotVerified */ ($helpLinkId) ?>" data-mage-init='{"addToCart":{"helpLinkId": "#<?= /* @escapeNotVerified */ $helpLinkId ?>","productName": "<?= /* @escapeNotVerified */ $product->getName() ?>","showAddToCart": false}}'>
+                        <span><?= /* @escapeNotVerified */ __("What's this?") ?></span>
+                    </a>
+                </span>
+            </td>
+        <?php else: ?>
+            <td class="col price" data-th="<?= $block->escapeHtml(__('Price')) ?>">
+                <?= $block->getUnitPriceHtml($_item) ?>
+            </td>
+        <?php endif; ?>
+        <td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
+            <div class="field qty">
+                <label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
+                    <span><?= /* @escapeNotVerified */ __('Qty') ?></span>
+                </label>
+                <div class="control qty">
+                    <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
+                           name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
+                           data-cart-item-id="<?= $block->escapeHtml($_item->getSku()) ?>"
+                           value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
+                           type="number"
+                           size="4"
+                           title="<?= $block->escapeHtml(__('Qty')) ?>"
+                           class="input-text qty"
+                           data-validate="{required:true,'validate-greater-than-zero':true}"
+                           data-role="cart-item-qty"/>
+                </div>
+            </div>
+        </td>
+
+        <td class="col subtotal" data-th="<?= $block->escapeHtml(__('Subtotal')) ?>">
+            <?php if ($canApplyMsrp): ?>
+                <span class="cart msrp subtotal">--</span>
+            <?php else: ?>
+                <?= $block->getRowTotalHtml($_item) ?>
+            <?php endif; ?>
+        </td>
+    </tr>
+    <tr class="item-actions">
+        <td colspan="4">
+            <div class="actions-toolbar">
+                <?= /* @escapeNotVerified */ $block->getActions($_item) ?>
+            </div>
+        </td>
+    </tr>
+</tbody>