<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="image-editor">
<div id="image-preview" class="image-preview">
<img id="img" src="https://2ch.hk/soc/src/2300055/14537561654983.png" />
<div id="canvas" class="image-canvas"></div>
</div>
<div class="image-controls">
<div class="image-size">
<label>Формат:</label><br />
<select id="image-size">
<option disabled selected>Выберите формат</option>
<option value="1.5">10x15</option>
<option value="1.33333333333">15x20</option>
<option value="1.53333333333">15x23</option>
<option value="1.35">20x27</option>
<option value="1.5">20x30</option>
</select>
</div>
<div class="image-filters">
<label>Фильтр:</label>
<div class="image-filter" data-value="sepia">
<input type="checkbox" /> Сепия
</div>
</div>
<div class="image-crop">
<button id="crop-button">Обрезать и сохранить</button>
</div>
</div>
</div>
<div class="spacer"></div>
</div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font: 400 14px/1.4 "Trebuchet MS", sans-serif;
background: #ccc;
}
.wrapper {
width: 80%;
margin: 25px auto;
padding: 25px;
background: #fff;
}
.upload-form {
margin: 0 0 25px 0;
}
.upload-form form {
}
.image-editor {
}
.image-preview {
float: left;
width: 75%;
position: relative;
}
.image-preview img {
display: block;
width: 100%;
}
.image-canvas {
border: 2px solid #163cbc;
}
.sepia {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");
filter: sepia(1);
filter: sepia(100%);
filter: sepia(100%);
filter: sepia(100%);
filter: sepia(100%);
filter: sepia(100%);
}
.image-controls {
float: right;
width: 25%;
}
.image-size {
margin: 0 0 25px 25px;
}
.image-filters {
margin: 0 0 25px 25px;
}
.image-crop {
margin: 0 0 0 25px;
}
.spacer {
float: none;
clear: both;
height: 0;
overflow: hidden;
}
$(function() {
$('#img').on('load', function() {
var canvas = $('#canvas');
var w = $(this).width();
var h = $(this).height();
$('#image-preview').width(w).height(h);
canvas.css({
width: w - 4,
height: h - 4,
top: "-" + h
}).draggable({
containment: "parent"
}).resizable({
maxWidth: w - 4,
maxHeight: h - 4
});
});
$('#image-size').on('change', function() {
var canvas = $("#canvas");
var currentRatio = $('#img').width() / $('#img').height();
if (currentRatio <= $(this).val()) {
var w = canvas.width();
var h = canvas.width() / parseFloat($(this).val());
} else {
var h = canvas.height();
var w = canvas.height() * parseFloat($(this).val());
}
canvas.css({
width: w + "px",
height: h + "px",
});
canvas.resizable("option", "aspectRatio", $(this).val()).data('uiResizable')._aspectRatio = $(this).val();
});
$('.image-filter').on('click', function() {
$('#img').toggleClass($(this).attr('data-value'));
var c = $(this).find('input');
c.prop("checked", !c.prop("checked"));
});
$('#crop-button').on('click', function() {
function realImgDimension(img) {
var i = new Image();
i.src = img.src;
return {
naturalWidth: i.width,
naturalHeight: i.height
};
}
var realSize = realImgDimension($('#img')[0]);
var options = {
canvasX: $('#canvas').position().left,
canvasY: $('#canvas').position().top,
canvasWidth: $('#canvas').width(),
canvasHeight: $('#canvas').height(),
imgWidth: $('#img').width(),
imgHeight: $('#img').height(),
imgOriginalWidth: realSize.naturalWidth,
imgOriginalHeight: realSize.naturalHeight,
imgSrc: $('#img').attr('src'),
k: realSize.naturalWidth / $('#img').width()
};
$('#image-preview').html('<canvas id="result"></canvas>');
var canvas = $('#result')[0];
var context = canvas.getContext('2d');
var imageObj = new Image();
$('#result').css({
width: options.imgOriginalWidth,
height: options.imgOriginalHeight
});
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, options.imgWidth, options.imgHeight);
};
imageObj.src = options.imgSrc;
});
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |