Конвертация картинки в WEBP формат.

Nikolas

Конвертирую картинку JPG формата в WEBP формат, модулем "Обработка изображений" ,а конкретно кубиком "Изменить формат изображения".

Прикол в том что картинка получается с сильным розовым оттенком, особенно это заметно на светлых картинках (например изображение заснеженных гор).

Вопрос: Модуль "Изменить формат изображения" умеет правильно конвертить в формат WEBP ?

gurkin4

https://www.npmjs.com/package/webp-converter

Nikolas

@gurkin4 said in Конвертация картинки в WEBP формат.:

webp-converter

Поставил npmjs модуль в бас на node 18.
Записал jpg картинку в формате base64 в переменную [[FILE_CONTENT]]
И использую и офиц доков такой пример для:
Convert base64 image to webpbase64 image

const webp=require('webp-converter');
const path=[[FILE_CONTENT]]
function get_webpbase64(path) {
fs.readFile(path, function (error, data) {
  if (error) {
    throw error;
  } else {
    let buf = Buffer.from(data);
    let dataBase64 = Buffer.from(buf).toString('base64');
      // base64str of image
    // base64str image type jpg,png ...
    //option: options and quality,it should be given between 0 to 100
    let result = webp.str2webpstr(dataBase64,"jpg","-q 80");
    result.then(function(result) {
      // you access the value from the promise here
      console.log(result)
    });
  }
});
}
// use the default temp path for conversion
get_webpbase64("./nodejs_logo.jpg")
// use the custom temp path for conversion
get_webpbase64("./nodejs_logo.jpg","/home/user/Desktop/webp/temp")

Но данный код выдает ошибку:

[441746869] [21:48:30] Поток №1 : ReferenceError: fs is not defined

Fox

@Nikolas said in Конвертация картинки в WEBP формат.:

Но данный код выдает ошибку:

Она означает, что переменная fs не объявлена. В вашем примере кода nodejs выполняет чтение файла по пути, который вы указываете. const path это (внезапно) путь до файла

Nikolas

@Fox точно, спасибо ,не задал вар fs.
Но тут другая проблема, в переменную [[ITOG]] не сохраняется ничего (она пустая):

const webp=require('webp-converter');
const fs=require('fs');
const path=[[FILE_CONTENT]];
function get_webpbase64(path) {
fs.readFile(path, function (error, data) {
  if (error) {
    throw error;
  } else {
    let buf = Buffer.from(data);
    let dataBase64 = Buffer.from(buf).toString('base64');
      // base64str of image
    // base64str image type jpg,png ...
    //option: options and quality,it should be given between 0 to 100
    let result = webp.str2webpstr(dataBase64,"jpg","-q 80");
    [[ITOG]]=result;
    result.then(function(result) {
      // you access the value from the promise here
          console.log(result)
	    });
  }
});
}
// use the default temp path for conversion
get_webpbase64("./nodejs_logo.jpg")
// use the custom temp path for conversion
get_webpbase64("./nodejs_logo.jpg","/home/user/Desktop/webp/temp")

Fox

@Nikolas said in Конвертация картинки в WEBP формат.:

Но тут другая проблема, в переменную [[ITOG]] не сохраняется ничего (она пустая):

Переменная [[FILE_CONTENT]] создаётся автоматически в действии "Читать Файл", следовательно в ней у вас содержание файла, а не путь до него.

Nikolas

@Fox поставил

const path=[[PYT]];

где в перем [[PYT]] присвоено это: C:\Users\username\Downloads\777\1c.jpg
И так же [[ITOG]] пустая.

Fox

@Nikolas said in Конвертация картинки в WEBP формат.:

@Fox поставил
const path=[[PYT]];
где в перем [[PYT]] присвоено это: C:\Users\username\Downloads\777\1c.jpg
И так же [[ITOG]] пустая.

В вашей переменной промис, поставьте её после then.

Nikolas

This post is deleted!

Nikolas

@Fox said in Конвертация картинки в WEBP формат.:

then
Также в [[ITOG]] пусто

const webp=require('webp-converter');
const fs=require('fs');
const path=[[PYT]];
function get_webpbase64(path) {
fs.readFile(path, function (error, data) {
  if (error) {
    throw error;
  } else {
    let buf = Buffer.from(data);
    let dataBase64 = Buffer.from(buf).toString('base64');
      // base64str of image
    // base64str image type jpg,png ...
    //option: options and quality,it should be given between 0 to 100
    let result = webp.str2webpstr(dataBase64,"jpg","-q 80");
        result.then(function(result) {
         [[ITOG]]=result;
      // you access the value from the promise here
          console.log(result)
	    });
  }
});
}
// use the default temp path for conversion
get_webpbase64("./nodejs_logo.jpg")
// use the custom temp path for conversion
get_webpbase64("./nodejs_logo.jpg","/home/user/Desktop/webp/temp")

Nikolas

@Fox может там нужно еще подключить в бас npm-модуль для работы с файловой системой ?

Fox

@Nikolas said in Конвертация картинки в WEBP формат.:

@Fox просто весь код не стал сюда скидывать, естессно что в коде поменял, но эффекта нет, [[ITOG]] -пустой :

А вы читали вообще свой код то? У вас идёт объявление функции function get_webpbase64(path) {..., а в конце кода вызов этой функции с атрибутами get_webpbase64("./nodejs_logo.jpg")

Nikolas

@Fox

Объявили в начале function get_webpbase64(path)
Поэтому удалил внизу. Но результ пустой.

const webp=require('webp-converter');
const fs=require('fs');
const path=[[PYT]];
function get_webpbase64(path) {
fs.readFile(path, function (error, data) {
  if (error) {
    throw error;
  } else {
    let buf = Buffer.from(data);
    let dataBase64 = Buffer.from(buf).toString('base64');
      // base64str of image
    // base64str image type jpg,png ...
    //option: options and quality,it should be given between 0 to 100
    let result = webp.str2webpstr(dataBase64,"jpg","-q 80");
        result.then(function(result) {
         [[ITOG]]=result;
      // you access the value from the promise here
          console.log(result)
	    });
  }
});
}

Fox

@Nikolas said in Конвертация картинки в WEBP формат.:

@Fox

Объявили в начале function get_webpbase64(path)
Поэтому удалил внизу. Но результ пустой.

Вы вообще не понимаете что делаете?

Nikolas

@Fox
Пробовал экранировать слеши в пути. В перем [[PYT]] поставил:

C:/\Users/\username/\Downloads/\777/\1c.jpg

Но [[ITOG]] - пустой

Код

const webp = require('webp-converter');
const fs = require('fs').promises;

async function getWebpBase64(path) {
  const data = await fs.readFile(path);
  const buf = Buffer.from(data);
  const dataBase64 = Buffer.from(buf).toString('base64');
  // base64str of image
  // base64str image type jpg,png ...
  //option: options and quality,it should be given between 0 to 100
  return webp.str2webpstr(dataBase64, 'jpg', '-q 80');
}

async function main() {

  const path = [[PYT]];
  
  const result = await getWebpBase64(path);
  console.log(result);
  
  [[ITOG]] = result;
}

main();

? Offline

@Nikolas said in Конвертация картинки в WEBP формат.:

main();

await main();

Nikolas

@UserTrue said in Конвертация картинки в WEBP формат.:

await main();

Спасибо. Заработало, но есть проблема! получаю виде строки base64 в [[ITOG]] , и когда сохраняю этот base64 в файл, то файл webp имеет размер 19 KB, а ориг файл jpg весит 20 кб....то есть сжатие 5%, хотя по идее файл webp должен иметь сжатие оч сильное (в ~3 -4 раза) с тем же качеством картинки.

Менял параметр -q 80 на 30 и менее. Но это влияет только на качество картинки, но не на "сжатие веса".

Код:

const webp = require('webp-converter');
const fs = require('fs').promises;

async function getWebpBase64(path) {
  const data = await fs.readFile(path);
  const buf = Buffer.from(data);
  const dataBase64 = Buffer.from(buf).toString('base64');
  // base64str of image
  // base64str image type jpg,png ...
  //option: options and quality,it should be given between 0 to 100
  return webp.str2webpstr(dataBase64, 'jpg', '-q 80');
}

async function main() {

  const path = [[PYT]];
  
  const result = await getWebpBase64(path);
  console.log(result);
  
  [[ITOG]] = result;
}

await main();

Oyasumi Punpun

@Nikolas по поводу этого уже обращайтесь к документации библиотеки, к NodeJS и BAS это уже имеет крайне косвенное отношение, хотя если кто занимался этим здесь - может быть и подскажут, но проще документацию посмотреть.

Nikolas

Поставил 65% качество (см в коде), тогда размер картинки уменьшается примерно в 2,5 раза.
Почему такое качество, т к это оптимальное по тестам (cм график, тесты на графике делал не я). Но мои небольшие тесты подтвердили что 65% - это оптимально:

рррррррррр.png
Вобщем вот готовое решение, может кому-то будет полезно:

Заранее создаем папку temp руками или basовскими экшенами вот тут:
C:\Users\Administrator\Desktop\BrowserAutomationStudio\apps\ 25.3.8 \e\ рандом имя папки может быть \distr\app\node_modules\webp-converter\ temp

В Басе включаем Node.js на версии 18.0 работает , проверил!
Добавляем npmjs модуль https://www.npmjs.com/package/webp-converter в Node.js .

В переменную [[PYT]] указываем путь к jpg файлу на диске.

После отработки скрипта в экшене Node.js мы в переменной [[ITOG]] получаем текст (тип строка) который является webp-картинкой но представлен в base64 форме, далее этот код уже можно другими экшенами сохранить в виде картинки.

Код для экшена Node.js

const webp = require('webp-converter');
const fs = require('fs').promises;

async function getWebpBase64(path) {
  const data = await fs.readFile(path);
  const buf = Buffer.from(data);
  const dataBase64 = Buffer.from(buf).toString('base64');
  // base64str of image
  // base64str image type jpg,png ...
  //option: options and quality,it should be given between 0 to 100
  return webp.str2webpstr(dataBase64, 'jpg', '-q 65');
}

async function main() {

  const path = [[PYT]];
  
  const result = await getWebpBase64(path);
  console.log(result);
  
  [[ITOG]] = result;
}

await main();

Fox

@Nikolas said in Конвертация картинки в WEBP формат.:

Код для экшена Node.js
const webp = require('webp-converter');
const fs = require('fs').promises;
async function getWebpBase64(path) {
const data = await fs.readFile(path);
const buf = Buffer.from(data);
const dataBase64 = Buffer.from(buf).toString('base64');
// base64str of image
// base64str image type jpg,png ...
//option: options and quality,it should be given between 0 to 100
return webp.str2webpstr(dataBase64, 'jpg', '-q 65');
}
async function main() {
const path = [[PYT]];
const result = await getWebpBase64(path);
console.log(result);
[[ITOG]] = result;
}
await main();

var webp = require('webp-converter');
[[RESULT]] = await webp.str2webpstr([[FILE_CONTENT]], 'jpg', '-q 65');

Bablosoft

Конвертация картинки в WEBP формат.

Вставить ссылку в текст в Yandex Dzen

Переменная в переменной

Почему в режиме записи ошибок и багов нету, а в запуске чуть ли не постоянно??

Удаление или переход к следующей строке в файле. «Читать файл в список» не дает результат.

Шаблон в шаблоне