How can background-image be changed on client side?

Question

I have a problem. I need to create one feature for site. User can select image on his computer and that image have to be installed as background-image in body. But I have two problems:

Server is so weak and it can't get a lot of pictures.
If we change background-image on server it is automatically changed for every user.

What can I do to solve it?

You can convert the images to `base64` instead or store the images as `BLOB` in your database. — node_modules, Mar 31 '16 at 11:55
base64 file size will be larger than the normal file for most images: http://stackoverflow.com/questions/11402329/base64-encoded-image-size — KWeiss, Mar 31 '16 at 11:56
@KWeiss Oh, thanks! Learned something, I always tought it will be compressed or something,. — node_modules, Mar 31 '16 at 11:59

score 1 · Answer 1 · edited Apr 03 '16 at 15:55

Here is how to upload an image in a browser (using jQuery):

HTML:

<input type='file'/>
<img id="someImage" src="#"/>

Javascript:

$(function(){
  $(":file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = onImageLoaded;
        reader.readAsDataURL(this.files[0]);
    }
  });
})

function onImageLoaded(e){
  $('#someImage').attr('src', e.target.result)
}

If you want to persist the image in server, you could convert the image to base64 and even shrink the image, and send it to server.

How can background-image be changed on client side?

1 Answers1