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} 

Я получил этот пробег.

Другие вопросы по тегам