cropping.js 903 B

123456789101112131415161718192021222324252627
  1. var input = document.getElementById('save_avatar');
  2. var container = document.getElementById('img-container');
  3. var cropImage = document.getElementById('img-cropped');
  4. var cropped = document.getElementById('save_hidden');
  5. input.addEventListener('change', function (e) {
  6. if (!input.files || !input.files[0]) return;
  7. var reader = new FileReader()
  8. reader.onload = function (e) {
  9. container.style = 'display: block';
  10. cropImage.setAttribute('src', e.target.result);
  11. function update() {
  12. var croppedCanvas = cropper.getCroppedCanvas();
  13. cropped.value = croppedCanvas.toDataURL();
  14. input.files = undefined;
  15. }
  16. var cropper = new Cropper(cropImage, {
  17. aspectRatio: 1,
  18. viewMode: 1,
  19. cropend: update,
  20. ready: update,
  21. })
  22. }
  23. reader.readAsDataURL(input.files[0]);
  24. });