[英]Javascript is very slow? When converting image files to base64
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 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
.当用户选择一个图像文件时,它会出现在 HTML 和集合的
$scope.image
。
Right after the user selects an image, the image is displayed on the HTML image.src = reader.result;
用户选择图像后,该图像将显示在 HTML
image.src = reader.result;
. . Works well and fast.
运行良好,速度快。
BUT, $scope.image = reader.result;
但是,
$scope.image = reader.result;
takes like 8 seconds to execute.执行大约需要 8 秒。 Why the image src set is fast but setting a simple string is slow?
为什么图像 src 设置很快,但设置一个简单的字符串很慢?
Even with few KB image it takes a lot of time..即使只有很少的 KB 图像,也需要花费很多时间..
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>
Data URLs are obsolete because they consume time and memory.数据 URL 已过时,因为它们消耗时间和内存。
Use Object URLs instead:改用对象 URL:
var image = document.getElementById("image");
image.src = URL.createObjectURL(files[0]);
Object URLs are much more efficient and faster.对象 URL 效率更高,速度更快。
For more information, see有关更多信息,请参阅
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.