使用jQuery将图像转换为base64-我已经在src =“ images / YouthMember.jpg”中加载了图像，需要将其转换为base64

Question

先前的答案是对图像的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]);
    }
}

因此，我为默认图像功能添加了相同的内容，用“ load”替换为“ change”：

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

这不起作用，并且传递字符串'images / YouthMember.jpg'而不是base64。控制台中没有错误。

这位于'$（document）.ready（function（）{'）中。