イメージをクリックしてイメージを置き換えます

Question

基本的なヘッダーを持つ小さなテンプレートを設定しました。私はドラッグアンドドロップのウェブサイトの建物に似たものを作ろうとしていますが、この場合レイアウトは同じになり、内容が変わります。私が言うように

、私は私がこの

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

私のような何かを行うことができ、クリックに変更した画像を取得するには、ヘッダ要素を作成し、それを背景画像

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

を与えています例JSFiddleを設定しました。これは私がやりたいことと似ていますが、ハードコードされたイメージに変更するのではなく、ユーザーが自分のコンピュータからイメージを選択できるようにしたいと考えています。だから、画像アップロードの選択オプションのようなビットですが、この場合は何もアップロードしていません。完了の私の目標は、これらの更新のためのHTML/CSSファイルを生成する保存ボタンを持つことです。

私は、ユーザーがデフォルトと置き換えたい画像を選択できるようにするにはどうすればいいでしょうか？

ありがとうございました

Answer 1

あなたがしたいのはトリッキーです。これは可能な解決策です。 this questionから引用したよう

、あなたはおそらく、クライアントは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" /> 

そして、おそらくbase64でエンコードされた画像を使用して、バックグラウンドのURLにそれを実行しますパラメータ：

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

私は、reader.resultが先頭にdata:base64;image/(type),のものが含まれていることを前提としていますが、yあなた自身でこれを試してみる必要があります。

ここではいくつかの読み物です：

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

• http://jsfiddle.net/0GiS0/Yvgc2/（職場でのFileReaderをの例、有用である可能性）

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