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

【问题标题】：gulp-webp converts images with a black background. How to convert to a fully transparent background?gulp-webp 转换具有黑色背景的图像。如何转换为完全透明的背景？
【发布时间】：2020-05-25 15:36:02
【问题描述】：

我正在使用 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 转换为透明背景的建议，我将不胜感激。

【问题讨论】：

标签： image gulp transparency webp

【解决方案1】：

我正在回答我自己的问题。也许我会从我的困惑中拯救某人。正如您在上面的代码中看到的，我指示 webpConvert 函数将 img 文件夹中的所有文件转换为 webp：

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

问题是我已经在我的 scr/img 文件夹中手动转换了一些 webp 图像。所以 gulp-webp 插件把那些 webp 的图片复制成 webp。这掩盖了阿尔法通道。如果您正在使用此插件，请确保您的源文件夹中没有任何 webp 图像，或者至少指示函数不要再次转换它们。

【讨论】：