passing javascript innerhtml variable to php

Question

Really need your help, I have the below javascript code:

    document.querySelector('#btnCrop').addEventListener('click', function(){
        var img = cropper.getDataURL();

        document.querySelector('.cropped').innerHTML += img;
    })

The "img" has a value:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAYAAACJm/9dAAAgAElEQVR4Xuy9B6CdZZUuvE56771AQgqEGgKEkNCrgoAFRFQQHevM+Ht/nTsX5/7XmXFm1Jlx7HVGZSxIN0iXIqFLSEgIkALpvScnvZ/7rPaW7/v2PicQEPzdGs7eX3nLeldf611vAxE14d+b/rn2/DPos5ddSN26

so what is does in php is to display it via:

$img = (div class="cropped" style="float: left;margin-top:-653px;margin-left: 630px;border:1px solid violet")(/div)

What I need is to display it without div. Just the value of the "img".

Answer 1

Replace

document.querySelector('.cropped').innerHTML += img;

with something like this:

document.write("<img src=\"" + img + "\" style=\"\">");

That will just write it in document. But basically it's the same when extending it to something. Something like this is more what you want I guess:

$('img#ID').attr('src', img);

(This wil set the src value (Base64) in the image. If you want you could hide it at first and then use $().show() to make the image visible again.