gulp-webp конвертирует изображения с черным фоном. Как преобразовать в полностью прозрачный фон?

Я использую gulp-webp для преобразования изображений png в формат webp. Все работает плавно, и все изображения конвертируются в зависимости от настроек качества, которые я вставляю. Кроме фона. Изображения, преобразованные в webp, всегда имеют черный фон. Я попробовал поиграть с каналом alphaQuality, установив качество от 100 до более низкого. Никаких изменений не показывает.

Вот мой 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
person Linas M.    schedule 10.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я отвечаю на свой вопрос. Может, спасу кого-нибудь от возникшей у меня неразберихи. Как вы можете видеть в приведенном выше коде, я дал указание функции webpConvert преобразовать все файлы в папке img в webp:

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

Загвоздка заключалась в том, что у меня уже было несколько изображений webp, которые я ранее преобразовал вручную в папке scr / img. Таким образом, плагин gulp-webp взял эти изображения webp и дважды преобразовал их в webp. Это закрыло альфа-канал. Убедитесь, что у вас нет изображений webp в исходной папке, если вы используете этот плагин, или, по крайней мере, проинструктируйте функцию не конвертировать их снова.

person Linas M.    schedule 24.02.2020