title: Woocommerce custom image for cart thumbnail
body: <p>I am modifying product image in product detail page using fabricjs(Canvas Image). Now I want to use that customized image as a cart thumbnail after clicking Add To Cart button.</p>
  <p>I have already saved other custom data in cart item data using below code,</p>
  <pre><code>add_filter( 'woocommerce_add_cart_item_data', 'add_custom_fields_cart_item_data', 10, 2 );
  
  function add_custom_fields_cart_item_data( $cart_item_data, $product_id ){
  
  if(isset($_POST['color']))
      $cart_item_data['custom_data']['color'] = sanitize_text_field($_POST['color']);
  
  if(isset($_POST['desc']))
      $cart_item_data['custom_data']['desc'] = sanitize_text_field($_POST['desc']);
  
  $cart_item_data['custom_data']['unique_key'] = md5( microtime().rand() );
  WC()-&gt;session-&gt;set( 'custom_data', $cart_item_data['custom_data'] );
  
  return $cart_item_data;
  }
  add_action('woocommerce_checkout_create_order_line_item', 'save_custom_fields_as_order_item_meta', 20, 4);
  function save_custom_fields_as_order_item_meta($item, $cart_item_key, $values, $order) {
  if( ! isset($values['custom_data']) )
      return;
  
  $text_domain ='woocommerce';
  
  // Save values:
  
  if( array_key_exists('color', $values['custom_data']) ){
      $item-&gt;update_meta_data( __('Colors', $text_domain), $values['custom_data']['color'] );
  }
  
  if( array_key_exists('desc', $values['custom_data'])){
      $item-&gt;update_meta_data( __('Description', $text_domain), $values['custom_data']['desc'] );
  }
  }
  </code></pre>
  <p>I have saved custom canvas image using AJAX into the media</p>
  <pre><code>function my_action_javascript() { ?&gt;
  &lt;script type=&quot;text/javascript&quot; &gt;
  jQuery(document).ready(function() {
      var canvas = new fabric.Canvas('can');
  
          canvas.setHeight(300);
          canvas.setWidth(350);
          var img_src = $('#custom_image').attr('src');
          
          var img = new Image();
          img.src = img_src;
          img.crossOrigin = &quot;anonymous&quot;;  // important - set crossOrigin before src!
          img.onload = function(){
               canvas.setBackgroundImage(new fabric.Image(img, {
                  width: canvas.width,
                height: canvas.height,
                  originX: 'left',
                  originY: 'top'
                }), canvas.renderAll.bind(canvas));
          };
          canvas.setZoom(canvas.getZoom() *1.0);
          $(&quot;#colorpicker&quot;).change(function(){
            var clr_pick = $(this).val();
            var text = new fabric.Textbox('Name',  
            { 
                width: 100,
                fill: clr_pick,
                cornerColor: 'black'
            }); 
            canvas.add(text).renderAll();
          });
  
          $( &quot;#single_add_to_cart_button&quot; ).click(function(e) {
         
            var photo = canvas.toDataURL('image/jpeg');      
            var ajaxurl = '&lt;?php echo admin_url('admin-ajax.php') ?&gt;';          
              $.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {'action': 'custom_product_design', 'photo': photo },
                success: function(response) {
                    
                }
          });
      });
  });
  &lt;/script&gt; &lt;?php
  }
  
  add_action( 'wp_ajax_nopriv_custom_product_design', 'custom_product_design' );
  add_action( 'wp_ajax_custom_product_design', 'custom_product_design' );
  
  function custom_product_design() {
  
  $upload_dir = wp_upload_dir();
  $upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;
  $image_parts = explode(&quot;;base64,&quot;,$_POST['photo']);
  $decoded = base64_decode($image_parts[1]);
  $filename = 'wigo.png';
  $hashed_filename = md5( $filename . microtime() ) . '_' . $filename;
  $image_upload = file_put_contents( $upload_path . $hashed_filename, $decoded ); 
  require_once(ABSPATH . 'wp-admin/includes/image.php');
  require_once(ABSPATH . 'wp-admin/includes/media.php');
  require_once(ABSPATH . 'wp-admin/includes/file.php');
  
  
  // Without that I'm getting a debug error!?
  $file             = array();
  $file['error']    = '';
  $file['tmp_name'] = $upload_path . $hashed_filename;
  $file['name']     = $hashed_filename;
  $file['type']     = 'image/png';
  $file['size']     = filesize( $upload_path . $hashed_filename );
  // upload file to server
  
  // use $file instead of $image_upload
  $file_return = wp_handle_sideload( $file, array( 'test_form' =&gt; false ) );
  $filename = $file_return['file'];
  $attachment = array(
   'post_mime_type' =&gt; $file_return['type'],
   'post_title' =&gt; preg_replace('/\.[^.]+$/', '', basename($filename)),
   'post_content' =&gt; '',
   'post_status' =&gt; 'inherit',
   'guid' =&gt; $wp_upload_dir['url'] . '/' . basename($filename)
  );
  
  $attach_id = wp_insert_attachment( $attachment, $filename );
  /// generate thumbnails of newly uploaded image
  $attachment_meta = wp_generate_attachment_metadata($attach_id, $filename );
  wp_update_attachment_metadata($attach_id,$attachment_meta);
  die;
  }
  </code></pre>
  <p>Now I am getting custom image from <code>atachment_id</code>, Now I just want to save this new image into <code>custom_data</code> of <code>$cart_item_data</code> into the ajax call and use it as a cart thumbnail using filter <code>woocommerce_cart_item_thumbnail</code>.</p>