gatsby-plugin-extract-image-colors
Plugin to extract image colors using vibrantjs
Last updated a year ago by mittnavnermike .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gatsby-plugin-extract-image-colors 
SYNC missed versions from official npm registry.

gatsby-plugin-extract-image-color

Extracts colors from image adds them to the image data

Installation

  1. npm i gatsby-plugin-extract-image-colors Or, yarn add gatsby-plugin-extract-image-colors
  2. Add config to gatsby-config.js
// gatsby-config.js
module.exports = {
  plugins: [
    //... Other plugins
    'gatsby-plugin-extract-image-colors'
  ]
}

Or with options

module.exports = {
  plugins: [
    //... Other plugins
    {
      resolve: 'gatsby-plugin-extract-image-colors',
      options: {
        extensions: ['jpg', 'png']
      }
    }
  ]
}

Default options:

options: {
  extensions: ['jpg', 'png']
}

Example

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Img from 'gatsby-image'

const query = graphql`
  {
    file(extension: { eq: "jpg" }) {
      relativeDirectory
      name
      id
      publicURL
      extension
      publicURL
      colors {
        ...GatsbyImageColors
      }
      childImageSharp {
        fluid(maxWidth: 2500) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`

const ImageWithBackground = () => {
  const data = useStaticQuery(query)
  return (
    <div style={{ backgroundColor: data.file.colors.vibrant, height: '100vh' }}>
      <Img fluid={data.file.childImageSharp.fluid} />
    </div>
  )
}

export default ImageWithBackground

Current Tags

  • 0.0.14                                ...           latest (a year ago)

9 Versions

  • 0.0.14                                ...           a year ago
  • 0.0.13                                ...           a year ago
  • 0.0.12                                ...           a year ago
  • 0.0.11                                ...           a year ago
  • 0.0.10                                ...           a year ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dev Dependencies (4)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |