我已经检查了 Stack Overflow 中与我的问题相关的所有问题,但找不到解决问题的方法。
我想做的是;用户尝试上传图片,他们在客户端调整大小,然后上传。我用过 Pica library .一个文件一切正常。但是,当我将其更改为多个文件时,我得到了最后一张图片的副本。
发生了什么:循环 1 到 N 次 -> resizeImg N 次
理想的解决方案:循环 1 -> resizeImg(1) -> 循环 2 -> resizeImg(2)
如有任何帮助,我们将不胜感激。
我的代码如下:
function resizeImg(source) {
img = new Image;
img.src = source;
img.onload = function() {
width = img.naturalWidth;
height = img.naturalHeight;
ratio = Math.min(targetWidth / width, targetHeight / height);
resizer = window.pica();
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
ctx.canvas.width = width * ratio;
ctx.canvas.height = height * ratio;
resizer.resize(img, canvas, {
quality: 3,
alpha: true,
unsharpAmount: 0
}).then(result => resizer.toBlob(result, 'image/jpeg', 0.90)).then(blob => imgBlobArray.push(blob)).then(function() {
console.log(i);
console.log(imgBlobArray);
});
};
}
document.getElementById('select').onchange = function(evt) {
for (i = 0; i < this.files.length; i++) {
resizeImg(window.URL.createObjectURL(this.files[i]));
}
}
最佳答案
问题是你没有为 resizeImg
的每次调用单独绑定(bind) img
- 你没有 var
或 const
或 let
在第一次使用 img
之前。您正在隐式创建一个全局变量。所以,对于解释器来说,它看起来像
var img;
function resizeImg(source) {
img = new Image;
img.src = source;
img.onload = function() {
img
正在不断重新分配。因此,在所有迭代之后,img
最终将仅最后一个使用 resizeImg
创建的 img
- 对其他 Image
已丢失。
因此,始终显式声明变量以确保每次调用 resizeImg
时都有一个单独的 img
绑定(bind)。对所有其他变量也执行相同的操作,否则它们将是隐式全局的。
function resizeImg(source) {
const img = new Image;
img.src = source;
img.onload = function() {
const width = img.naturalWidth;
const height = img.naturalHeight;
const ratio = Math.min(targetWidth / width, targetHeight / height);
const resizer = window.pica();
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.canvas.width = width * ratio;
ctx.canvas.height = height * ratio;
resizer.resize(img, canvas, {
quality: 3,
alpha: true,
unsharpAmount: 0
}).then(result => resizer.toBlob(result, 'image/jpeg', 0.90)).then(blob => imgBlobArray.push(blob)).then(function() {
console.log(i);
console.log(imgBlobArray);
});
};
}
document.getElementById('select').onchange = function(evt) {
for (let i = 0; i < this.files.length; i++) {
resizeImg(window.URL.createObjectURL(this.files[i]));
}
}
关于javascript - 如何同步调用异步 JavaScript 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50518002/