Конвертировать изображение в base64 с помощью jQuery - у меня уже есть загруженное изображение в src = "images / YouthMember.jpg", и мне нужно конвертировать его в base64 - PullRequest
0 голосов
/ 07 декабря 2018

Предыдущие ответы - base64 к изображению - я хочу, чтобы он был напротив.

Я успешно читаю изображение и сохраняю его.Теперь я хочу использовать изображение по умолчанию для начала.Пользователь может выбрать другое изображение для его замены.

Это работает:

HTML:

<img id="image" src="images/YouthMember.jpg" alt="Image" class="img-thumbnail">
<input class="form-control-file col-lg-12 col-md-12 col-sm-12 col-xs-12 photo-input" type="file" id="photo" name="photo" placeholder="Image">

javascript / jQuery:

$(document).on('change', '.photo-input', function(){
    //Check for a valid image extension
    alert("this: " + this);
    var img1 = this.files[0].type;
    var mySubString = img1.substring(
        img1.lastIndexOf("image") + 6
    );
    if($.inArray(mySubString, ['gif','png','jpg','jpeg']) == -1) {
        alert('Add invalid extension!');
        $('#image').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==');
    }else{
        //Check for a valid image size
        if (this.files[0].size < 10000){
            readURL(this, this.id);
        }else{
            alert("This image is to large (must be < 10 KB).")
            $('#image').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==');
        }
        var img1 = document.getElementById('image');
        img2 = (img1.getAttribute('src')).replace(/^data:image\/(png|jpg|jpeg|gif);base64,/, "");
    }
});

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

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

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

ИтакЯ добавил то же самое для функции изображения по умолчанию, заменив 'change' на 'load':

$(document).on('change', '.photo-input', function(){

Это не работает, и вместо base64 передается строка 'images / YouthMember.jpg'.В консоли нет ошибок.

Это внутри '$ (document) .ready (function () {'.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...