Initial commit, working version
This commit is contained in:
Ryan McGrath
commit
2fa4fb4414
8 changed files with 203 additions and 0 deletions
BIN
1600.jpg
Normal file
BIN
1600.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 522 KiB |
105
css/example.css
Normal file
105
css/example.css
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, kbd, q, s, samp,
|
||||
small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
|
||||
:focus { outline: 0; }
|
||||
body { line-height: 1; }
|
||||
ol, ul { list-style: none; }
|
||||
table { border-collapse: separate; border-spacing: 0; }
|
||||
caption, th, td { text-align: left; font-weight: normal; }
|
||||
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
|
||||
blockquote, q { quotes: "" ""; }
|
||||
|
||||
@font-face { font-family: "Axel"; src: url(/css/Axel-Regular.ttf) format("truetype"); }
|
||||
|
||||
html {
|
||||
background-color: #6d7985;
|
||||
color: #fff;
|
||||
font: normal 62.5%/1 helvetica, sans-serif;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 600px;
|
||||
margin: 10px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: normal 1.8em/2.4em "Axel", helvetica, sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#footer, #container_top, #container_bottom {
|
||||
background-color: #404d59;
|
||||
margin: 10px auto 5px;
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
width: 580px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#container_bottom { display: none; }
|
||||
|
||||
#footer { text-align: center; font-size: 1.2em; line-height: 1.4em; }
|
||||
|
||||
a, a:visited { color: #f4d496; text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
#lol_container {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#lol {
|
||||
background-color: #111;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
|
||||
#lol_hidden { visibility: hidden; top: 0; left: 0; z-index: -10; }
|
||||
|
||||
#interface {
|
||||
float: right;
|
||||
width: 460px;
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
#interface p {
|
||||
font: normal 1.2em/1.5em helvetica, sans-serif;
|
||||
padding: 4px 1px;
|
||||
}
|
||||
|
||||
#img_input {
|
||||
border: 1px solid #c9c9c9;
|
||||
padding: 4px;
|
||||
margin: 0 5px 0 0;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
#img_submit {
|
||||
border: 1px solid #55a2c9;
|
||||
background-color: #498fb2;
|
||||
color: #fff;
|
||||
padding: 3px 5px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
|
||||
#log_colors { padding-left: 4px; }
|
||||
|
||||
.color_box {
|
||||
float: left;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
margin: 2px 6px 3px 0;
|
||||
}
|
||||
BIN
fallout.jpg
Normal file
BIN
fallout.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 KiB |
54
index.html
Normal file
54
index.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Franz - client side color palettes from logos</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/example.css">
|
||||
<script type="text/javascript" src="http://images.webs.com/static/global/js/jquery/jquery-1.3.2.min.js"></script>
|
||||
<script type="text/javascript" src="js/franz.js"></script>
|
||||
<script type="text/javascript">
|
||||
var img_input;
|
||||
|
||||
$(document).ready(function() {
|
||||
franz.init("lol");
|
||||
|
||||
img_input = document.getElementById("img_input");
|
||||
$("#franz_form").submit(function() {
|
||||
franz.loadImg(img_input.value);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Franz - client side color swatches</h1>
|
||||
|
||||
<div id="container_top">
|
||||
<div id="lol_container">
|
||||
<canvas id="lol" width="100" height="100"></canvas>
|
||||
<canvas id="lol_hidden" width="19" height="19"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="interface">
|
||||
<form method="post" action="#" id="franz_form">
|
||||
<input type="text" id="img_input" value="lol.png">
|
||||
<input type="submit" id="img_submit" value="Go for it!">
|
||||
</form>
|
||||
<p><strong>Try out:</strong> lol.png, testjubs.jpg, stars.jpg, 1600.jpg, fallout.jpg</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="container_bottom">
|
||||
<div id="log_colors">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="footer">
|
||||
This experiment in awesome-ness is brought to you by <a href="http://twitter.com/ryanmcgrath" title="Ryan McGrath">Ryan McGrath</a>,
|
||||
with some help from others.
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
js/franz.js
Normal file
44
js/franz.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
var franz = {
|
||||
canvas: {},
|
||||
ctx: {},
|
||||
img: {},
|
||||
final_colors: [],
|
||||
|
||||
init: function(canvas_id) {
|
||||
franz.canvas = document.getElementById(canvas_id);
|
||||
franz.ctx = franz.canvas.getContext('2d');
|
||||
return false;
|
||||
},
|
||||
|
||||
loadImg: function(img_src) {
|
||||
franz.img = new Image();
|
||||
franz.img.onload = function() {
|
||||
franz.ctx.drawImage(franz.img, 0, 0, 100, 100);
|
||||
setTimeout(function() { franz.getColors(); }, 100);
|
||||
}
|
||||
franz.img.src = img_src;
|
||||
return false;
|
||||
},
|
||||
|
||||
getColors: function() {
|
||||
var hidden_canvas = document.getElementById("lol_hidden"),
|
||||
extra_ctx = hidden_canvas.getContext('2d'),
|
||||
docString = "";
|
||||
|
||||
extra_ctx.drawImage(franz.img, 0, 0, 19, 19);
|
||||
var imageData = extra_ctx.getImageData(1, 1, 18, 18).data,
|
||||
arr = [];
|
||||
|
||||
for(var i = 0; i < imageData.length; i = i + 4) {
|
||||
arr[0] = imageData[i];
|
||||
arr[1] = imageData[i + 1];
|
||||
arr[2] = imageData[i + 2];
|
||||
// Ugly 4AM method, don't ask
|
||||
docString += '<div class="color_box" style="background-color: rgb(' + arr[0] + ', ' + arr[1] + ',' + arr[2] + ');"></div>';
|
||||
}
|
||||
|
||||
document.getElementById("log_colors").innerHTML = docString;
|
||||
$("#container_bottom").fadeIn("slow");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
BIN
lol.png
Normal file
BIN
lol.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
stars.jpg
Normal file
BIN
stars.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 KiB |
BIN
testjubs.jpg
Normal file
BIN
testjubs.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Reference in a new issue