gpt4 book ai didi

javascript - AngularJS:speedUp打开大图(base64)

转载 作者:行者123 更新时间:2023-11-30 00:28:46 25 4
gpt4 key购买 nike

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

也许我做错了什么?

    $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

最佳答案

在显示之前尝试裁剪图像或将其调整为标准尺寸。事实是,您不需要非常大的文件就可以在浏览器上显示它。

请试试这个裁剪: 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,但它应该是这样的......

谢谢!希望这会有所帮助:)

关于javascript - AngularJS:speedUp打开大图(base64),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30397634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com