27 lines
		
	
	
		
			903 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			27 lines
		
	
	
		
			903 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
var input     = document.getElementById('save_avatar');
 | 
						|
var container = document.getElementById('img-container');
 | 
						|
var cropImage = document.getElementById('img-cropped');
 | 
						|
var cropped   = document.getElementById('save_hidden');
 | 
						|
 | 
						|
input.addEventListener('change', function (e) {
 | 
						|
    if (!input.files || !input.files[0]) return;
 | 
						|
    var reader = new FileReader()
 | 
						|
    reader.onload = function (e) {
 | 
						|
        container.style = 'display: block';
 | 
						|
        cropImage.setAttribute('src', e.target.result);
 | 
						|
 | 
						|
        function update() {
 | 
						|
            var croppedCanvas = cropper.getCroppedCanvas();
 | 
						|
            cropped.value = croppedCanvas.toDataURL();
 | 
						|
            input.files = undefined;
 | 
						|
        }
 | 
						|
        var cropper = new Cropper(cropImage, {
 | 
						|
            aspectRatio: 1,
 | 
						|
            viewMode: 1,
 | 
						|
            cropend: update,
 | 
						|
            ready: update,
 | 
						|
        })
 | 
						|
    }
 | 
						|
    reader.readAsDataURL(input.files[0]);
 | 
						|
});
 |