Javascript Jquery图像编辑器或在我上传的图像上添加文本_Javascript_Jquery_Html_Image_Editor

Javascript Jquery图像编辑器或在我上传的图像上添加文本

javascript jquery html image editor

Javascript Jquery图像编辑器或在我上传的图像上添加文本,javascript,jquery,html,image,editor,Javascript,Jquery,Html,Image,Editor,我正在寻找jquery的一些实现，但我找不到符合我要求的我需要上传一个图像从我的电脑，并能够改变背景颜色，因为我做我应该使用png图像与透明部分我想能够添加一些图标和文字的形象，我上传在浏览器，我可以随时管理 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <scri

我正在寻找jquery的一些实现，但我找不到符合我要求的

我需要上传一个图像从我的电脑，并能够改变背景颜色，因为我做我应该使用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图像上传的链接，但该链接不起作用

有什么想法吗？有任何jquery可以满足我的要求吗？

这里有一个更新的jquery

您需要添加

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

并更改showMyImage中的行以使文件

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

不过，我不知道你换颜色是什么意思。如果你想修改加载的图像，你可以看一看

更新：

这会更改图像所在div的背景颜色，但除非找到插件，否则无法在客户端更改.png的背景颜色。

是否检查了此选项？我希望能够将文本和图标添加到以这种方式上载的图像中。我已经准备好管理彩色背景，你可以上传一个透明的图像，在右边选择一种颜色，上传图像的背景会改变。编辑：通过在图片中添加文字和图标，我并不是说图片需要修改然后上传。我只是希望能够在该图像上显示文本和图标。@PatrickVibild更新现有注释时，如果我没有收到通知，最好添加一个新注释。如果您想在加载的图像顶部显示一个透明图标图像，可以将其添加到键帽中，就像添加的标签一样。