2017-12-28 41 views
1

Ich habe ein Bild-Uploader, die Vorschau ein Bild, das Sie auswählen, können Sie die Größe ändern, und zeigt dann die geänderte Version.Javascript Bild hochladen und Größe ändern Problem

Der ursprüngliche Code erlaubt es Ihnen, ein statisches Bild zu skalieren, also habe ich die Möglichkeit hinzugefügt, ein Bild hochzuladen, um dieses statische Bild zu ersetzen. (# Bild-3).

Beim Hochladen und Ändern der Größe wird jedoch immer noch das statische Bild in der geänderten Version angezeigt.

Ich bin nicht ganz sicher mit Javascript, und würde jede Hilfe zu schätzen wissen! Vielen Dank.

$(document).ready(function() { 
 

 

 
    $('#image-3').rcrop({ 
 
    minSize: [500, 500], 
 
    preserveAspectRatio: true, 
 

 
    preview: { 
 
     display: true, 
 
     size: [100, 100], 
 
     wrapper: '#custom-preview-wrapper' 
 
    } 
 
    }); 
 

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

 
     reader.onload = function(e) { 
 
     $('#image-3').attr('src', e.target.result); 
 

 

 
     } 
 

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

 
     $('#image-3').on('rcrop-changed', function() { 
 
     var srcOriginal = $(this).rcrop('getDataURL'); 
 
     var srcResized = $(this).rcrop('getDataURL', 50, 50); 
 

 
     $('#cropped-original').append('<img src="' + srcOriginal + '">'); 
 
     $('#cropped-resized').append('<img src="' + srcResized + '">'); 
 
     }); 
 

 

 
    } 
 
    } 
 

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

 
});
body { 
 
    margin: 0; 
 
    padding: 0px 
 
} 
 

 
main { 
 
    min-height: 500px; 
 
    display: block 
 
} 
 

 
pre { 
 
    overflow: auto; 
 
} 
 

 
.demo { 
 
    padding: 20px; 
 
} 
 

 
.image-wrapper { 
 
    max-width: 600px; 
 
    min-width: 200px; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
#image-4-wrapper .rcrop-outer-wrapper { 
 
    opacity: .75; 
 
} 
 

 
#image-4-wrapper .rcrop-outer { 
 
    background: #000 
 
} 
 

 
#image-4-wrapper .rcrop-croparea-inner { 
 
    border: 1px dashed #fff; 
 
} 
 

 
#image-4-wrapper .rcrop-handler-corner { 
 
    width: 12px; 
 
    height: 12px; 
 
    background: none; 
 
    border: 0 solid #51aeff; 
 
} 
 

 
#image-4-wrapper .rcrop-handler-top-left { 
 
    border-top-width: 4px; 
 
    border-left-width: 4px; 
 
    top: -2px; 
 
    left: -2px 
 
} 
 

 
#image-4-wrapper .rcrop-handler-top-right { 
 
    border-top-width: 4px; 
 
    border-right-width: 4px; 
 
    top: -2px; 
 
    right: -2px 
 
} 
 

 
#image-4-wrapper .rcrop-handler-bottom-right { 
 
    border-bottom-width: 4px; 
 
    border-right-width: 4px; 
 
    bottom: -2px; 
 
    right: -2px 
 
} 
 

 
#image-4-wrapper .rcrop-handler-bottom-left { 
 
    border-bottom-width: 4px; 
 
    border-left-width: 4px; 
 
    bottom: -2px; 
 
    left: -2px 
 
} 
 

 
#image-4-wrapper .rcrop-handler-border { 
 
    display: none; 
 
} 
 

 
#image-4-wrapper .clayfy-touch-device.clayfy-handler { 
 
    background: none; 
 
    border: 0 solid #51aeff; 
 
    border-bottom-width: 6px; 
 
    border-right-width: 6px; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 60px; 
 
    margin-top: 10px; 
 
} 
 

 
#update { 
 
    margin: 10px 0 0 60px; 
 
    padding: 10px 20px; 
 
} 
 

 
#cropped-original, 
 
#cropped-resized { 
 
    padding: 20px; 
 
    border: 4px solid #ddd; 
 
    min-height: 60px; 
 
    margin-top: 20px; 
 
} 
 

 
#cropped-original img, 
 
#cropped-resized img { 
 
    margin: 5px; 
 
}
<script src="https://rawgit.com/aewebsolutions/rcrop/master/dist/rcrop.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1" runat="server"> 
 
    <input type="file" id="imgInp" /> 
 
</form> 
 
<div class="demo"> 
 
    <div class="image-wrapper"> 
 
    <img id="image-3" src="https://raw.githubusercontent.com/aewebsolutions/rcrop/master/demos/images/demo.jpg"> 
 
    <div id="custom-preview-wrapper"></div> 
 
    <div id="cropped-resized"> 
 
     <h3>Images resized (50x50)</h3> 
 
    </div> 
 
    <div id="cropped-original"> 
 
     <h3>Images not resized (original size)</h3> 
 
    </div> 
 
    </div> 
 
</div>

Antwort