fix image as page background from the array list javascript

Question

I'm trying to add an image as a background for the html page if the user wants to change.So what I did is, I used input file type to access the local folder and I can also make them to select the image whatever they want. But now I want to how can I make the image which was selected by the user to make it fixed as the page backgroundImage. Here is my code.This is mostly like a desktop background or smartphone wallpaper.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Understanding File upload and File access Javascript</title>
</head>
<body>
    <input type = "file" id = "files" name = "files[]" multiple></input>
    <output id = "list"></output>
</body>
<script src = "fileaccess.js" type = "text/javascript"></script>
</html>

fileaccess.js

if(window.File && window.FileReader && window.FileList && window.Blob){
     alert("Yes, its supported in this browser");
}else{
     alert('The File APIs are not fully supported in this browser.');
}

function handleFileSelect(evt){
    var files = evt.target.files;
    var output = [];
    for(var i = 0, f; f = files[i]; i++){
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a',') - ',
                    f.size, 'bytes, last modified: ',
                    f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                     '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Please give some help!

le_m · Accepted Answer · 2016-07-13 12:28:07Z

2

You need to instantiate a FileReader, read the chosen image via readAsDataURL() and assign the resulting data url to body.style.backgroundImage.

If you want the user to chose a selection of the image, you need to load the file to an image or canvas element, then allow the user to select a part of the displayed image and finally copy the image selection to an off-screen canvas. You can then assign the canvas's data url to body.style.backgroundImage:

function imageToBackground(image, x, y, width, height) {
  var canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  var context = canvas.getContext("2d");
  context.drawImage(image, x, y, width, height, 0, 0, width, height);
  document.body.style.backgroundImage = "url(" + canvas.toDataURL() + ")";
}

function readImage(file, image) {
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    image.src = reader.result;
  });
  reader.readAsDataURL(file);
}

var file = document.getElementById("file");
var image = document.getElementById("image");
var button = document.getElementById("button");

file.addEventListener("change", function(event) {
  var file = event.target.files[0];
  if (file) readImage(file, image);
});

button.addEventListener("click", function(event) {
  // Todo: let the user chose the region
  imageToBackground(image, 0, 0, 100, 100);
});

<input type="file" id="file">
<image id="image">
<input type="button" id="button" value="Set as background">

You would now need to provide the user with a way to select a region of the loaded image. Either chose one of the many image cropping plugins available on the net or come up with your own implementation.

edited Jul 13, 2016 at 12:28

answered Jul 13, 2016 at 11:31

le_m

20.4k10 gold badges70 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

learner Over a year ago

thanks, @le_m, and is there anyway we can select a particular from the image to set as background.

le_m Over a year ago

@RSN can select a particular what? You mean a particular image of multiple chosen ones?

learner Over a year ago

a particular section from the image. sorry typing mistake

le_m Over a year ago

@RSN Yes, by copying a part of the loaded image to a canvas and then call Canvas.toDataURL(). Shall the selection be chosen dynamically by the user?

learner Over a year ago

could you please add that code in the answer or please give me a reference link for that.

|

Collectives™ on Stack Overflow

fix image as page background from the array list javascript

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related