Как получить данные изображения и сохранить в скрытом текстовом поле

Question

После долгого изучения тихой проблемы... Я пытаюсь кое-что здесь... Но перед этим позвольте мне устранить проблемы здесь... У меня есть тег IMG на странице PHP, и я пытаюсь загрузить изображение там успешно... теперь я пытаюсь захватить эти данные изображения в скрытое текстовое поле, чтобы я мог использовать эти данные изображения, как в переменной PHP для mPDF...

Чтобы достичь этого, я сначала сделал 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;
}

В файле PHP есть тег IMG:

<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"/>

Мне действительно нужна подсказка, чтобы продвинуться вперед... пожалуйста, помогите мне.

Answer 1

Вы должны использовать метод canvas.toDataURL() для получения строки Base64. Я включил готовый фрагмент.

Вместо этого:

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

Использовать этот:

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"/>