Bild ersetzen bei Klick mit Bild auswählen

Question

Ich habe eine kleine Vorlage mit einem einfachen Header eingerichtet. Ich versuche, etwas Ähnliches wie eine Drag & Drop-Website zu erstellen, aber in diesem Fall wird das Layout gleich sein, nur der Inhalt ändert sich.

Wie gesagt, ich habe ein Kopfelement erstellt und ein Hintergrundbild gegeben

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

Um das Bild zu erhalten, auf Klick zu ändern, ich so etwas wie dies

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

ich tun konnte, habe ein Beispiel JSFiddle eingerichtet. Obwohl dies ähnlich zu dem ist, was ich tun möchte, möchte ich, anstatt zu einem fest codierten Bild zu wechseln, dem Benutzer erlauben, das Bild von seinem Computer auszuwählen. Also ein bisschen wie eine Bild-Upload-Option, aber in diesem Fall lade ich nichts hoch. Mein Ziel bei der Fertigstellung ist eine Schaltfläche "Speichern", die die HTML/CSS-Dateien für diese Updates generiert.

Also fragte ich mich, wie würde ich gehen, damit der Benutzer wählen kann, welches Bild er den Standard mit ersetzen möchte?

Danke

Answer 1

Was Sie tun möchten, ist knifflig. Hier ist eine mögliche Lösung.

Wie aus this question zitiert, können Sie möglicherweise den Client "upload" haben ihr Image für die 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" /> 

möglicherweise Dann werden die codierten Bild base64 verwenden und es in Ihren Hintergrund url laufen Parameter:

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

ich würde davon ausgehen, dass reader.result die data:base64;image/(type), Sachen am Anfang enthält, aber y Du wirst selbst damit experimentieren müssen.

Hier einiger Lesestoff:

• https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

• http://jsfiddle.net/0GiS0/Yvgc2/ (ein Beispiel für Filereader bei der Arbeit, nützlich sein könnte)

• http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api