Encode jpg to web, the file will be rotation.

[rluisr]

This is original.

Encoded to webp

So I encoded to web, the file is rotated.
how to solve this problem?

const encoder = new CWebp(imgBuf);
  encoder.quality(80);
  encoder.toBuffer((err, buf) => {
    if (err) {
      console.log('encode error');
      reject(err);
    }
    resolve(buf);
  });

[lbeschastny]

I was unable to reproduce the problem with the image you've provided.
But the problem itself is well known.
So I'll assume that "original" image here is not the actual original image, but it's processed copy.

So, here is your actual problem.

Your original image contained Exif metadata with information about it's orientation.
So, the actual original image was also rotated, just like the encoded one.
But it also contained exif rotation metadata, telling how it should be displayed to the user.
Since most modern image viewers respect exif metadata, you've never seen the real image.

I would also guess that you took this photo with your phone (most likely iPhone).
It's common practice among mobile devices (and especially apple mobile devices) to substitute an actual photo rotation with a corresponding exif metadata.
All image-related services in the web know about exif and strip it along with all other metadata during photo pre-processing, actually rotating your photo instead.

I could see two possible solutions for your problem.

First, you could use cwebp metadata flag (by using corresponding .metadata helper method) to preserve original exif metadata:

encoder.metadata('exif');

But I would recommend you to strip exif metadata and manually rotate the photo instead.
Otherwise it may not be displayed correctly to all of your users.

Unfortunately, webp can't do it for you. So, you'll have to use a real image-processing tool to handle it.

I would suggest using gm. It support both GraphicsMagick and ImageMagick processing libraries and it already has a build-in function to handle exif rotation: gm#autoOrient.

[rluisr]

Thanks @lbeschastny
I switched to gm and solve this problem.

Thank you for teaching me kind.

[lbeschastny]

@rluisr does gm have build-in .webp support now?
The last time I checked you had to use a dedicated webp converter after processing your image with gm.

Looks like both GraphicsMagick and ImageMagick finally added full webp support.
Glad to hear it.

[rluisr]

@lbeschastny
yes. gm supports .webp.

Thanks :-)