Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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"); 
                -webkit-filter: sepia(1);
                -webkit-filter: sepia(100%);
                -moz-filter: sepia(100%);
                -ms-filter: sepia(100%);
                -o-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

Dismiss x
public
Bin info
anonymouspro
0viewers