Question

我有一个关于图片上传的问题。

也许我做错了什么？

    $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]);
   };

在这里我尝试将图像上传到浏览器并查看它（然后我使用裁剪工具），但对于巨大的图像，例如：https://dl.dropboxusercontent.com/u/59666091/Fronalpstock_big.jpg

IE中的

（而不仅仅是在IE中）这需要一段时间，当我在页面上看到图像时

也许有一些方法可以加快我的文件上传速度？

在这里你可以测试它：http://plnkr.co/edit/co6gFGe6pig3DCF9GQp1?p=preview

Answer 1

在显示之前尝试裁剪或调整图像大小到标准尺寸。事实上，你不需要一个非常大的文件只是为了在你的浏览器上显示它..

请尝试此作物： http://andyshora.com/angular-image-cropper.html

请尝试调整大小： 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]);
      };

嗨brabertaser！我已经在plunker上修改了你的代码了。但是我不确定它是否会起作用，因为我没有在我当前的机器上安装ie10和11但是它应该看起来如何......

谢谢！希望这会有所帮助：）

AngularJS：speedUp打开大图像（base64）

1 个答案: