Javascript is very slow? When converting image files to base64

Question

I'm doing a basic image upload using this code

$scope.fileChanged = function () {
    var fileuploader = angular.element("#uploadFile");   
    var reader = new FileReader();
    reader.onload = function () {
        var image = document.getElementById("image");
        image.src = reader.result;
        image.style.opacity = 1;
        $scope.image = reader.result; 
    };
    var files = fileuploader[0].files;
    reader.readAsDataURL(files[0]);
    fileuploader.trigger('click');
};

html

<input type="file" ng-show="false" id="uploadFile" accept="image/*"
       onchange="angular.element(this).scope().fileChanged()" required>

When the user selects a image file, it appears in the HTML and set's $scope.image.

Right after the user selects an image, the image is displayed on the HTML image.src = reader.result;. Works well and fast.

BUT, $scope.image = reader.result; takes like 8 seconds to execute. Why the image src set is fast but setting a simple string is slow?

Even with few KB image it takes a lot of time..

edit:

// IMAGE APPEARS VERY FAST

<img src="../../../assets/img/gamification-icon.png" id="image"
     ng-click="uploadPicture()">

// This takes a lot of seconds to appear

 <div class="col-md-6">{{image}}</div>

The reason for the slowness is that you try to keep the base64 data in $scope — Ahmet Şimşek, Mar 10 '20 at 11:18
@AhmetŞimşek Are you sure it's about that? Then how should I do it then? — user12361681, Mar 10 '20 at 11:19
Out of interest, why are you setting the event with `onchange="angular.element(this).scope().fileChanged()"` as if you're accessing the scope from outside of the app? Is there a reason you're not using `ng-change="fileChange()"`? — Shaun E. Tobias, Mar 10 '20 at 13:37
@ShaunE.Tobias The `ng-model` directive and `ng-change` directives do not work with `` out of the box. See [How to enable `` to work with ng-model](https://stackoverflow.com/a/43074638/5535245). — georgeawg, Mar 10 '20 at 15:28

score 0 · Answer 1 · answered Mar 10 '20 at 15:52

Data URLs are obsolete because they consume time and memory.

Use Object URLs instead:

var image = document.getElementById("image");
image.src = URL.createObjectURL(files[0]);

Object URLs are much more efficient and faster.

For more information, see

MDN Web API Reference - URL.createObjectURL()

Javascript is very slow? When converting image files to base64

1 Answers1