question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request - Add support of Image operation for sharp adapter

See original GitHub issue

Hello,

Sharp allowing the possibility of extract an image (a crop) using http://sharp.pixelplumbing.com/en/stable/api-operation/#extract. Does it make sense to add it to this package? With this, it would be nice to be able to chain images transformation, with something like:

              use: [
                   {
                       loader: 'file-loader',
                   }
                   {
                       loader: 'responsive-loader',
                       options: {
                           adapter: require('responsive-loader/sharp-extract'),
                           name: "images/responsive/[name]-[width].[ext]"
                       }
                   },
                   {
                       loader: 'responsive-loader',
                       options: {
                           adapter: require('responsive-loader/sharp')
                       }
                   },
               ],

this way, we can resize then extract the image (looks like another feature request).

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:5
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
Ngobcommented, Dec 6, 2018

That do not work in my case, I need to be able to configure it inline: asset.jpg?size=1200&extract_left=151&extract_top=0&extract_width=1200, except if img contains his own query?

For information, I think you are right, I tried to chain it properly but it did not work, I will retry it asap and open an according PR if it works.

1reaction
jerstuckicommented, Dec 6, 2018

Not sure if it’s possible/necessary to chain loaders for this. How about something like

{
  loader: 'responsive-loader',
  options: {
      adapter: require('responsive-loader/sharp'),
      operations: [["rotate", 90], "extract"]
  }
}

// Or even better?
{
  loader: 'responsive-loader',
  options: {
      adapter: require('responsive-loader/sharp'),
      operations: img => img.rotate(90).extract()
  }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

pmb0/express-sharp: Real-time image processing for ... - GitHub
express-sharp adds real-time image processing routes to your express application. Images are processed with sharp, a fast Node.js module for resizing images.
Read more >
sharp - High performance Node.js image processing
This module supports reading JPEG, PNG, WebP, GIF, AVIF, TIFF and SVG images. Output images can be in JPEG, PNG, WebP, GIF, AVIF...
Read more >
sharp - npm
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, GIF, AVIF and TIFF images. Latest version: 0.31.3, ...
Read more >
OPERATION GUIDE - Sharp
The screen images and procedures that appear in this manual are mainly for ... refer to your operating system's manual or online Help....
Read more >
How To Process Images in Node.js With Sharp - DigitalOcean
Digital image processing is a method of using a computer to analyze and manipulate images. This tutorial covers using the Node.js library ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found