이미지에서 필터 변경

이미지에 필터를 추가하려고합니다. 일반 입력 = 파일로 파일을 업로드 할 수 있습니다. JQ 스크립트는 2 개의 이미지를 보여줍니다. 미리보기와 필터가있는 미리보기가 있습니다.이미지에서 필터 변경

이제 필터를 선택하면 모두 좋습니다. 그러나 필터를 바꾸고 싶을 때 구형 필터가 돌아 오거나 필터 스택과 이미지가 계속 커지므로 커다란 문제가됩니다.

이미지를 재설정하고 새 필터를 추가 할 수있는 방법이 있습니까?

<form id="form1" runat="server"> 
    <input type="text" name="title" id="title" placeholder="title" formenctype="multipart/form-data" /><br /><br /> 

    <input type='file' id="imgInp" /><br /><br /> 

    <select name="filter" id="filter"><br /><br /> 
     <option value="Original">Original</option> 
     <option value="1977">1977</option> 
     <option value="Brannan">Brannan</option> 
     <option value="Gotham">Gotham</option> 
     <option value="Hefe">Hefe</option> 
     <option value="Inkwell">Inkwell</option> 
     <option value="Kelvin">Lord Kelvin</option> 
     <option value="Nashville">Nashville</option> 
     <option value="PRO">X-PRO II</option> 
    </select><br /><br /> 
    <img id="blah" src="#" alt="your image" class="filter"/> 
    <img id="preview" src="#" alt="your image" class="filter"/> 
</form>

그리고 내 스크립트 : 여기

link 내 코드입니다 :

이

내가 사용되는 필터 코드 원본 이미지를 복원 할 때

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      jQuery('#blah').attr('src', e.target.result); 
      jQuery('#preview').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

jQuery("#imgInp").change(function(){ 
    readURL(this); 
}); 

jQuery("#filter").change(function() 
{ 
    var filterName = jQuery('#filter').find(":selected").text(); 
    var src = jQuery('#preview').attr('src');  

    jQuery("#blah").attr("src", src);  

    jQuery("#blah").attr("data-filter", filterName); 
    jQuery('.filter').filterMe(); 

});

출처

2015-01-14 Taacoo

을 수행해야 저장된 data 개체도 제거하십시오.

jQuery("#blah").removeData();

데모 jsfiddle here.

출처

2015-01-14 15:34:37 zord

이미지에서 필터 변경

답변

관련 문제