Разбор палитры изображений
Доброго времени суток.
У меня есть скрипт который разбирает доминирующие цвета на изображении.
Помогите пожалуйста дописать чтоб при наведении на цвет писало его HEX код и RGB код.
Вот сам скрипт:
Код:
$(document).ready(function () {
if (typeof window.FileReader === 'function') {
$('#dragDrop').show();
var $dropZone = $('#dropZone');
var dragEnter = function( evt ){
evt.stopPropagation();
evt.preventDefault();
$dropZone.addClass('dragging');
};
var dragLeave = function( evt ){
evt.stopPropagation();
evt.preventDefault();
$dropZone.removeClass('dragging');
};
var dragOver = function( evt ){
evt.stopPropagation();
evt.preventDefault();
};
var drop = function( evt ){
evt.stopPropagation();
evt.preventDefault();
$dropZone.removeClass('dragging');
var dt = evt.originalEvent.dataTransfer;
var files = dt.files;
handleFiles( files );
};
$dropZone
.on('dragenter', dragEnter)
.on('dragleave', dragLeave)
.on('dragover', dragOver)
.on('drop', drop);
}
var displayColors = function( image ) {
var $image = $(image);
var imageSection = $image.closest('.imageSection');
var appendColors = function (colors, root) {
$.each(colors, function (index, value) {
var swatchEl = $('<div>', {'class': 'swatch'})
.css('background-color', 'rgba('+ value +', 1)');
root.append(swatchEl);
});
};
// Dominant Color
var dominantColor = getDominantColor(image);
var dominantSwatch = imageSection.find('.dominantColor .swatches');
appendColors([dominantColor], dominantSwatch);
// Palette
var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
var medianPalette = createPalette(image, colorCount);
var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
appendColors(medianPalette, medianCutPalette);
};
function handleFiles( files ) {
var imageType = /image.*/;
var fileCount = files.length;
for (var i = 0; i < fileCount; i++) {
var file = files[i];
if ( file.type.match(imageType) ) {
var reader = new FileReader();
reader.onload = function( e ) {
imageInfo = { images: [
{'class': 'droppedImage', file: e.target.result}
]};
var html = Mustache.to_html($('#template').html(), imageInfo);
$('#draggedImages').prepend( html );
var img = $('.droppedImage .targetImage').get(0);
// Must wait for image to load in DOM, not just load from FileReader
$(img).on('load', function() {
displayColors( img );
util.centerImg( img, 400, 300);
$('.droppedImage').slideDown();
});
};
reader.readAsDataURL(file);
} else {
alert('File must be a supported image type.');
}
}
}
/* var html = Mustache.to_html($('#template').html(), imageArray);
$('#main').append(html);*/
// Use lettering.js to give letter by letter styling control for the h1 title
$("h1").lettering();
// For each image:
// Once image is loaded, get dominant color and palette and display them.
$('img').bind('load', function (event) {
var image = event.target;
displayColors( image );
});
});
var util = {
centerImg: function( img, containerWidth, containerHeight) {
var $img = $(img);
var imgWidth = $img.get(0).width;
var imgHeight = $img.get(0).height;
var imgAspectRatio = imgHeight/imgWidth;
if ( imgHeight > containerHeight ) {
imgWidth = containerHeight / imgAspectRatio;
$img.css('width', ( imgWidth + "px" ));
}
if ( imgWidth > containerWidth ) {
$img.css('width', ( containerWidth + "px" ));
imgHeight = imgAspectRatio * containerWidth;
}
if ( imgWidth < containerWidth ) {
var hOffset = ( containerWidth - imgWidth )/2;
$img.css('margin-left', ( hOffset + "px" ));
}
if ( imgHeight < containerHeight ) {
var vOffset = ( containerHeight - imgHeight )/2;
$img.css('margin-top', ( vOffset + "px" ));
}
}
};
Вот HTML файл:
Код:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href='http://fonts.googleapis.com/css?family=Varela+Round|Terminal+Dosis:400,700,600' rel='stylesheet' type='text/css'>
<title>Color Thief</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/app.css">
<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Color Thief</h1>
<p>Программа яка визначає колірну палітру загруженого зображення, та підбирає найліпші кольора які підійдуть до цього зображення.</p>
</header>
<div id="main" role="main">
<div id='dragDrop' style='display: none'>
<h2>Программа</h2>
<div id="dropZone" class="dropZone">
</div>
<div id="draggedImages"></div>
</div>
</div>
</div>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.3.min.js"><\/script>')</script>
<script src="js/libs/jquery.lettering.js"></script>
<script src="js/libs/mustache.js"></script>
<script src="js/libs/quantize.js"></script>
<script src="js/color-thief.js"></script>
<script id='template' type='text/x-mustache'>
{{#images}}
<div class="imageSection {{class}} ">
<div class="imageWrap">
<img class="targetImage" src="{{file}}" data-colorcount="{{colorCount}}" />
</div>
<div class="colors">
<div class="function dominantColor">
<h3>Домінуючий колір на зображенні</h3>
<div class="swatches"></div>
</div>
<div class="function medianCutPalette clearfix">
<h3>Палітра кольорів загруженого зображення</h3>
<div class="swatches"></div>
</div>
</div>
</div>
{{/images}}
</script>
<script src="index.js"></script>
</body>
</html>
2) И еще у меня есть алгоритм подбора подходящего цвета для изображения... В бд храниться цвета и их форматы.. Помогите пожалуйста сделать так :
После определения палитры цветов мы брали по алгоритму цвета из бд которые подходят к палитре и выводили пару вариантов...
Заранее благодарен. |