Get image URL from bootstrap modal to java script

Question

I am modifying one image and show it in a modal, but I am not getting the image URL because this image modified and show in bootstrap modal. I want to get URL for this image in JavaScript for upload to server.

I have already seen this link but am not satisfied this solution: https://stackoverflow.com/questions/18754900

HTML CODE:

 <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <a class="btn btn-primary" id="upload" download="cropped.png" href="javascript:void(0);">Upload</a>
 </div>

JavaScript Code:

        $('#upload').click(function () {
                        var b = result.toDataURL();
                        $.ajax({
                            url: "/sf/p/customizeText",
                            type: 'GET',
                            data: b,
                            success: function (response) {

                            },
                            complete: function (response) {

                            },
                            error: function (response) {

                            }
                        });
                    });

I want to send this cropped image URL to server, but i am not getting URL from this image because cropped image will be new each time and it is temporary save in browser after reload image is lose. I am save this image in variable b, But this is in bas64 form, we can directly send to /sf/p/customizeText (url) by ajax?

Can we assign result.toDataURL() in varaible b and pass in ajax Like

  data: b, 

Please give me some idea for achieve this solution.

Answer 1

The image cropped will most likely be a base64 encoded image. You should post the HTML of the image tag. You can get the image sorurce via attr() .

var imageSrc = $('#id').attr('src'); //data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE

You have to get the src of the image tag via js and send it to the server. Then you can either save the string and use it directly as image or decode it. I give you a little example on how to do that with PHP and Java.

PHP

//save your data into a variable - last part is the base64 encoded image
$encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";
//decode the url, because we want to use normal charackters to use explode
$decoded = urldecode($encoded);
//explode at ',' - the last part should be the encoded image now
$exp = explode(',', $decoded);
//we just get the last element with array_pop
$base64 = array_pop($exp);
//decode the image and finally save it
$data = base64_decode($base64);
$file = 'data.png';
//make sure you are the owner and have the rights to write content
file_put_contents($file, $data);

Java

byte[] data = Base64.decodeBase64(crntImage);
try (OutputStream stream = new FileOutputStream("c:/decode/abc.bmp")) {
    stream.write(data);
}