jquery图像编辑器或在我上传的图像上添加文字

我为一些jquery实现了loocking，我找不到符合我的要求的东西。jquery图像编辑器或在我上传的图像上添加文字

我需要从我的电脑上传图像，并且能够像我一样更改背景色（im应该使用透明部分的png图像）。

我希望能够在我已经可以管理的浏览器上载的图像上添加一些图标和文字。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 

    <title>Untitled Document</title> 
    <script src= 
    "http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type= 
    "text/javascript"></script> 
    <script> 
$(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 < 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); 
      }  
     } 
    </script> 
    <style type="text/css"> 
.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; 
    } 
    </style> 
</head> 

<body> 
    <div id="keyConfContainer"> 
     <div id="keyconfTittle"> 
      Modify a keycap 
     </div> 


     <div id="keycap"> 
      <div class="upload"> 
       <label for="my-input">Upload your image</label> <input accept= 
       "image/*" id="my-input" name="" onchange="showMyImage(this)" 
       type="file"> 
      </div> 
      <br> 


      <div id="bgcolor"><img alt="" id="thumbnil" src="" style= 
      "width:100%; margin-top:10px;"> 
      </div> 
     </div> 


     <div id="keycapconf"> 
      <div id="options"> 
      </div> 


      <div id="menu"> 
       Blackground-color: <input id="color" type="color"><br> 
       Clip art library: 
       <!-- implementar la ventana con las imagenes--><br> 
       Upload your image: 

       <form action="demo_form.asp"> 
        <input accept="image/*" name="pic" type="file" value= 
        "Upload a image"> <input type="submit" value="Change"> 
       </form> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

这里是jsfidlebut imageuploading不工作的链接。 http://jsfiddle.net/nmpj3qdp/

任何想法？有没有可以满足我的要求的jquery？

来源

2014-09-23 Patrick Vibild

你检查了这个http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded？ – gabereal 2014-09-23 15:36:04

这是最新的fiddle。

您需要添加

$('#imageFile').on('change', function(){ showMyImage(); });

，改变线showMyImage拿到文件

var files = $('#imageFile').prop("files");

我不知道你所说的，虽然更换颜色的意思。如果你想修改加载的图像，你可以看看plugins。

更新：

http://jsfiddle.net/nmpj3qdp/2/

这改变这种形象是内部的div的背景颜色，但除非你找到它的一个插件，你不能改变客户端上的巴纽的背景色。

来源

2014-09-23 15:44:06 artm

我希望能够将文本和图标添加到以此方式上传的图像。我已经管理colorbackground，你可以上传一个透明的图像，在右边选择一种颜色，uploadedimage的背景会改变。编辑：通过添加文字和图标的图像，即时通讯不是说图像需要改变，然后像这样上传。我只是希望能够在该图像上显示文字和图标。 – 2014-09-23 15:46:41

@PatrickVibild查看答案中的更新。 – artm 2014-09-23 15:53:51

@PatrickVibild当您更新现有评论时，我没有收到通知，请更好地添加一个新通知。如果您想要在加载的图像上显示透明的图标图像，可以将其添加到您的“#keycap”中，就像您添加的标签一样。 – artm 2014-09-23 15:58:34

jquery图像编辑器或在我上传的图像上添加文字

回答

相关问题