我有以下调整图像大小的函数。
promise
应该在我的代码的 onload
部分中解析,但由于某种原因它没有......
import Pica from 'pica';
const pica = new Pica();
export default ({ src, size }) =>
new Promise((resolve, reject) => {
const [width, height] = size.split('x');
const from = new Image();
const to = document.createElement('canvas');
const options = {
width,
height,
};
from.onload = async () => {
try {
const canvas = await pica.resize(from, to, options);
resolve(canvas);
} catch (e) {
reject(e);
}
};
from.src = src;
});
我使用此函数来获取一个图像的不同大小版本的数组。我使用 Promise.all()
来实现此目的。
这是我调用此函数的代码:
...
const img = ...
sizes.map(size => {
promisesArray.push(resizeImage({ img, size }));
});
Promise.all(promisesArray).then(data => console.log(data))
我尝试过 console.log(resizeImage({ img, size }))
,并得到了无法解析的 pending
状态的 promise 。
我还假设这是由于 Pica
造成的。于是我尝试简化一下功能,但也没成功:
// no extra code
export default ({ src, size }) =>
new Promise((resolve, reject) => {
const from = new Image();
from.onload = () => {
// what's wrong here?
resolve('hello');
};
from.src = src;
});
最佳答案
除了列出 onload
之外,您还应该始终为 onerror
添加监听器,因为 Image
可能无法加载。
如果您将 console.log
添加到 onerror
回调中,我怀疑您会发现您传入了无效的 src
您的一个或多个调用导致图像加载失败。
作为演示如何连接 onerror
回调的示例(忽略与您的问题无关的调整大小代码):
const loadImg = (src) => new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = (err) => reject(err);
img.src = src;
});
// This should succeed
loadImg('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7').then(
() => console.log('Image loaded!'),
() => console.log('Image failed!'),
);
// This will fail
loadImg('invalid-url').then(
() => console.log("How did that load?"),
() => console.log("That wasn't an image!"),
);
关于javascript - 为什么我的 promise 没有兑现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48794749/