webpack-image-rotate-loader

This loader rotate images.

Supports JPEG, PNG, WebP, TIFF and RAW images.

Examples

React

Vue

Install

Install with npm:

npm install --save-dev webpack-image-rotate-loader

Install with yarn:

yarn add --dev webpack-image-rotate-loader

Usage

This loader outputs a raw rotated image file. "file-loader" or another loader capable of handling image files should be place before this loader (before since webpack loaders are run from the last one to the first).

If you only want to rotate some but not all images use webpack's oneOf (like in the examples).

webpack.config.js

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp|tiff?)/i,
        use: [
          "file-loader",
          {
            loader: "webpack-image-rotate-loader",
            options: {
              angle: -90,
              background: "#ffffff"
            },
          },
        ],
      },
    ],
  },
};

Or use with webpack-image-resize-loader

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp|tiff?)/i,
        use: [
          {
            loader: "webpack-image-resize-loader",
            options: {
              width: 1000,
            },
          },
          "webpack-image-rotate-loader",
        ],
      },
    ],
  },
};

You can override options with queries

import placeholderUrl from "./some_pic.png?angle=90";

or

import placeholderUrl from './some_pic.png?{"angle":90}';

Other usage

With default options:

import placeholderUrl from "!!webpack-image-rotate-loader!./some_pic.png";

With specified options:

import placeholderUrl from "!!webpack-image-rotate-loader!./some_pic.png?angle=180";

Options

| Name | Type | Default | Description | | ------------------------------- | ---------------- | ----------- | -------------------------------------------------------------------------------------------------------- | | angle | number | undefined | The angle to rotate the input image. | | background | string\|object | "#000000" | The background color of the output image if the image is rotated by an angle other than multiples of 90. |

angle

The angle to rotate the input image.

When set to undefined, the loader will use the EXIF Orientation tag.

This is passed as the first argument to sharp's resize function.

background

example: "#7743CE", "rgb(255, 255, 255)", {r:0,g:0,b:0,alpha:1}

The background color of the output image if the image is rotated by an angle other than multiples of 90.

This is passed as background in the options of the parameters of sharp's resize function