0

I know that theme was already actual and not just one time, but I can't find exactly what I need.

I have a function where I am making a call to another function. In that "another function" JS is changing source of image. The problem is that the next statement runs before image's source is changed yet. I am using now a setTimeout, but I want to make my code better and know how to deal with that. 

function readURL(input) { //--preview of uploaded image--

  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
          $('#image').attr('src', e.target.result);
          $('.foto_add').css('background-position','center'); 
          $('.foto_add').css('background-position-y','top');
          $('.foto_add').css('background-image', 'url(' + e.target.result + ')');

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

And then :

$("#avatar").change(function() {
      readURL(this); //--calling of preview uploaded image function--
 var $image = $('#image');   
$image.cropper({
          aspectRatio: 1,
          autoCropArea: 0.1,
          cropBoxResizable: false,
          guides: false,
          highlight: false,
          toggleDragModeOnDblclick: false,
          minCropBoxWidth: 200,
          minCropBoxHeight: 200,
          minCanvasHeight: 200,
          zoomable: true,
          viewMode: 1,//can't enter at empty canvas
          dragMode: 'move',
          responsive: true,
          imageSmoothingEnabled: false,
          imageSmoothingQuality: 'high',
          ready: function () {
            $image.cropper('setCanvasData', canvasData);
            $image.cropper('setCropBoxData', cropBoxData);
          }
        });
priMo-ex3m
  • 1,072
  • 2
  • 15
  • 29
  • 1
    Call cropper in the onload of the image: `$("#avatar").change(function() { readURL(this); });` .... `reader.onload = function(e) { var $image = $('#image'); $image.on("load",function() { $image.cropper({.... }); $image.attr('src', savedTargetResult); .... ` – mplungjan Jan 29 '18 at 14:05
  • Ok, it seems to be like a lifehack. But I want to know on that example, how can I implement here a callback function, that will wait `readURL` function executing, and just after that call for a next statement? Thanks. – priMo-ex3m Jan 29 '18 at 14:07
  • See updated comment or have a look at promises – mplungjan Jan 29 '18 at 14:09
  • `how can I implement here a callback ` just add another parameter to your function, eg.. `function readURL(input, cb)` and then simply at the end of the `onload` just call .. `cb();` and then of course just add your callback as the second parameter to your `readURL`,.. ps. This does not include any error handling, callbacks can get messy here, I would suggest you look into promises and avoid callbacks if you can. – Keith Jan 29 '18 at 14:12
  • 1
    You can do something like this https://jsfiddle.net/ay3vdoup/ – Jorge Mejia Jan 29 '18 at 14:24
  • @JorgeMejia it looks pretty fine, but it anyway executes next line before function ends. :/ – priMo-ex3m Jan 29 '18 at 14:30
  • Here is an other example you can use reader.onloadend and then execute your callback https://jsfiddle.net/api/mdn/ – Jorge Mejia Jan 29 '18 at 14:48
  • @JorgeMejia last jsfiddle is empty – priMo-ex3m Jan 29 '18 at 14:54
  • 1
    Sorry https://jsfiddle.net/4Lrwsbgo/ – Jorge Mejia Jan 29 '18 at 15:08

0 Answers0