Bild als Seitenhintergrund aus der Array-Liste beheben Javascript

Ich versuche, ein Bild als Hintergrund für die HTML-Seite hinzuzufügen, wenn der Benutzer ändern will.So, was ich tat, habe ich Eingabedateityp für den Zugriff auf die lokale Ordner und ich kann sie auch machen, um das Bild auszuwählen, was auch immer sie wollen. Aber jetzt möchte ich, wie kann ich das Bild, das vom Benutzer ausgewählt wurde, um es als die Seite backgroundImage festgelegt werden. Hier ist mein Code.Dies ist meist wie ein Desktop-Hintergrund oder Smartphone Wallpaper.Bild als Seitenhintergrund aus der Array-Liste beheben Javascript

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

Bitte etwas Hilfe geben!

Quelle

2016-07-13 learner

Sie müssen eine FileReader instanziieren, das ausgewählte Bild über readAsDataURL() lesen und die resultierende Daten-URL body.style.backgroundImage zuweisen.

Wenn Sie möchten, dass der Benutzer eine Auswahl des Bildes auswählt, müssen Sie die Datei in ein Bild oder ein Canvas-Element laden, dann dem Benutzer erlauben, einen Teil des angezeigten Bildes auszuwählen und schließlich die Bildauswahl zu kopieren Offscreen-Leinwand. Anschließend können Sie die Daten URL body.style.backgroundImage der Leinwand zu:

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">

Sie müßten nun den Benutzer eine Möglichkeit bieten, einen Bereich des geladenen Bildes auszuwählen. Entweder wählen Sie eines der vielen im Internet verfügbaren Plug-ins für Bild-Beschneidungen oder Sie erhalten eine eigene Implementierung.

Quelle

2016-07-13 11:31:43

danke, @le_m, und gibt es trotzdem wir können eine bestimmte aus dem Bild als Hintergrund festlegen. – learner

@RSN kann eine bestimmte was auswählen? Du meinst ein bestimmtes Bild von mehreren Auserwählten? –

ein bestimmter Ausschnitt aus dem Bild. Entschuldigung Tippfehler – learner

Bild als Seitenhintergrund aus der Array-Liste beheben Javascript

Antwort

Verwandte Themen