gulp-webp转换具有黑色背景的图像。如何转换为完全透明的背景？

Question

我正在使用gulp-webp将png图像转换为webp格式。一切正常，所有图像都将根据我插入的质量设置进行转换。除了背景。转换为webp的图像始终具有黑色背景。我尝试通过将质量从100设置为较低的水平来使用alphaQuality通道。它没有显示任何更改。

这是我的gulpfile.js：

const gulp = require("gulp"),
imagemin = require("gulp-imagemin"),
webp = require("gulp-webp");

const { src, dest, watch, series, parallel, task } = require("gulp");

const themename = "portfolio",
  Root = `../../${themename}`;

const sources = {
  src: `${Root}/src/`,
  scss: `${Root}/src/scss/`,
  js: `${Root}/src/js/`,
  img: `${Root}/src/img/`,
  webfonts: `${Root}/src/webfonts/`
};
const distribution = {
  dist: `${Root}/dist/`,
  css: `${Root}/dist/css/`,
  js: `${Root}/dist/js/`,
  img: `${Root}/dist/img/`,
  webfonts: `${Root}/dist/webfonts/`
};

const webpConvert = () => {
  return src(`${sources.img}**`)
    .pipe(webp({}))
    .pipe(dest(distribution.img));
}

task("webpConvert", webpConvert);

我将不胜感激任何有关如何转换具有透明背景的webp的建议。

Answer 1

我正在回答自己的问题。也许我会让某人摆脱混乱。如您在上面的代码中看到的，我指示webpConvert函数将img文件夹中的所有文件都转换为webp：

const webpConvert = () => {
  return src(`${sources.img}**`)
    .pipe(webp({}))
    .pipe(dest(distribution.img));
}

收获是我早先在scr / img文件夹中已经有一些手动转换的webp图像。因此，gulp-webp插件将这些webp图像复制到webp中。这遮盖了alpha通道。请确保，如果您正在使用此插件，或者您至少指示该函数不要再次转换它们，则源文件夹中没有任何webp图像。