Использование Sharp для создания как можно более размытых / прогрессивных изображений-заполнителей. - PullRequest
Новая
       15

Использование Sharp для создания как можно более размытых / прогрессивных изображений-заполнителей.

0 голосов
/ 14 сентября 2018

Я пытаюсь создать изображение-заполнитель с прогрессивной загрузкой, как описано здесь: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

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

Я встроил эту функцию в лямбда-функцию AWS, которая извлекает изображение из AWS S3 и помещает его обратно в папку-заполнитель.Вот соответствующая часть кода: 

S3.getObject({ Bucket: BUCKET, Key: key }).promise()

// perform the resize operation
.then(data => Sharp(data.Body)
.resize(5, 5, { kernel: 'cubic' })

  .jpeg({ quality: 1, force: false })
  .png({ compressionLevel: 0, force: false })
  .webp({ quality: 1, force: false })
  .tiff({ quality: 1, force: false })
  .blur()
  .resize(width, height, { kernel: 'cubic' })
  .toFormat(type)
  .toBuffer()
)
.then(buffer => {
    console.log(placeholderKey);
  // save the resized object to S3 bucket with appropriate object key.
  S3.putObject({
      Body: buffer,
      Bucket: BUCKET,
      ContentType: 'image/'+type,
      CacheControl: 'max-age=31536000',
      Key: placeholderKey,
      StorageClass: 'STANDARD'
  }).promise()
});

Как вы можете видеть, я беру изображение, меняю его размер до 5x5, как я и думал, что это приведет к потере большого количества данных, низкому качествувозможно в зависимости от типа, размыть его, а затем изменить его размер до полного размера, чтобы он все еще мог, потому что мне нужно, чтобы мои заполнители соответствовали фактическому размеру исходного изображения, чтобы удерживать их место.

Этот метод позволяет получить оригинализображение от 518 КБ до всего 7 КБ: Оригинал Заполнитель

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

...