Javascript очень медленно? При преобразовании файлов изображений в base64

Question

Я делаю базовую c загрузку изображения с использованием этого кода

$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>

Когда пользователь выбирает файл изображения, он появляется в HTML и набор $scope.image.

Сразу после того, как пользователь выбирает изображение, оно отображается на HTML image.src = reader.result;. Работает хорошо и быстро.

НО, $scope.image = reader.result; занимает около 8 секунд. Почему набор изображений sr c быстрый, а установка простой строки медленная?

Даже при небольшом размере изображения в КБ это занимает много времени ..

edit:

// ИЗОБРАЖЕНИЕ ОЖИДАЕТСЯ ОЧЕНЬ БЫСТРОМ

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

// Это займет много секунд, чтобы появиться

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

Answer 1

URL-адреса данных устарели, поскольку они занимают время и память.

Вместо этого используйте URL-адреса объектов:

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

URL-адреса объектов намного эффективнее и быстрее.

Для дополнительную информацию см.

• Справочник по MDN Web API - URL.createObjectURL ()