PhotoUp

A library for handling image uploads

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="pic-up-wrapper">
    <div class="pic-up"></div>
    <div class="pic-up-controls">
        <button class="pic-up-rotate-left"><i class="fa fa-rotate-left"></i></button>
        <button class="pic-up-zoom-out">-</button>
        <input type="file" id="img-input"><label for="img-input">Choose Image</label>
        <button class="pic-up-zoom-in">+</button>
        <button class="pic-up-rotate-right"><i class="fa fa-rotate-right"></i></button>
        <div>
            <button class="pic-up-export">Export</button>
        </div>
    </div>
</div>

CSS

$color1: #7ECDCB;
$color2: #FC3E70;

body {
    font-family: arial;
    margin: 50px;
    text-align: center;
}

input[type="file"] {
    display: none;
    
    + label {
        border: 2px solid;
        border-radius: 5px;
        color: darken($color1, 20%);
        cursor: pointer;
        display: inline-block;
        padding: 5px 10px;
        
        &:hover {
            color: darken($color1, 10%);
        }
    }
}



.pic-up-wrapper {
    overflow: hidden;
}

.pic-up {
    border: 4px solid darken($color1, 20%);
    border-radius: 5px;
    margin: auto;
    height: 320px;
    width: 180px;
}

JavaScript

$(function() {
	'use strict';
    
    var toURL = window.URL.createObjectURL;
    
    function b64toBlob(b64Data, contentType) {
        contentType = contentType || 'image/png';
        var sliceSize = 512;

        var byteCharacters = atob(b64Data.split(/,/)[1]);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize),
            	byteNumbers = new Array(slice.length);
            
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            byteArrays.push(new Uint8Array(byteNumbers));
        }
        var blob = new Blob(byteArrays, {type: contentType});
        return blob;
    }
    
    class PicUpInstance {
    	constructor(el) {
            this.input = el.find('input[type="file"]').change(this.handleInput.bind(this));
            this.el = el.find('.pic-up').css('position', 'relative').html(this.html);
            this.elTop = this.el.offset().top,
            this.elLeft = this.el.offset().left,
            
            this.window = el.find('.pic-up-window');
            this.cropping = el.find('.pic-up-crop');
            this.full = el.find('.pic-up-full');
            this.zoomInBtn = el.find('.pic-up-zoom-in');
            this.zoomOutBtn = el.find('.pic-up-zoom-out');
            this.rotateLeftBtn = el.find('.pic-up-rotate-left');
            this.rotateRightBtn = el.find('.pic-up-rotate-right');
            this.exportBtn = el.find('.pic-up-export');
            
        	el.find('.pic-up-controls').css({
            	position: 'relative',
                zIndex: 2
            });
            
            this.bindDrag();
            this.bindRotate();
            this.bindZoom();
            this.bindExport();
        }
        
        bindDrag() {
        	var self = this;
            
            // Handle dragging with a mouse
       ...