我正在使用Filereader API来显示照片上传的小缩略图。但是我有一个问题。当您上传非常大的图像并上传其中一些图像时,它开始滞后。缩略图很小,但是文件太大。有没有办法来解决这个问题?这是我的JavaScript:
document.querySelector('input').addEventListener('change', function(e){
var files = e.target.files;
for(var i = 0; i < files.length; i++){
var f = files[i];
var reader = new FileReader();
reader.onload = (function(tf){
return function(evt){
document.querySelector('.thumbs').innerHTML += '<div class="thumb" style="background-image: url('+evt.target.result+')"></div>';
}
})(f);
reader.readAsDataURL(f);
}
});
您可以在这里进行测试:https://jsfiddle.net/snx79yw2/1/。
例如,我用6000x4000张照片对其进行了测试,当超过4张,5张时,它们开始滞后(而且我的PC相当不错,因此不应那样滞后)。
带有滞后的BTW我指的是放慢速度,冻结等,而不是实际的滞后。
我找到了this post,但我真的不知道如何从该答案中实施解决方案。提前谢谢!
最佳答案
本示例在将其显示在缩略图列表中之前,使用“画布”将图像调整为最大宽度为127px。
document.querySelector('input').addEventListener('change', function(e){
var files = e.target.files;
for(var i = 0; i < files.length; i++){
var f = files[i];
var reader = new FileReader();
reader.onload = (function(tf) {
return function(evt) {
// resize the image before using the resolved dataURL to set the thumbnail src
resize(evt.target.result, 127, function(dataURL) {
document.querySelector('.thumbs').innerHTML += `<img class="thumb" src="${dataURL}" />`;
});
}
})(f)
reader.readAsDataURL(f);
}
});
/**
* usage resize( dataURL:src, int:maxWidth, function:callback)
*/
function resize(src, maxWidth, callback) {
var img = document.createElement('img');
img.src = src;
img.onload = () => {
var oc = document.createElement('canvas');
var ctx = oc.getContext('2d');
// resize to [maxWidth] px
var scale = maxWidth / img.width;
oc.width = img.width * scale;
oc.height = img.height * scale;
ctx.drawImage(img, 0, 0, oc.width, oc.height);
// convert canvas back to dataurl
callback(oc.toDataURL());
}
}
.thumbs{background: #222;border-radius: 5px;white-space: nowrap;overflow-x: scroll;padding: .25rem;}
.thumb{height: 3rem;width: 3rem;border-radius: 3px;background-size: cover;background-position: center center;background-repeat: no-repeat;display: inline-block;margin: .25rem .25rem calc(.25rem - 4px);}
<input type="file" multiple />
<div class="thumbs"></div>
关于javascript - Filereader图片缩略图滞后,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45966726/