0

Previous answers are base64 to image - I want he opposite please.

I am successfully reading in an image and storing it. Now I want to use a default image to start with. The user can select another image to replace it.

This works:

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]);
    }
}

So I have added the same for the default image function substituting 'change' with 'load':

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

This does not work and the string 'images/YouthMember.jpg' is being passed instead of the base64. There is no error in the console.

This is within a '$(document).ready(function(){'.

Glyn
  • 1,933
  • 5
  • 37
  • 60
  • Possible duplicate of [how to convert base64 to image by using jquery?](https://stackoverflow.com/questions/29343196/how-to-convert-base64-to-image-by-using-jquery) – გენო მუმლაძე Dec 07 '18 at 08:07
  • that ll help u : https://stackoverflow.com/questions/29343196/how-to-convert-base64-to-image-by-using-jquery – გენო მუმლაძე Dec 07 '18 at 08:08
  • Hi genadi, I do not see how these answers are relevant. I am starting with "src="images/YouthMember.jpg"" and the supplied reference start with "data:image/png;base64,iVBORw0KGgoAAAANSU..." (i.e., already base64). How do I start with "src="images/YouthMember.jpg"" and end up with "iVBORw0KGgoAAAANSU..." please. – Glyn Dec 08 '18 at 04:46
  • Please [check this link](https://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript), I think this can help you. – Arash Khajelou Dec 08 '18 at 05:43
  • 1
    Possible duplicate of [Get image data in JavaScript?](https://stackoverflow.com/questions/934012/get-image-data-in-javascript) – Kaiido Dec 08 '18 at 06:29

0 Answers0