使用jQuery将图像转换为base64-我在src=“images/YouthMember.jpg”处有一个已加载的图像,需要将其转换为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">

$(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(){

这不起作用,正在传递字符串“images/YouthMember.jpg”,而不是base64。控制台中没有错误。