Coder Social home page Coder Social logo

carrierwave-color's Introduction

CarrierWave Color

Add the dominant color of an image to your database whenever you upload it with the CarrierWave gem on your Rails app.

This can be used to show the image's background color while it is loading or to index images for a "search by color" feature.

Installation

Add the following lines to your application's Gemfile:

# Detect the dominant color of images on upload
gem "carrierwave-color"

And then call:

$ bundle

Add a processor to your uploader

In your uploader, include the module and call the processor:

class PhotoUploader < CarrierWave::Uploader::Base
  include CarrierWave::Color

  process :store_dominant_color

  # …
end

Add a dominant color attribute

To store the color, you need an attribute on the Rails model where you attach your uploader. Call it {uploader}_dominant_color.

For example if you have the following model:

class Article
  mount_uploader :photo, PhotoUploader
end

Then you would need to add a photo_dominant_color column to the articles table. You could create a migration by executing:

$ rails g migration AddPhotoDominantColorToArticles photo_dominant_color
$ rake db:migrate

Using your dominant color

An easy way of using your dominant colors is to put them as a background to your image tags:

<%= image_tag(article.photo.url(:thumb), style: "background: #{article.photo_dominant_color}") %>

For example, on cults3d:

Cults 3D Animated Screenshot with dominant colors during image load

Resizing

If you do any resizing or if you have several versions of your uploader, store the color on the smallest so that processing goes faster. For example:

# …
version :medium do
  process resize_to_fill: [200, 200]
end

version :thumb, from_version: :medium do
  process resize_to_fill: [42, 42]
  process :store_dominant_color
end
# …

Dominant color from a palette

If you wish to find the dominant color from a selection of colors, you can use the following processor with a {uploader}_palette_color field on your model:

process store_palette_color: ['ff0000', '00ff00', '0000ff']

Contributing

  1. Fork it ( https://github.com/sunny/carrierwave-color/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Launch specs (bundle exec rspec)
  4. Commit your changes (git commit -am 'Add some feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create a new Pull Request

Releasing

  1. Update version.rb and commit
  2. Run rake release

carrierwave-color's People

Contributors

dependabot-preview[bot] avatar giedriusr avatar sunny avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

carrierwave-color's Issues

Color comes back nil

When using this as a gem from carrierwave-color for Ruby on Rails, I found that I was getting nil back.

Upon further investigation, I found that removing the space before / in @lines.map { |line| line[/#([0-9A-F]{6}) /, 1] }.compact, so that it becomes @lines.map { |line| line[/#([0-9A-F]{6})/, 1] }.compact fixes the issue.

ERROR: current transaction is aborted

Hello!

i'm trying to use that gem to store dominant color of uploaded image (obviously). It's probably the only gem available for that so i'm quite desperate to use it. The thing is, after doing everything just like described in the readme, after uploading a file, i'm getting:

ERROR: current transaction is aborted, commands ignored until end of transaction block

thrown by Model.update method in controller. I'm not sure what might be helpfull in here but that's almost clean model without any additional logic nor callbacks. The uploader looks like that:

class PhotoUploader < CarrierWave::Uploader::Base
  include CarrierWave::Color
  include CarrierWave::MiniMagick

  storage :file

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  process quality: 85

  version :medium do
    process :resize_to_fill => [355, 252]
    process :store_dominant_color
  end

  def extension_white_list
    %w(jpg jpeg gif png)
  end

end

Thanks in advance for any help!

store_palette_color is throwing ArgumentError?

Hey there, thanks a lot for maintaining this gem!

I've been able to get store_dominant_color working, but when I tried to constrain the possible colors using store_palette_color per the docs like so

version :large_logo do
    # returns a 300x300 image
    process :resize_to_fill => [300, 300]
    process store_palette_color: ['F1453D', 'E62465', '9B2FAE']
end

I get

"ArgumentError (wrong number of arguments (given 3 expected 0..1)):"

logo_palette_color is in my model. Thanks a lot for any help!

Adam

Use dominant color as background for resize_and_pad

Hi! Thanx for your work.
I want to use dominant color as background for resize_and_pad. Like:

version :thumb do
  process :resize_and_pad => [230, 140, dominant_color, "Center"]
end

What can you advise me to do?

Update: Solved. I make it through my custom cw-processor

Does it support png?

some png files doesn't process.
dominant color alway return nil.

has something issue?
thank you :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.