AngularJS: speedUp opening of the big images (base64)

Question

i have one question about image uploading.

Maybe i do something wrong?

    $scope.photoChanged = function(files) {
    $scope.files = files;
    var reader = new FileReader();
    reader.onload = function(e) {
      $scope.imagecontent = e.target.result;
      if (!$scope.$$phase) {
        $scope.$apply();
      }
    };
    reader.readAsDataURL(files[0]);
   };

here i try to upload image into browser and view it (also then i use crop tool), but for huge images, for example as this: https://dl.dropboxusercontent.com/u/59666091/Fronalpstock_big.jpg

in IE (and not only in IE) this take a while, when i see image on the page

maybe there are some ways to speed up my fileuploading?

here you can test it: http://plnkr.co/edit/co6gFGe6pig3DCF9GQp1?p=preview

for 14MB file, I'd say 8sec upload speed is reasonable. I used Chrome. — Dave Alperovich, May 25 '15 at 08:41
@DaveAlperovich but for 2-4mb speed is a little bit to slow to... — brabertaser19, May 25 '15 at 08:51
Test your file upload speeds against this angular file uploader; it has a status bar that will show you progress. It is fairly efficient. http://nervgh.github.io/pages/angular-file-upload/examples/simple/ — Dave Alperovich, May 25 '15 at 09:07
@DaveAlperovich i do not need to upload directly, only browser preview — brabertaser19, May 25 '15 at 09:44
Oh, yeah I realize. This was a 2nd point of reference to study what upload speeds were with another tool that showsort progress rates. I don't have all files you tested with but this one seemed to load in "reasonable" time. — Dave Alperovich, May 25 '15 at 14:23

balfonso · Accepted Answer · 2015-05-27T11:19:50.790

1

Try cropping or resizing the image to a standard size before displaying it.. Thing is, you don't need a very large file just to display it on your browser..

please try this for crop: http://andyshora.com/angular-image-cropper.html

please try this for resize: https://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html

=======================================================================

<body ng-controller="ArticleCtrl">
    <h1>Hello Plunker, {{art}}!</h1>
    <input type="file" name="file" accept="image/*" onchange="angular.element(this).scope().photoChanged(this.files)" />
    <div id="mySpinner" class="spinner first"></div>
    <img width="100px" id="preview" />
  </body>


$scope.photoChanged = function(files) {
        $scope.files = files;
        var reader = new FileReader();
        reader.onload = function(e) {
          //$scope.imagecontent = e.target.result;

          var image = new Image();
          image.src = e.target.result;
          console.log(image);
          image.onload = function() {
              jQuery("#preview").attr('src', this.src);
          };

          if (!$scope.$$phase) {
            $scope.$apply();
          }
        };
        reader.readAsDataURL(files[0]);
      };

Hi brabertaser! I have modified your code on plunker a bit. But I'm not sure if it's gonna work as I don't have ie10 and 11 installed on my current machine but here's how it should look...

Thanks! Hope this helps :)

edited May 27 '15 at 11:19

answered May 25 '15 at 11:13

balfonso

611
1
9
17

maybe somehow i could use promises? so that image is loading in background process? becouse now all css animation stop, when i upload image in ie... – brabertaser19 May 27 '15 at 07:17
You've mentioned in your comments above, that you only need to use the image as a browser preview right? I really do think that to optimize the preview speed, you'll need to resize the image similar to this demo http://clientside-resize.labs.liip.ch/ and resize to a reasonable size that would match it's container or if you want you can make it a dynamic size by getting the width and height of the container (ex: elem.width and elem.height) then setting it as the new dimension for the image... Please look at this -> https://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html. – balfonso May 27 '15 at 08:32
By the way.. I'm not sure how you can use promises for the problem but it could be possible to pre-load your image in the background (im not 100% sure on this) on your root controller but I don't know how you'll implement it and I don't recommend it as well as it may have other complications in your app. – balfonso May 27 '15 at 08:34
for example try to upload in ie here http://plnkr.co/edit/8UNGUIdao56CtzHSbifp?p=preview this image https://dl.dropboxusercontent.com/u/59666091/19af71228a66376d950e32cc065ff250.png - it is really not so fast... later i use it with crop, so seems that i need original big size image – brabertaser19 May 27 '15 at 09:22
what version of IE are you using? – balfonso May 27 '15 at 10:09
hi brabertaser! I have modified your code on plunker and I've editted my answer... I've put the code below my first answer.. btw, I wasn't able to test the code on ie because I don't have the right version on my current machine but hope it still solve the problem. :) – balfonso May 27 '15 at 11:21
main trouble is in that: loader animation is 'paused' when i load my image and user didn't know what's happening... maybe i could somehow set to animation more priority? – brabertaser19 May 27 '15 at 12:24
http://stackoverflow.com/questions/30484349/ie-1011-show-css-or-even-gif-animation-while-loading-base64-image – brabertaser19 May 27 '15 at 14:08
hello http://plnkr.co/edit/ddpTosm68V3W9Nb8OCJa?p=preview maybe you have ideas how to refactor this code? – brabertaser19 May 28 '15 at 08:06
I checked the code, i see the spinner div but not the actual spinner. (the spinner doesn't show even before you upload an image) – balfonso May 28 '15 at 09:16
you can try using ng-show on both the spinner and the image... and using a $timeout to hide and show the spinner and the image 1. Set them both to initially to false. 2. Upon clicking the browse button, set show spinner to true. 3. Then at the end of the reader.onload, you can use $timeout to hide & show the spinner/image. Unfortunately, I wasn't able to test this because the spinner doesn't show on the plunker even before uploading your image. Hope this helps or at least give you an idea! – balfonso May 28 '15 at 11:32
1) spinner is there (http://prntscr.com/7ac6i4) 2) all you written is done before, but in ie browser tab get busy, and spinner is on pause... btw thx – brabertaser19 May 28 '15 at 11:59

AngularJS: speedUp opening of the big images (base64)

1 Answers1