how to get base 64 image url from src after Export (clicking on button)

Question

I am working on image editor for html. Currently my everything goes best but problem is i am trying to get url of exported edited picture so that i can save it to database. But problem is i m failed how to get this because the url does nt give complete base 64.

here is my illustration:

I browse the picture
then after selecting uploaded picture,picture is copied in and editor performed
export means save the picture (it prints below after picture editor)

for more understanding see picture:

my debug:

by using: alert($('#image_data').val()); gives me something that when i copies that url in browser it prints like this:

its url is like this after alert:

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

but at browser console i see complete different :

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

see picture:

which i dont know why my alert(...) is different from above which is shown in console. But when i copy that value and paste it into browser it shows all edited picture.

Here is my code:

<!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>

Update: see giff the picture link which i placed in browser is nt printing properly:

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

Note: I am using firefox

sorry for long, but i had to do so.... plz help

Are you still having problems? If so, I would like to help you since I got some spare time now! — funcoding, Mar 15 '17 at 18:09
Your code is working for me! I could see the whole image data inside the alert — funcoding, Mar 15 '17 at 22:17
I just tested your code and couldn't find anything wrong. I was able to save the image url into a database and loaded again. — funcoding, Mar 16 '17 at 00:21
did u checked the image from database is it printing same as done in editor??? — user3162878, Mar 16 '17 at 05:15
i m again pasting that alert() printing url and it is showing only edge of picture — user3162878, Mar 16 '17 at 05:16

score 0 · Answer 1 · edited May 23 '17 at 12:17

I guess your code is working fine. Have just updated the export function and loading the base 64 data in an img tag. Which is working fine. Also have put the your script in document.ready.

Let me know if you have any queries.

Also if you are worried of why alerted data when opened in the URL is not looking fine is because the alert also has a character limit. Hence the data is getting truncated. 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>

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

set Image source with base64, hope this way can help you:

How can I set Image source with base64

and,I try to use funtion base64EncodeImage() to change base64 to image in PHP.

edited May 23 '17 at 12:09

Community

1
1

answered Mar 16 '17 at 06:52

i.yuanx

23
1
2
9

how to get base 64 image url from src after Export (clicking on button)

2 Answers2