RSN RSN - 4 months ago 14
Javascript Question

fix image as page background from the array list javascript

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!

Answer

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.

Comments