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 기능을 시작하면, 여기에 500x500 이미지를 기본 이미지의 이전 값이 있습니다.

자르기 작업을 수행 할 때 새로운 사양을 얻지 못했습니다.

어떻게 새 src를 기반으로 img 요소를 새로 고칠 수 있습니까? "'?' + Math.random(); 추가"또는 날짜 문자열은 내가 찾은 유일한 것이지만 새로운 URL은 base64로 인코딩되어 작동하지 않습니다.

아이디어가 있으십니까?

Answer 1

1. 이미지를위한 컨테이너를 만들기 전에;

2. 이미지를 삭제하고 생성 한 컨테이너에 다른 이미지를 추가하십시오.

참고 : 이렇게하면 제거되므로 이미지의 요소에 대한 참조가 손실됩니다.

<div id="img_container"> 

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

</div> 

변경 스크립트 행 :

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

에 :

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

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

는

---

귀하의 HTML은에 비슷한 수 있어야 즉, 이미지, var img = $('#the_image')에 계속 언급을 피하십시오