Replace image on click with image select

Question

I have set up a little template with a basic header. I am trying to make something similar to a drag and drop website building, but in this case the layout will be the same, just the content changes.

As I say, I have created a header element and given it a background image

header {
  width: 100%;
  height: 200px;
  background: url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_2.jpg) center center no-repeat;
  background-size: cover;
}

To get the image to change on click, I could do something like this

$(function() {
    $('#header').click(function() {
     $(this).css('background', 'url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_1.jpg)');
    });
});

I have set up an example JSFiddle. Although this is similar to what I want to do, instead of changing to a hardcoded image, I want to allow the user to select the image from their computer. So a bit like an image upload select option, but in this case I am not uploading anything. My aim on completion is to have a save button, that will generate the HTML/CSS files for these updates.

So I was wondering how would I go about allowing the user to choose what image they want to replace the default with?

Thanks

What kind of "updates" are you talking about? Do you expect the new image to become visible for everyone who visits your website? If so, how do you think that would work without uploading the image to the web server in one way or another? — CBroe, Dec 01 '16 at 22:39
So basically an image preview when user selects a file. Something like this one http://jsfiddle.net/danialfarid/maqbzv15/1118/ ? — Dev, Dec 01 '16 at 22:42
Not expecting updates to be made for everyone who visits the site, only the person on the site. So this will sit on a stage server. I then visit it, click on the image and change it too my own image. I will then have a save button which downloads the updated source. Next person who visits will see the original. — katie hudson, Dec 01 '16 at 23:44

score 2 · Accepted Answer · edited May 23 '17 at 11:53

What you want to do is tricky. Here's a possible solution.

As quoted from this question, you can possibly have the client "upload" their image for manipulation in Javascript:

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

        reader.onload = function (e) {
            document.getElementById('blah').src =  e.target.result;
        }

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

And the HTML:

        <input type='file' id="imgInp" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

Then possibly use the base64 encoded image and run it into your background url parameter:

background:url(data:base64;image/jpg,IMAGINE_BASE64_JIBBERISH_HERE)

I would assume that reader.result contains the data:base64;image/(type), stuff at the beginning, but you'll have to experiment with this yourself.

Here's some reading material:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
http://jsfiddle.net/0GiS0/Yvgc2/ (an example of FileReader at work, could be useful)
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

Replace image on click with image select

1 Answers1