Uruchomienie skryptu js po władowaniu zdjęcia.

0

Mam sobie taki prosty skrypt dzięki któremu mogę wyświetlić zdjęcie przed wysłaniem go na serwer:



	        $(document).ready(function(){
	  function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('.blah').attr('src', e.target.result);
                
               
     
            }
            
            reader.readAsDataURL(input.files[0]);
            
		   
        }
 
    }
    
    $("#imgInp").change(function(){
        readURL(this);
        
        
     setTimeout(function()
				{ 

   			  var obr = document.getElementById("blah");
				  var sze = obr.width;
				  var wys = obr.height;
				  var add = sze / wys; 
				
				
				
					var iloraz = sze / wys;
					var jeden = 1;
						
						
						if(iloraz < jeden)
						{
				    	
				    	
							var ws =120;
							$('.blah').attr("width","120");
							$('.nob').css("width","120px");
							$(".blah").imgAreaSelect({ persistent: true, resizable:true,minWidth: ws, minHeight: ws,maxWidth: ws, maxHeight: ws,  aspectRatio: "1:1",autoHide:false, x1: 0, y1: 0, x2: ws, y2: ws, handles: false});
							
							var ias = $(".blah").imgAreaSelect({ instance: true });
							getSelection ([noScale]);
				
				     } 
						
						
				    if(iloraz > jeden)
				    {
				
							if(sze >120)
							{
							var wawys = wys;
							}
							else{
							
					    				var wawys = wys * 100 / 40;
					    				$('.blah').attr("width","300");
								      $('.nob').css("width","300px");
					
					
										$(".blah").imgAreaSelect({ persistent: true, resizable:false ,minWidth: wawys, minHeight:wawys,maxWidth: wawys, maxHeight: wawys,  aspectRatio: "1:1",autoHide:false, x1: 0, y1: 0, x2: wawys, y2: wawys, handles: false});
									
										var ias = $(".blah").imgAreaSelect({ instance: true });
										getSelection ([noScale]);
				    				}
				    	
							     
				
				     }
     
 }, 500);
     
     
        
    });
    
      


    
	 }); 
	 
	


Problem w tym skrypcie jest taki że linijka odpowiedzialna za włączenie idpowiedniej funkcji imgAreaSElect czyli np ta:

$(".blah").imgAreaSelect({ persistent: true, resizable:true,minWidth: ws, minHeight: ws,maxWidth: ws, maxHeight: ws,  aspectRatio: "1:1",autoHide:false, x1: 0, y1: 0, x2: ws, y2: ws, handles: false});

Włącza się oczywiście, ale nie zawsze nadąży nad władowaniem się zdjęcia co skutkuje po prostu nie uruchomieniem jej na odpowiednim zdjęciu, w sumie to samo tyczy się funkcji zmiany styli css i atrybutu, tyle że tymczasowo rozwiązałem to tym że skrypt uruchamiam się po 0,5 sekundzie; /. Problem jednak dalej istnieje, bo o ile poł mb zdjęcia "zdążą" się władować przed uruchomieniem skryptu o tyle 1 mb już nie. Co mam zrobić?

0

podepnij onload do tego obrazka jeszcze

0

Podłączyłem z funkcją readURL, ale cos mi nie wychodzi chyba ; / jak to zrobić poprawnie?

0

No to przerzuć tam ten kod, który chcesz wykonać.

0

Próbowałem nic z tego ; /

0

Pokaż kod w którym "próbowałeś"

0


	        $(document).ready(function(){
	  function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('.blah').attr('src', e.target.result);
                
               setTimeout(function()
				{ 

   			  var obr = document.getElementById("blah");
				  var sze = obr.width;
				  var wys = obr.height;
				  var add = sze / wys; 
				
				
				
					var iloraz = sze / wys;
					var jeden = 1;
						
						
						if(iloraz < jeden)
						{
				    	
				    	
							var ws =120;
							$('.blah').attr("width","120");
							$('.nob').css("width","120px");
							$(".blah").imgAreaSelect({ persistent: true, resizable:true,minWidth: ws, minHeight: ws,maxWidth: ws, maxHeight: ws,  aspectRatio: "1:1",autoHide:false, x1: 0, y1: 0, x2: ws, y2: ws, handles: false});
							
							var ias = $(".blah").imgAreaSelect({ instance: true });
							getSelection ([noScale]);
				
				     } 
						
						
				    if(iloraz > jeden)
				    {
				
							if(sze >120)
							{
							var wawys = wys;
							}
							else{
							
					    				var wawys = wys * 100 / 40;
					    				$('.blah').attr("width","300");
								      $('.nob').css("width","300px");
					
					
										$(".blah").imgAreaSelect({ persistent: true, resizable:false ,minWidth: wawys, minHeight:wawys,maxWidth: wawys, maxHeight: wawys,  aspectRatio: "1:1",autoHide:false, x1: 0, y1: 0, x2: wawys, y2: wawys, handles: false});
									
										var ias = $(".blah").imgAreaSelect({ instance: true });
										getSelection ([noScale]);
				    				}
				    	
							     
				
				     }
     
 }, 500);
     
            }
            
            reader.readAsDataURL(input.files[0]);
            
		   
        }
 
    }
    
    $("#imgInp").change(function(){
        readURL(this);

        
    });
   
	 }); 
	 

							

1 użytkowników online, w tym zalogowanych: 0, gości: 1