trim vibrant src
This commit is contained in:
parent
7bc5a7a7e7
commit
54e3af28bb
7 changed files with 0 additions and 307 deletions
BIN
dashboard-ui/bower_components/vibrant/examples/1.jpg
vendored
BIN
dashboard-ui/bower_components/vibrant/examples/1.jpg
vendored
Binary file not shown.
Before Width: | Height: | Size: 177 KiB |
BIN
dashboard-ui/bower_components/vibrant/examples/2.jpg
vendored
BIN
dashboard-ui/bower_components/vibrant/examples/2.jpg
vendored
Binary file not shown.
Before Width: | Height: | Size: 80 KiB |
BIN
dashboard-ui/bower_components/vibrant/examples/3.jpg
vendored
BIN
dashboard-ui/bower_components/vibrant/examples/3.jpg
vendored
Binary file not shown.
Before Width: | Height: | Size: 77 KiB |
BIN
dashboard-ui/bower_components/vibrant/examples/4.jpg
vendored
BIN
dashboard-ui/bower_components/vibrant/examples/4.jpg
vendored
Binary file not shown.
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
Before Width: | Height: | Size: 103 KiB |
Binary file not shown.
Before Width: | Height: | Size: 356 KiB |
|
@ -1,307 +0,0 @@
|
||||||
###
|
|
||||||
Vibrant.js
|
|
||||||
by Jari Zwarts
|
|
||||||
|
|
||||||
Color algorithm class that finds variations on colors in an image.
|
|
||||||
|
|
||||||
Credits
|
|
||||||
--------
|
|
||||||
Lokesh Dhakar (http://www.lokeshdhakar.com) - Created ColorThief
|
|
||||||
Google - Palette support library in Android
|
|
||||||
###
|
|
||||||
|
|
||||||
window.Swatch = class Swatch
|
|
||||||
hsl: undefined
|
|
||||||
rgb: undefined
|
|
||||||
population: 1
|
|
||||||
@yiq: 0
|
|
||||||
|
|
||||||
constructor: (rgb, population) ->
|
|
||||||
@rgb = rgb
|
|
||||||
@population = population
|
|
||||||
|
|
||||||
getHsl: ->
|
|
||||||
if not @hsl
|
|
||||||
@hsl = Vibrant.rgbToHsl @rgb[0], @rgb[1], @rgb[2]
|
|
||||||
else @hsl
|
|
||||||
|
|
||||||
getPopulation: ->
|
|
||||||
@population
|
|
||||||
|
|
||||||
getRgb: ->
|
|
||||||
@rgb
|
|
||||||
|
|
||||||
getHex: ->
|
|
||||||
"#" + ((1 << 24) + (@rgb[0] << 16) + (@rgb[1] << 8) + @rgb[2]).toString(16).slice(1, 7);
|
|
||||||
|
|
||||||
getTitleTextColor: ->
|
|
||||||
@_ensureTextColors()
|
|
||||||
if @yiq < 200 then "#fff" else "#000"
|
|
||||||
|
|
||||||
getBodyTextColor: ->
|
|
||||||
@_ensureTextColors()
|
|
||||||
if @yiq < 150 then "#fff" else "#000"
|
|
||||||
|
|
||||||
_ensureTextColors: ->
|
|
||||||
if not @yiq then @yiq = (@rgb[0] * 299 + @rgb[1] * 587 + @rgb[2] * 114) / 1000
|
|
||||||
|
|
||||||
window.Vibrant = class Vibrant
|
|
||||||
|
|
||||||
quantize: require('quantize')
|
|
||||||
|
|
||||||
_swatches: []
|
|
||||||
|
|
||||||
TARGET_DARK_LUMA: 0.26
|
|
||||||
MAX_DARK_LUMA: 0.45
|
|
||||||
MIN_LIGHT_LUMA: 0.55
|
|
||||||
TARGET_LIGHT_LUMA: 0.74
|
|
||||||
|
|
||||||
MIN_NORMAL_LUMA: 0.3
|
|
||||||
TARGET_NORMAL_LUMA: 0.5
|
|
||||||
MAX_NORMAL_LUMA: 0.7
|
|
||||||
|
|
||||||
TARGET_MUTED_SATURATION: 0.3
|
|
||||||
MAX_MUTED_SATURATION: 0.4
|
|
||||||
|
|
||||||
TARGET_VIBRANT_SATURATION: 1
|
|
||||||
MIN_VIBRANT_SATURATION: 0.35
|
|
||||||
|
|
||||||
WEIGHT_SATURATION: 3
|
|
||||||
WEIGHT_LUMA: 6
|
|
||||||
WEIGHT_POPULATION: 1
|
|
||||||
|
|
||||||
VibrantSwatch: undefined
|
|
||||||
MutedSwatch: undefined
|
|
||||||
DarkVibrantSwatch: undefined
|
|
||||||
DarkMutedSwatch: undefined
|
|
||||||
LightVibrantSwatch: undefined
|
|
||||||
LightMutedSwatch: undefined
|
|
||||||
|
|
||||||
HighestPopulation: 0
|
|
||||||
|
|
||||||
constructor: (sourceImage, colorCount, quality) ->
|
|
||||||
if typeof colorCount == 'undefined'
|
|
||||||
colorCount = 64
|
|
||||||
if typeof quality == 'undefined'
|
|
||||||
quality = 5
|
|
||||||
|
|
||||||
image = new CanvasImage(sourceImage)
|
|
||||||
try
|
|
||||||
imageData = image.getImageData()
|
|
||||||
pixels = imageData.data
|
|
||||||
pixelCount = image.getPixelCount()
|
|
||||||
|
|
||||||
allPixels = []
|
|
||||||
i = 0
|
|
||||||
while i < pixelCount
|
|
||||||
offset = i * 4
|
|
||||||
r = pixels[offset + 0]
|
|
||||||
g = pixels[offset + 1]
|
|
||||||
b = pixels[offset + 2]
|
|
||||||
a = pixels[offset + 3]
|
|
||||||
# If pixel is mostly opaque and not white
|
|
||||||
if a >= 125
|
|
||||||
if not (r > 250 and g > 250 and b > 250)
|
|
||||||
allPixels.push [r, g, b]
|
|
||||||
i = i + quality
|
|
||||||
|
|
||||||
cmap = @quantize allPixels, colorCount
|
|
||||||
@_swatches = cmap.vboxes.map (vbox) =>
|
|
||||||
new Swatch vbox.color, vbox.vbox.count()
|
|
||||||
|
|
||||||
@maxPopulation = @findMaxPopulation
|
|
||||||
|
|
||||||
@generateVarationColors()
|
|
||||||
@generateEmptySwatches()
|
|
||||||
|
|
||||||
# Clean up
|
|
||||||
finally
|
|
||||||
image.removeCanvas()
|
|
||||||
|
|
||||||
generateVarationColors: ->
|
|
||||||
@VibrantSwatch = @findColorVariation(@TARGET_NORMAL_LUMA, @MIN_NORMAL_LUMA, @MAX_NORMAL_LUMA,
|
|
||||||
@TARGET_VIBRANT_SATURATION, @MIN_VIBRANT_SATURATION, 1);
|
|
||||||
|
|
||||||
@LightVibrantSwatch = @findColorVariation(@TARGET_LIGHT_LUMA, @MIN_LIGHT_LUMA, 1,
|
|
||||||
@TARGET_VIBRANT_SATURATION, @MIN_VIBRANT_SATURATION, 1);
|
|
||||||
|
|
||||||
@DarkVibrantSwatch = @findColorVariation(@TARGET_DARK_LUMA, 0, @MAX_DARK_LUMA,
|
|
||||||
@TARGET_VIBRANT_SATURATION, @MIN_VIBRANT_SATURATION, 1);
|
|
||||||
|
|
||||||
@MutedSwatch = @findColorVariation(@TARGET_NORMAL_LUMA, @MIN_NORMAL_LUMA, @MAX_NORMAL_LUMA,
|
|
||||||
@TARGET_MUTED_SATURATION, 0, @MAX_MUTED_SATURATION);
|
|
||||||
|
|
||||||
@LightMutedSwatch = @findColorVariation(@TARGET_LIGHT_LUMA, @MIN_LIGHT_LUMA, 1,
|
|
||||||
@TARGET_MUTED_SATURATION, 0, @MAX_MUTED_SATURATION);
|
|
||||||
|
|
||||||
@DarkMutedSwatch = @findColorVariation(@TARGET_DARK_LUMA, 0, @MAX_DARK_LUMA,
|
|
||||||
@TARGET_MUTED_SATURATION, 0, @MAX_MUTED_SATURATION);
|
|
||||||
|
|
||||||
generateEmptySwatches: ->
|
|
||||||
if @VibrantSwatch is undefined
|
|
||||||
# If we do not have a vibrant color...
|
|
||||||
if @DarkVibrantSwatch isnt undefined
|
|
||||||
# ...but we do have a dark vibrant, generate the value by modifying the luma
|
|
||||||
hsl = @DarkVibrantSwatch.getHsl()
|
|
||||||
hsl[2] = @TARGET_NORMAL_LUMA
|
|
||||||
@VibrantSwatch = new Swatch Vibrant.hslToRgb(hsl[0], hsl[1], hsl[2]), 0
|
|
||||||
|
|
||||||
if @DarkVibrantSwatch is undefined
|
|
||||||
# If we do not have a vibrant color...
|
|
||||||
if @VibrantSwatch isnt undefined
|
|
||||||
# ...but we do have a dark vibrant, generate the value by modifying the luma
|
|
||||||
hsl = @VibrantSwatch.getHsl()
|
|
||||||
hsl[2] = @TARGET_DARK_LUMA
|
|
||||||
@DarkVibrantSwatch = new Swatch Vibrant.hslToRgb(hsl[0], hsl[1], hsl[2]), 0
|
|
||||||
|
|
||||||
findMaxPopulation: ->
|
|
||||||
population = 0
|
|
||||||
population = Math.max(population, swatch.getPopulation()) for swatch in @_swatches
|
|
||||||
population
|
|
||||||
|
|
||||||
findColorVariation: (targetLuma, minLuma, maxLuma, targetSaturation, minSaturation, maxSaturation) ->
|
|
||||||
max = undefined
|
|
||||||
maxValue = 0
|
|
||||||
|
|
||||||
for swatch in @_swatches
|
|
||||||
sat = swatch.getHsl()[1];
|
|
||||||
luma = swatch.getHsl()[2]
|
|
||||||
|
|
||||||
if sat >= minSaturation and sat <= maxSaturation and
|
|
||||||
luma >= minLuma and luma <= maxLuma and
|
|
||||||
not @isAlreadySelected(swatch)
|
|
||||||
value = @createComparisonValue sat, targetSaturation, luma, targetLuma,
|
|
||||||
swatch.getPopulation(), @HighestPopulation
|
|
||||||
if max is undefined or value > maxValue
|
|
||||||
max = swatch
|
|
||||||
maxValue = value
|
|
||||||
|
|
||||||
max
|
|
||||||
|
|
||||||
createComparisonValue: (saturation, targetSaturation,
|
|
||||||
luma, targetLuma, population, maxPopulation) ->
|
|
||||||
@weightedMean(
|
|
||||||
@invertDiff(saturation, targetSaturation), @WEIGHT_SATURATION,
|
|
||||||
@invertDiff(luma, targetLuma), @WEIGHT_LUMA,
|
|
||||||
population / maxPopulation, @WEIGHT_POPULATION
|
|
||||||
)
|
|
||||||
|
|
||||||
invertDiff: (value, targetValue) ->
|
|
||||||
1 - Math.abs value - targetValue
|
|
||||||
|
|
||||||
weightedMean: (values...) ->
|
|
||||||
sum = 0
|
|
||||||
sumWeight = 0
|
|
||||||
i = 0
|
|
||||||
while i < values.length
|
|
||||||
value = values[i]
|
|
||||||
weight = values[i + 1]
|
|
||||||
sum += value * weight
|
|
||||||
sumWeight += weight
|
|
||||||
i += 2
|
|
||||||
sum / sumWeight
|
|
||||||
|
|
||||||
swatches: =>
|
|
||||||
Vibrant: @VibrantSwatch
|
|
||||||
Muted: @MutedSwatch
|
|
||||||
DarkVibrant: @DarkVibrantSwatch
|
|
||||||
DarkMuted: @DarkMutedSwatch
|
|
||||||
LightVibrant: @LightVibrantSwatch
|
|
||||||
LightMuted: @LightMuted
|
|
||||||
|
|
||||||
|
|
||||||
isAlreadySelected: (swatch) ->
|
|
||||||
@VibrantSwatch is swatch or @DarkVibrantSwatch is swatch or
|
|
||||||
@LightVibrantSwatch is swatch or @MutedSwatch is swatch or
|
|
||||||
@DarkMutedSwatch is swatch or @LightMutedSwatch is swatch
|
|
||||||
|
|
||||||
@rgbToHsl: (r, g, b) ->
|
|
||||||
r /= 255
|
|
||||||
g /= 255
|
|
||||||
b /= 255
|
|
||||||
max = Math.max(r, g, b)
|
|
||||||
min = Math.min(r, g, b)
|
|
||||||
h = undefined
|
|
||||||
s = undefined
|
|
||||||
l = (max + min) / 2
|
|
||||||
if max == min
|
|
||||||
h = s = 0
|
|
||||||
# achromatic
|
|
||||||
else
|
|
||||||
d = max - min
|
|
||||||
s = if l > 0.5 then d / (2 - max - min) else d / (max + min)
|
|
||||||
switch max
|
|
||||||
when r
|
|
||||||
h = (g - b) / d + (if g < b then 6 else 0)
|
|
||||||
when g
|
|
||||||
h = (b - r) / d + 2
|
|
||||||
when b
|
|
||||||
h = (r - g) / d + 4
|
|
||||||
h /= 6
|
|
||||||
[h, s, l]
|
|
||||||
|
|
||||||
@hslToRgb: (h, s, l) ->
|
|
||||||
r = undefined
|
|
||||||
g = undefined
|
|
||||||
b = undefined
|
|
||||||
|
|
||||||
hue2rgb = (p, q, t) ->
|
|
||||||
if t < 0
|
|
||||||
t += 1
|
|
||||||
if t > 1
|
|
||||||
t -= 1
|
|
||||||
if t < 1 / 6
|
|
||||||
return p + (q - p) * 6 * t
|
|
||||||
if t < 1 / 2
|
|
||||||
return q
|
|
||||||
if t < 2 / 3
|
|
||||||
return p + (q - p) * (2 / 3 - t) * 6
|
|
||||||
p
|
|
||||||
|
|
||||||
if s == 0
|
|
||||||
r = g = b = l
|
|
||||||
# achromatic
|
|
||||||
else
|
|
||||||
q = if l < 0.5 then l * (1 + s) else l + s - (l * s)
|
|
||||||
p = 2 * l - q
|
|
||||||
r = hue2rgb(p, q, h + 1 / 3)
|
|
||||||
g = hue2rgb(p, q, h)
|
|
||||||
b = hue2rgb(p, q, h - (1 / 3))
|
|
||||||
[
|
|
||||||
r * 255
|
|
||||||
g * 255
|
|
||||||
b * 255
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
###
|
|
||||||
CanvasImage Class
|
|
||||||
Class that wraps the html image element and canvas.
|
|
||||||
It also simplifies some of the canvas context manipulation
|
|
||||||
with a set of helper functions.
|
|
||||||
Stolen from https://github.com/lokesh/color-thief
|
|
||||||
###
|
|
||||||
|
|
||||||
window.CanvasImage = class CanvasImage
|
|
||||||
constructor: (image) ->
|
|
||||||
@canvas = document.createElement('canvas')
|
|
||||||
@context = @canvas.getContext('2d')
|
|
||||||
document.body.appendChild @canvas
|
|
||||||
@width = @canvas.width = image.width
|
|
||||||
@height = @canvas.height = image.height
|
|
||||||
@context.drawImage image, 0, 0, @width, @height
|
|
||||||
|
|
||||||
clear: ->
|
|
||||||
@context.clearRect 0, 0, @width, @height
|
|
||||||
|
|
||||||
update: (imageData) ->
|
|
||||||
@context.putImageData imageData, 0, 0
|
|
||||||
|
|
||||||
getPixelCount: ->
|
|
||||||
@width * @height
|
|
||||||
|
|
||||||
getImageData: ->
|
|
||||||
@context.getImageData 0, 0, @width, @height
|
|
||||||
|
|
||||||
removeCanvas: ->
|
|
||||||
@canvas.parentNode.removeChild @canvas
|
|
Loading…
Add table
Add a link
Reference in a new issue