title: Set base64 value as input type= "file"
body: <p><strong>Hi,</strong></p>
  
  <p>i really have a big problem. I´m using simplecropper and i successfully get a preview image in a div box. This image has a base64 encoded src. </p>
  
  <p><strong>My question:</strong> Can I somehow "copy" the image of the div box and set it as input value for the file attribute?</p>
  
  <p>This has to become compatible:</p>
  
  <pre><code>        &lt;div class="cropme" style="width: 405px; height: 200px;"&gt;&lt;/div&gt;      
          &lt;input type="file" id="{$field-&gt;idattr}" name="{$field-&gt;nameattr}" /&gt;   
  </code></pre>
  
  <p>i.m.o. important Javascript:</p>
  
  <pre><code>        // Add image to dropbox element
                  dropbox.appendChild(current_image);
              }
  
              reader.readAsDataURL(file);
          } else {
              dropbox.innerHTML = "File not supported!";
          }
      }
  
      function showCoords(c) {
          x1 = c.x;
          y1 = c.y;
          x2 = c.x2;
          y2 = c.y2;
      }
  
      function preview() {
          // Set canvas
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
  
          // Delete previous image on canvas
          context.clearRect(0, 0, canvas.width, canvas.height);
  
          // Set selection width and height
          var sw = x2 - x1;
          var sh = y2 - y1;
  
  
          // Set image original width and height
          var imgWidth = current_image.naturalWidth;
          var imgHeight = current_image.naturalHeight;
  
          // Set selection koeficient
          var kw = imgWidth / $("#preview").width();
          var kh = imgHeight / $("#preview").height();
  
          // Set canvas width and height and draw selection on it
          canvas.width = aspX;
          canvas.height = aspY;
          context.drawImage(current_image, (x1 * kw), (y1 * kh), (sw * kw), (sh * kh), 0, 0, aspX, aspY);
  
          // Convert canvas image to normal img
          var dataUrl = canvas.toDataURL();
          var imageFoo = document.createElement('img');
          imageFoo.src = dataUrl;
  
          // Append it to the body element
          $('#preview').delay(100).hide();
          $('#modal').hide();
          file_display_area.html('');
          file_display_area.append(imageFoo);
  
          if (onComplete) onComplete(
              {                    
                  "original": { "filename": image_filename, "base64": original_data, "width": current_image.width, "height": current_image.height },
                  "crop": { "x": (x1 * kw), "y": (y1 * kh), "width": (sw * kw), "height": (sh * kh) }
              }
             );
      }
  </code></pre>