Jimp - URI возвращаются из функции, но изображения не отображаются в src <img>
Я кодирую в Svelte и использую jimp, чтобы размыть изображение перед отображением. Однако я успешно размываю и возвращаю URI изображений (зарегистрированные и отображаемые в консоли), но изображения не отображаются там, где я вызываю функцию в<img> src
.
В частности:
У меня есть функция processImage:
const processImage = async imgMeta => {
const buf = Buffer.from(imgMeta.replace(/^data:image\/\w+;base64,/, ""), 'base64');
Jimp.read(buf, (err, image) => {
if (err) throw err;
else {
image.blur(20)
.getBase64(Jimp.AUTO, function (err, newImageURI) {
return newImageURI;
})}})
И я называю это в:
<img src={processedImage} alt="preview" />
Но изображение не отображается. Это шансы, как я ожидал, это должно сработать.
1 ответ
Решение
Произошла ошибка с возвратом значения из функции обратного вызова. ВnewImageURI
не будет возвращен.
Await synchronous и getBase64Async от Jimp - полезные решения:
newImageURI = await image.blur(20).getBase64Async(Jimp.AUTO);
return newImageURI;
А вызов функции в теле остается неизменным:
{#await processImage(item.files[0].preview)}
<p>...waiting</p>
{:then processedImage}
<img src={processedImage} alt="preview" />
{/await}
Я получил этот пробег.