Get image url from boot modal to java script

Question

I modify one image and show it in modal, but I do not get the URL of the image because this image is modified and displayed in bootstrap modal. I want to get the URL for this image in JavaScript to upload to the server.

I have already seen this link, but I am not satisfied with this solution: https://stackoverflow.com/a/464629/

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) {

                            }
                        });
                    });

URL ,  URL , ,   .   b. bas64, /sf/p/customizeText (url) ajax?

result.toDataURL() varaible b ajax

                            data: b,

, .

Answer 1

base64 . HTML- . sorurce attr().

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

src js . . , PHP 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);
}