Jimp

Question

我在 Svelte 中编码并使用 jimp 在显示之前模糊图像。但是，我成功地模糊和 return 了图像的 URI（已记录并在控制台中显示了 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" />

但是图像没有渲染。这是赔率，正如我所料它应该有效。

Answer 1

回调函数返回的值出错。 newImageURI 不会返回。

等待同步和 Jimp 的 getBase64Async 是有用的解决方案：

newImageURI = await image.blur(20).getBase64Async(Jimp.AUTO);
return newImageURI;

并且body中的函数调用保持不变：

{#await processImage(item.files[0].preview)} 
<p>...waiting</p> 
{:then processedImage}
<img src={processedImage} alt="preview" /> 
{/await}

我知道了运行。

Jimp - 从函数返回 URI，但图像未在 <img> 的 src 中呈现

Jimp - URIs are returned from the function but the images are not rendered in the <img>'s src

image

svelte