base64でsrcを変更した後にイメージ要素をリフレッシュ

Question

私は小さなプロジェクトでjquery cropboxを使用しています。 最初に<img>がデフォルトイメージです。次に、イメージをローカルに保存されたイメージに変更するためのアップロードとFileReaderを行います。この

$('#selectfiledialog').change(function(evt){ 
    var tgt = evt.target || window.event.srcElement, 
     files = tgt.files; 

    if (FileReader && files && files.length) { 
     var fr = new FileReader(); 
     fr.onload = function() { 
      $('#the_image').attr('src', fr.result); 
     } 
     fr.readAsDataURL(files[0]); 
    } 
}); 

よう

はしかし、私はこの画像にcroping機能を開始しますと、それは、ここでは500×500の画像をデフォルトの画像の古い値を持っています。

私が作物をするとき、それは新しいスペックを持っていません。

新しいsrcに基づいてimg要素を更新するにはどうすればよいですか？ "'?' + Math.random();を追加"または日付文字列は私が見つけた唯一のものですが、新しいURLはbase64でエンコードされているため動作しません。

アイデア？

Answer 1

1。すべての前にイメージのコンテナを作成します。

2。イメージを削除し、作成したコンテナに別のイメージを追加します。

注：これを行うと、イメージの要素への参照が失われるため、削除されます。スクリプト行

<div id="img_container"> 

    <img id="the_image" src=""/> 

</div> 

変更：すなわち

---

あなたのHTMLがに似なければなりません、var img = $('#the_image')、画像への継続的な言及を避ける

$('#the_image').attr('src', fr.result); 

に：

$('#the_image').remove(); 

$('img_container')append('<img id="the_image" src="' + fr.result + '"/>');