Question

我正在为html的图像编辑器工作。目前我的一切都很好，但问题是我想获取导出的编辑图片的网址，以便我可以将其保存到数据库。但问题是我失败了如何得到这个，因为网址没有给出完整的基础64。

这是我的插图：

我浏览图片
然后在选择上传的图片后，将图片复制并执行编辑
导出表示保存图片（在图片编辑器后面打印）

了解更多信息，请参阅图片：

我的调试：

使用： alert($('#image_data').val());给了我一些东西，当我在浏览器中复制该URL时，它打印如下：

警告后，其网址如下：

data:image/png;base64,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

但在浏览器控制台上，我看到完全不同：

<input name="image_data" id="image_data" value="data:image/png;...........

见图：

我不知道为什么我的alert(...)与控制台中显示的<!DOCTYPE html> <html> <head> <title> Exemple de HTML </title> </head> <link rel="stylesheet" type="text/css" href="http://xfer.cybusservices.com/hititpro/assets/vendor/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://xfer.cybusservices.com/hititpro/assets/styles/css/annotate.css"> <body> <input type="hidden" name="image_data" id="image_data"> <button class="export-image">Export image</button> <input type="file" id="i_file" value=""> <img onclick="new_image();" src="" width="200" style="display:none;" /> <div style="margin-top:50px"> <div id="myCanvas" style="position:relative"></div> </div> <script type="text/javascript" src="http://xfer.cybusservices.com/hititpro/assets/vendor/js/jquery.min.js"></script> <script type="text/javascript" src="http://xfer.cybusservices.com/hititpro/assets/vendor/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://xfer.cybusservices.com/hititpro/assets/scripts/djaodjin-annotate.js"></script> <script> function new_image(){ var iam=$('#image_data').val(); var counter = 0; $('#myCanvas').on("annotate-image-added", function(event, id, path){ $(".my-image-selector").append("<label><input type=\"radio\" name=\"image-selector\" class=\"annotate-image-select\" value=\"" + path + "\" checked id=\"" + id + "\"><img src=\"" + path + "\" width=\"35\" height=\"35\"></label>"); }); $('#myCanvas').annotate({ color: 'blue', bootstrap: true, images: [iam], onExport: function(image){ if ($("#exported-image").length > 0){ $("#exported-image").remove(); } $("body").append("<img src=\"" + image + "\" id=\"exported-image\">"); } }); $(".export-image").click(function(event) { $('#myCanvas').annotate("export", {type: "http://xfer.cybusservices.com/hititpro/assets/images/jpeg", quality: 0.5},function(d){ $('#image_data').val(d); alert($('#image_data').val()); //not printing complete // alert($('#exported-image').val()); //undefine // console.log(d); }); }); } $('#i_file').change( function(event) { var tmppath = URL.createObjectURL(event.target.files[0]); $('#image_data').val(tmppath); $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0])); }); </script> </body> </html> <script> /*var image_data=$('#image_data').val(); if(image_date !=''){ alert(image_data); }*/ </script>不同。但是当我复制该值并将其粘贴到浏览器中时，它会显示所有已编辑的图片。

这是我的代码：

subscribe

更新看到giff我在浏览器中放置的图片链接是否正确打印：

http://giphy.com/gifs/3oKIP8Aaur7ZsXy5kQ

注意：我使用的是firefox

Answer 1

我猜你的代码工作正常。刚刚更新了导出功能并在img标记中加载了基础64数据。哪个工作正常。还要将您的脚本放在document.ready。

中

如果您有任何疑问，请与我们联系。

此外，如果您担心为什么在URL中打开时警报数据看起来不正常，因为alert也有字符限制。因此数据被截断。 https://stackoverflow.com/a/6864674/3008050

        $(function(){
            $('#i_file').change( function(event) {
                var tmppath = URL.createObjectURL(event.target.files[0]);
                $('#image_data').val(tmppath);
                $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
             });
            
            $('#img1').click(function(){
                new_image();
            });

            function new_image(){
                var iam=$('#image_data').val();
                var counter = 0;
                $('#myCanvas').on("annotate-image-added", function(event, id, path){
                    $(".my-image-selector").append("<label><input type=\"radio\" name=\"image-selector\" class=\"annotate-image-select\" value=\"" + path + "\" checked id=\"" + id + "\"><img src=\"" + path + "\" width=\"35\" height=\"35\"></label>");
                });

                $('#myCanvas').annotate({
                    color: 'blue',
                    bootstrap: true,
                    images: [iam],
                    onExport: function(image){
                        if ($("#exported-image").length > 0){
                            $("#exported-image").remove();
                        }
                        $("body").append("<img src=\"" + image + "\" id=\"exported-image\">");
                    }
                });

                $(".export-image").click(function(event) {
                    $('#myCanvas').annotate("export", {type: "http://xfer.cybusservices.com/hititpro/assets/images/jpeg", quality: 0.5},function(d){
                        //console.log(d);
                        $('#img2').attr('src',d).fadeIn();
                    });
                });
            }
        });

<link href="http://xfer.cybusservices.com/hititpro/assets/vendor/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="http://xfer.cybusservices.com/hititpro/assets/styles/css/annotate.css">

<input type="hidden" name="image_data" id="image_data">

<button class="export-image">Export image</button>  
<input type="file" id="i_file" value=""> 
<img src="" id="img1" width="200" style="display:none;" />
<img src="" id="img2" width="200" style="display:none;" />

<div style="margin-top:50px">
    <div id="myCanvas" style="position:relative"></div>
</div>

<script type="text/javascript" src="http://xfer.cybusservices.com/hititpro/assets/vendor/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://xfer.cybusservices.com/hititpro/assets/vendor/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://xfer.cybusservices.com/hititpro/assets/scripts/djaodjin-annotate.js"></script>

Answer 2

使用base64设置图片来源，希望通过这种方式可以帮助您：

How can I set Image source with base64

并且，我尝试使用函数base64EncodeImage()将base64更改为PHP中的图像。

如何在导出后从src获取base 64 image url（单击按钮）

2 个答案: