javascript - JavaScript:如何按顺序加载图像
问题描述
对不起我的英语,这不是我的母语。
我正在尝试从输入文件中压缩多个图像。但是当我试图把
img.onload = function() {}
在包含文件序列的 for 循环中,追加的结果完全乱序。
我需要按顺序排列图像,因为我正在安装一个带有图像、公交车号和照片日期的 PDF。
原始图像太大,3MB+。生成的 .pdf 文件为 62MB。它不可用。
var filesInput = $("#file"); filesInput.on("change", function(e) {
$("#divImagesFrame").show();
/* Manipulação das fotos */
var files = e.target.files;
var result = $("#divImagesFrame");
var filesLength = this.files.length;
var page = 1;
var count = 6;
$("#blur, #pageName").html($("#txtCliente").val());
result.append("<div class='pageTitle'><div class='pageBox'>" + page + "</div><span>" + $("#txtCliente").val() + "<span class='localName'>" + $("#txtCampanha").val() + "</span></span></div>");
for (let i = 0; i < this.files.length; i++) {
qtdFotos++;
let url = URL.createObjectURL(this.files[i]);
let img = new Image();
img.src = url;
console.log("ID outside img.load: " + i);
img.onload = function(){
console.log("ID inside img.load: " + i);
var busNumber = files[i].name.toString().split(".")[0];
var dataFoto = files[i].lastModified;
var d = new Date(dataFoto);
d.toLocaleString();
var canvas = document.createElement('canvas');
canvas.width = 460;
canvas.height = 360;
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0,0, canvas.width, canvas.height);
var imageFile = canvas.toDataURL("image/JPEG", 1.0);
/* In this result.append, if I put the image source = img.src the order of images stay ok, but the size is much larger */
result.append("<div class='imageFrame' style='width:460px; border-radius:10px; height:360px; float:left; margin:14.01px 20px; box-shadow:1px 1px 3px 0.8px #999;'>" +
"<div style='float:left;border-radius:10px 10px 0 0; background:linear-gradient(-90deg,#105e86,#125e86); display:block; width:450px; height:40px; font-weight:550; font-size:23px; line-height:40px; padding-left:10px; color:#FFF;'>" + busNumber + "<span style='font-size:18px; float:right; margin-right:20px;'>" + d.toLocaleDateString() + "</span></div>" +
"<img width='460px' height='320px' style='border-radius:0 0 10px 10px; margin-bottom:5px;' src='" + imageFile + "'/></div>");
}
}
sammiCreateBook();
});
这是必须的:
这是img.load
完全乱序的结果。
我希望你能帮助我,非常感谢你。
问题解决了
嗨,大家好。谢谢你。问题已解决,使用 javascript 承诺验证每个功能是否已完成。再次感谢!
解决方案
- 将图像的 URL 存储在数组中
- 定义一个执行加载行为的函数(for循环内的块)
- 在函数的开头,您需要从该数组中获取第一个 URL 并将其删除
- 在函数体结束时,您需要再次调用该函数。
- 调用函数。
这是一个例子:
var images = [
'1.jpg',
'2.jpg',
'3.jpg',
];
var loadImage = function() {
if (!images.length) {
// Will be executed when all images are loaded
return;
}
var image = images.shift();
console.log('loading image ' + image);
// Your for-loop logic here
...
img.onload = function() {
console.log('image loaded ' + image);
// Your onload logic here ...
// -> important!
loadImage();
};
}
loadImage();
推荐阅读
- material-ui - 为什么在 Material UI V5 中不推荐使用 CSSBaseline 样式覆盖?
- java - 连续动画不开始
- ios - 在 UICollectionview 中选择任何其他单元格时取消选择默认选定单元格
- python - 如何用上下文管理器装饰 Python 函数?
- sql - SQL 错误 ORA-00923: 在预期的地方找不到 FROM 关键字
- jenkins-pipeline - 詹金斯:java.lang.NoSuchMethodError:在步骤[ArtifactoryGradleBuild,MavenDescript中找不到这样的DSL方法'$'
- nats.io - 使用 Web 套接字的 Nats 客户端连接错误
- pine-script - 如何获得与版本@2 相同结果的此脚本的版本@4
- c# - 命令更新迁移、Entity Framework 3.15、Net Core 3.1 中的错误
- spring-boot - 启用 Spring 输出 ANSI 在 Windows 终端上不起作用