title: Jquery image editor or add text over a image that I uploaded
body: <p>Im loocking for some implementation of jquery that I cannot find that fit my requierements.</p>
  
  <p>I need to upload a image from my PC, and be able to change the background colo, as I do (im supposed to use png images with transparent parts).</p>
  
  <p>I could like to be able to add some icons and text over the image I have uploaded at the browser that I can allready manage.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;script src=
      "http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type=
      "text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
  $(document).ready(function() {
          $("#color").change(function(){
              var clr = $(this).val();
              $("#bgcolor").css("background-color",clr);
          });
      });
           function showMyImage(fileInput) {
              var files = fileInput.files;
              for (var i = 0; i &lt; files.length; i++) {           
                  var file = files[i];
                  var imageType = /image.*/;     
                  if (!file.type.match(imageType)) {
                      continue;
                  }           
                  var img=document.getElementById("thumbnil");            
                  img.file = file;    
                  var reader = new FileReader();
                  reader.onload = (function(aImg) { 
                      return function(e) { 
                          aImg.src = e.target.result; 
                      }; 
                  })(img);
                  reader.readAsDataURL(file);
              }    
          }
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
  .upload input{
        display: none;
      }
  
      .upload label{
        background: DarkSlateBlue;
        color: white;
        padding: 2px 10px;
      }
  
      #keyConfContainer {
          height: 300px;
          width: 487px;
          border: 1px solid #000;
      }
      #keyconfTittle {
          text-transform: uppercase;
          height: 25px;
          width: 487px;
      }
      #keycap {
          float: left;
          height: 243px;
          width: 243px;
          border: 1px solid #000;
      }
      #options {
          height: 25px;
          width: 242px;
          float: right;
      }
      #menu {
          float: right;
          height: 250px;
          width: 242px;
      }
      #keycapconf {
          float: right;
          height: 275px;
          width: 242px;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="keyConfContainer"&gt;
          &lt;div id="keyconfTittle"&gt;
              Modify a keycap
          &lt;/div&gt;
  
  
          &lt;div id="keycap"&gt;
              &lt;div class="upload"&gt;
                  &lt;label for="my-input"&gt;Upload your image&lt;/label&gt; &lt;input accept=
                  "image/*" id="my-input" name="" onchange="showMyImage(this)"
                  type="file"&gt;
              &lt;/div&gt;
              &lt;br&gt;
  
  
              &lt;div id="bgcolor"&gt;&lt;img alt="" id="thumbnil" src="" style=
              "width:100%; margin-top:10px;"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div id="keycapconf"&gt;
              &lt;div id="options"&gt;
              &lt;/div&gt;
  
  
              &lt;div id="menu"&gt;
                  Blackground-color: &lt;input id="color" type="color"&gt;&lt;br&gt;
                  Clip art library: 
                  &lt;!-- implementar la ventana con las imagenes--&gt;&lt;br&gt;
                  Upload your image:
  
                  &lt;form action="demo_form.asp"&gt;
                      &lt;input accept="image/*" name="pic" type="file" value=
                      "Upload a image"&gt; &lt;input type="submit" value="Change"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a link for the jsfidlebut imageuploading doesnt work. <a href="http://jsfiddle.net/nmpj3qdp/" rel="nofollow">http://jsfiddle.net/nmpj3qdp/</a></p>
  
  <p>Any idea? is there any jquery that could fit my requierement?</p>