playground
/
Resemble.js
mirror of https://github.com/Huddle/Resemble.js.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge branch 'extempl-black&white'

pull/82/merge
james.cryer 8 years ago
parent
abd73188aa c86132dd06
commit
ac4ed57ff2
4 changed files with 104 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      demoassets/main.js
  2. 98
      demoassets/resemble.css
  3. 25
      index.html
  4. 22
      resemble.js

2
demoassets/main.js
Unescape View File

@ -46,6 +46,8 @@ $(function(){
$('#blue').css('width',data.blue+'%');
$('#alpha').css('width',data.alpha+'%');
$('#brightness').css('width',data.brightness+'%');
$('#white').css('width',data.white+'%');
$('#black').css('width',data.black+'%');
});
});

98
demoassets/resemble.css
Unescape View File

@ -1,20 +1,19 @@
h1 {
text-align: center;
}
body {
padding-top: 60px;
padding-top: 60px;
}
footer {
margin-top: 45px;
padding: 35px 0 36px;
border-top: 1px solid #e5e5e5;
}
.drop-zone{
.drop-zone {
border: 10px dashed #ccc;
color: #ccc;
font-size: 32px;
@ -25,17 +24,19 @@ footer {
overflow: hidden;
position: relative;
}
.drop-zone.drag-over{
border: 10px dashed #0088CC;
}
.drop-zone img {
width: 400px;
position: absolute;
top: 0;
left: 0;
}
.small-drop-zone{
.drop-zone.drag-over {
border: 10px dashed #08c;
}
.drop-zone img {
width: 400px;
position: absolute;
top: 0;
left: 0;
}
.small-drop-zone {
margin-top: 20px;
margin-left: 90px;
border: 10px dashed #ccc;
@ -48,17 +49,58 @@ footer {
overflow: hidden;
position: relative;
}
.small-drop-zone.drag-over{
border: 10px dashed #0088CC;
}
.small-drop-zone img {
width: 330px;
position: absolute;
top: 0;
left: 0;
}
#image-diff {
margin-left: 0;
margin-top: 50px;
border-style: solid;
}
.small-drop-zone.drag-over {
border: 10px dashed #08c;
}
.small-drop-zone img {
width: 330px;
position: absolute;
top: 0;
left: 0;
}
#image-diff {
margin-left: 0;
margin-top: 50px;
border-style: solid;
}
.progress {
margin-bottom: 4px;
}
.progress.last {
margin-bottom: 8px;
}
.progress #alpha {
background-color: #eee;
background-image: linear-gradient(45deg, darkgrey 25%, transparent 25%, transparent 75%, darkgrey 75%, darkgrey),
linear-gradient(45deg, darkgrey 25%, lightgrey 25%, lightgrey 75%, darkgrey 75%, darkgrey);
background-size: 14px 14px;
background-position: 0 0, 7px 7px;
background-repeat: repeat;
}
.progress #white {
background-color: #fff;
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0)
}
.progress #black {
background-color: #000;
background-image: -moz-linear-gradient(top, #555, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555), to(#000));
background-image: -webkit-linear-gradient(top, #555, #000);
background-image: -o-linear-gradient(top, #555, #000);
background-image: linear-gradient(to bottom, #555, #000);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff000000', GradientType=0)
}

25
index.html
Unescape View File

@ -49,15 +49,20 @@
<div class="progress">
<div id="blue" class="bar" style="width: 0%;"></div>
</div>
<div class="progress">
<div class="progress last">
<div id="alpha" class="bar" style="width: 0%;"></div>
</div>
Black &amp; white
<div class="progress">
<div id="black" class="bar" style="width: 0%;"></div>
</div>
<div class="progress last">
<div id="white" class="bar" style="width: 0%;"></div>
</div>
Brightness
<div class="progress progress-warning">
<div id="brightness" class="bar" style="width: 0%;"></div>
</div>
</div>
</div>
</div>
@ -102,9 +107,6 @@
<button class="btn" id="same-size">Scale to same size</button>
</div>
<br/>
<br/>
<div class="btn-group buttons" style="display:none">
<button class="btn active" id="pink">Pink</button>
<button class="btn" id="yellow">Yellow</button>
@ -168,10 +170,13 @@ var api = resemble(fileData).onComplete(function(data){
return data;
/*
{
red: 255,
green: 255,
blue: 255,
brightness: 255
red: 100,
green: 100,
blue: 100,
brightness: 100,
alpha: 100,
white: 100,
black: 100
}
*/
});</pre>

22
resemble.js
Unescape View File

@ -100,12 +100,12 @@ URL: https://github.com/Huddle/Resemble.js
}
}
function loop(x, y, callback){
var i,j;
function loop(w, h, callback){
var x,y;
for (i=0;i<x;i++){
for (j=0;j<y;j++){
callback(i, j);
for (x=0;x<w;x++){
for (y=0;y<h;y++){
callback(x, y);
}
}
}
@ -118,6 +118,8 @@ URL: https://github.com/Huddle/Resemble.js
var blueTotal = 0;
var alphaTotal = 0;
var brightnessTotal = 0;
var whiteTotal = 0;
var blackTotal = 0;
loop(height, width, function(verticalPos, horizontalPos){
var offset = (verticalPos*width + horizontalPos) * 4;
@ -127,6 +129,14 @@ URL: https://github.com/Huddle/Resemble.js
var alpha = sourceImageData[offset + 3];
var brightness = getBrightness(red,green,blue);
if (red == green && red == blue && alpha) {
if (red == 0) {
blackTotal++
} else if (red == 255) {
whiteTotal++
}
}
pixelCount++;
redTotal += red / 255 * 100;
@ -141,6 +151,8 @@ URL: https://github.com/Huddle/Resemble.js
data.blue = Math.floor(blueTotal / pixelCount);
data.alpha = Math.floor(alphaTotal / pixelCount);
data.brightness = Math.floor(brightnessTotal / pixelCount);
data.white = Math.floor(whiteTotal / pixelCount * 100);
data.black = Math.floor(blackTotal / pixelCount * 100);
triggerDataUpdate();
}

Write Preview
Loading…
Cancel
Save