Skip to content

Instantly share code, notes, and snippets.

@zbryikt

zbryikt/README.md

Last active December 19, 2015 14:09
Show Gist options
  • Save zbryikt/5967308 to your computer and use it in GitHub Desktop.
Save zbryikt/5967308 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Image Clipper

just an image clipper

Raw
index.css
.img-upload {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
display: inline-block;
-webkit-user-select: none;
position: relative;
border: 1px solid black;
background: url(sample.png); }
.img-upload .img-clipper {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border: 1px dashed rgba(128, 192, 255, 0.9);
background: rgba(255, 255, 255, 0.2); }
.img-upload .img-clipper .img-clipper-mark {
position: absolute;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.5);
border: 1px dashed rgba(128, 192, 255, 0.5); }
.img-upload .img-clipper .mark1 {
top: -5px;
left: -5px; }
.img-upload .img-clipper .mark2 {
top: -5px;
right: -5px; }
.img-upload .img-clipper .mark3 {
bottom: -5px;
left: -5px; }
.img-upload .img-clipper .mark4 {
bottom: -5px;
right: -5px; }
#preview {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
background: url(ps_neutral.png);
margin: 20px;
display: inline-block;
border: 1px solid black; }
#preview div {
width: 100%;
height: 100%; }
Raw
index.html
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="index.js"></script></head><body><div style="width:300px;height:300px;" class="img-upload"></div><div id="preview"><div></div></div></body></html>
Raw
index.jade
!!!5
html
head
meta(charset="utf-8")
link(rel="stylesheet",type="text/css",href="index.css")
script(type="text/javascript",src="index.js")
body
.img-upload(style="width:300px;height:300px;")
#preview
div
Raw
index.js
var clipper, node, preview, dopreview, adjustClip;
clipper = {
move: 0,
node: null,
dim: null,
cpts: [0, 0],
spts: [0, 0]
};
node = null;
preview = null;
dopreview = function(d){
preview.style.width = d[2] + "px";
preview.style.height = d[3] + "px";
return preview.childNodes[0].style.background = "url(sample.png) " + (-d[0]) + "px " + (-d[1]) + "px no-repeat";
};
adjustClip = function(node, i){
return function(e){
clipper.dim = node.dim;
clipper.move = i + 1;
clipper.node = node;
clipper.spts = [e.clientX, e.clientY];
e.stopPropagation();
return false;
};
};
window.onload = function(){
var imgUploads, i$, len$, item, clip, j$, ref$, len1$, i, mark;
preview = document.getElementById('preview');
imgUploads = document.querySelectorAll('.img-upload');
for (i$ = 0, len$ = imgUploads.length; i$ < len$; ++i$) {
item = imgUploads[i$];
clip = document.createElement('div');
clip.className = 'img-clipper';
for (j$ = 0, len1$ = (ref$ = [1, 2, 3, 4]).length; j$ < len1$; ++j$) {
i = ref$[j$];
mark = document.createElement('div');
mark.className = "img-clipper-mark mark" + i;
mark.addEventListener('mousedown', adjustClip(clip, i));
clip.appendChild(mark);
}
item.appendChild(clip);
clip.dim = [0, 0, 200, 200];
item.addEventListener('mousedown', adjustClip(clip, 0));
}
window.addEventListener('mousemove', function(e){
var ref$, m, d, n, c, s, r;
if (!clipper.move) {
return;
}
clipper.cpts = [e.clientX, e.clientY];
ref$ = [clipper.move, clipper.dim, clipper.node, clipper.cpts, clipper.spts], m = ref$[0], d = ref$[1], n = ref$[2], c = ref$[3], s = ref$[4];
console.log(m);
r = [d[0], d[1], d[2], d[3]];
if (m > 1) {
r[2] = d[2] + (c[0] - s[0]) * (m % 2 === 0 ? -1 : 1);
r[3] = d[3] + (c[1] - s[1]) * (m < 4 ? -1 : 1);
}
if (r[2] < 30) {
r[2] = 30;
}
if (r[3] < 30) {
r[3] = 30;
}
if (m < 2 || m % 2 === 0) {
r[0] = d[0] + c[0] - s[0];
}
if (m < 4) {
r[1] = d[1] + c[1] - s[1];
}
n.style.left = r[0] + "px";
n.style.top = r[1] + "px";
n.style.width = r[2] + "px";
n.style.height = r[3] + "px";
return dopreview(r);
});
return window.addEventListener('mouseup', function(e){
var ref$, m, d, n, c, s, wf, hf;
if (!clipper.move) {
return;
}
ref$ = [clipper.move, clipper.dim, clipper.node, [e.clientX, e.clientY], clipper.spts], m = ref$[0], d = ref$[1], n = ref$[2], c = ref$[3], s = ref$[4];
clipper.move = 0;
ref$ = [0, 0], wf = ref$[0], hf = ref$[1];
n.dim = [d[0], d[1], d[2], d[3]];
if (m > 1) {
n.dim[2] = d[2] + (c[0] - s[0]) * (m % 2 === 0 ? -1 : 1);
n.dim[3] = d[3] + (c[1] - s[1]) * (m < 4 ? -1 : 1);
}
if (m < 2 || m % 2 === 0) {
n.dim[0] = d[0] + c[0] - s[0];
}
if (m < 4) {
n.dim[1] = d[1] + c[1] - s[1];
}
n.style.left = n.dim[0] + "px";
n.style.top = n.dim[1] + "px";
n.style.width = n.dim[2] + "px";
n.style.height = n.dim[3] + "px";
return dopreview(n.dim);
});
};
Raw
index.ls
clipper =
move: 0
node: null
dim: null
cpts: [0, 0]
spts: [0, 0]
node = null
preview = null
dopreview = (d) ->
preview.style.width = d.2 + "px"
preview.style.height = d.3 + "px"
preview.childNodes[0].style.background = "url(sample.png) #{-d.0}px #{-d.1}px no-repeat"
adjust-clip = (node, i) ->
(e) ->
clipper.dim = node.dim
clipper.move = i + 1
clipper.node = node
clipper.spts = [e.clientX, e.clientY]
e.stopPropagation!
false
window.onload = ->
preview := document.getElementById \preview
img-uploads = document.querySelectorAll \.img-upload
for item in img-uploads
clip = document.createElement \div
clip.className = \img-clipper
for i in [1 to 4]
mark = document.createElement \div
mark.className = "img-clipper-mark mark#i"
mark.addEventListener \mousedown, adjust-clip clip,i
clip.appendChild mark
item.appendChild clip
clip.dim = [0 0 200 200]
item.addEventListener \mousedown, adjust-clip clip, 0
window.addEventListener \mousemove, (e) ->
if !clipper.move then return
clipper.cpts = [e.clientX, e.clientY]
[m,d,n,c,s] = [clipper.move,clipper.dim,clipper.node,clipper.cpts,clipper.spts]
console.log m
r = [d.0, d.1, d.2, d.3]
if m > 1 then
r.2 = d.2 + (c.0 - s.0) * ( if m % 2 == 0 then -1 else 1 )
r.3 = d.3 + (c.1 - s.1) * ( if m < 4 then -1 else 1 )
if r.2 < 30 then r.2 = 30
if r.3 < 30 then r.3 = 30
if m < 2 or m % 2 == 0 then r.0 = d.0 + c.0 - s.0
if m < 4 then r.1 = d.1 + c.1 - s.1
n.style.left = r.0 + "px"
n.style.top = r.1 + "px"
n.style.width = r.2 + "px"
n.style.height = r.3 + "px"
dopreview r
window.addEventListener \mouseup, (e) ->
if !clipper.move then return
[m,d,n,c,s] = [clipper.move,clipper.dim,clipper.node,[e.clientX, e.clientY],clipper.spts]
clipper.move = 0
[wf, hf] = [0,0]
n.dim = [d.0, d.1, d.2, d.3]
if m > 1 then
n.dim.2 = d.2 + (c.0 - s.0) * ( if m % 2 == 0 then -1 else 1 )
n.dim.3 = d.3 + (c.1 - s.1) * ( if m < 4 then -1 else 1 )
if m < 2 or m % 2 == 0 then n.dim.0 = d.0 + c.0 - s.0
if m < 4 then n.dim.1 = d.1 + c.1 - s.1
n.style.left = n.dim.0 + "px"
n.style.top = n.dim.1 + "px"
n.style.width = n.dim.2 + "px"
n.style.height = n.dim.3 + "px"
dopreview n.dim
Raw
index.sass
.img-upload
box-shadow: 0 0 3px rgba(0,0,0,0.5)
overflow: hidden
display: inline-block
-webkit-user-select: none
position: relative
border: 1px solid #000
background: url(sample.png)
.img-clipper
position: absolute
left: 0
top: 0
width: 200px
height: 200px
border: 1px dashed rgba(128,192,255,0.9)
background: rgba(255,255,255,0.2)
.img-clipper-mark
position: absolute
width: 10px
height: 10px
background: rgba(255,255,255,0.5)
border: 1px dashed rgba(128,192,255,0.5)
.mark1
top: -5px
left: -5px
.mark2
top: -5px
right: -5px
.mark3
bottom: -5px
left: -5px
.mark4
bottom: -5px
right: -5px
#preview
box-shadow: 0 0 3px rgba(0,0,0,0.5)
background: url(ps_neutral.png)
margin: 20px
display: inline-block
border: 1px solid #000
div
width: 100%
height: 100%
Raw
makefile
all:
jade index.jade
livescript -cb index.ls
sass index.sass index.css
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment