how to get image data and store into hidden textbox

Question

After digging into the issue quiet a long time...I am trying something here...But before that let me clear the issues here...I have a IMG tag in the PHP page and I am trying to load image there successfully...now I am trying to capture that Image data into a hidden textbox so that I can use that Image data as in PHP variable for mPDF...

To achieve that I first made the Javascript:

function logoImg(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
        getBase64Image();
    }

    $('.delete-logo').css('display', 'inline-block');
}

function getBase64Image() {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var img = document.getElementById('img_prev');

    context.drawImage(img, 0, 0 );
    var theData = context.getImageData(0, 0, img.width, img.height);

    document.getElementById('tx').value = theData;
}

In the PHP file here is the IMG tag:

<div class="logo_prev">
    <img id="img_prev" src="/test7/assets/img/logo-placeholder.png" alt="Your logo" class="img-thumbnail invoice-logo img-responsive"/>
</div>

<br>

<input type='file' onchange="logoImg(this);" name="invoice_logo" class="select-logo" data-validation="mime size" data-validation-allowing="jpg, png, gif" data-validation-max-size="2M" data-validation-error-msg="Only jpg, gif or png are allowed (Max 2mb)" />
<input type="text" id="tx" name="tx"/>

I really need some clue to take it forward...please help me.

Answer 1

You should be using the canvas.toDataURL() method to get the Base64 string. I've included a runnable snippet.

Instead of this:

var theData = context.getImageData(0, 0, img.width, img.height);

Use this:

var theData = canvas.toDataURL();

function logoImg(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
        getBase64Image();
    }

    $('.delete-logo').css('display', 'inline-block');
}

function getBase64Image() {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var img = document.getElementById('img_prev');

    context.drawImage(img, 0, 0 );
    var theData = canvas.toDataURL();
    document.getElementById('tx').value = theData;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="logo_prev">
    <img id="img_prev" src="" alt="Your logo" class="img-thumbnail invoice-logo img-responsive"/>
</div>

<br>

<input type='file' onchange="logoImg(this);" name="invoice_logo" class="select-logo" data-validation="mime size" data-validation-allowing="jpg, png, gif" data-validation-max-size="2M" data-validation-error-msg="Only jpg, gif or png are allowed (Max 2mb)" />
<input type="text" id="tx" name="tx"/>