Photo crop prototype

Developer
Chris Hanson
Size
19,337 Kb
Views
10,120
  1. Photo crop prototype Previews
  2. Photo crop prototype HTML Codes
  3. Photo crop prototype CSS Codes
  4. Photo crop prototype JS Codes

How do I make an photo crop prototype?

Still very much a work in progress.. What is a photo crop prototype? How do you make a photo crop prototype? This script and codes were developed by Chris Hanson on 01 October 2022, Saturday.

Photo crop prototype Previews
IQ Test

Photo crop prototype - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Photo crop prototype</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #e3e3e3; font-family: Arial; padding: 30px; text-align: center;
}
h1 { font-size: 24px; color: #333; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
.modal { background: white; width: 290px; height: 320px; left: 50%; margin-left: -145px; position: absolute; overflow: hidden; padding: 50px 20px; box-sizing: border-box; border-radius: 7px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);
}
.controls-top { background: rgba(255, 255, 255, 0.7); height: 30px; overflow: hidden; width: 100%; position: absolute; top: 0; left: 0; z-index: 10;
}
.controls-top .zoomer { width: 190px; margin: 7px auto;
}
.controls-top .upload,
.controls-top .rotate { width: 30px; height: 30px; position: absolute; top: 0; left: 0; cursor: pointer; background-repeat: no-repeat; opacity: .4;
}
.controls-top .rotate { right: 0; left: auto;
}
.controls-top .upload { background-position: 6px 3px; background-image: url("data:image/png;base64,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");
}
.controls-top .rotate { background-position: 6px 6px; background-image: url("data:image/png;base64,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");
}
.controls-bottom { position: absolute; bottom: 0; left: 0; height: 50px; width: 100%; z-index: 10;
}
.controls-bottom .save,
.controls-bottom .cancel { box-sizing: border-box; width: 50%; height: 100%; display: inline-block; color: white; line-height: 50px; cursor: pointer; opacity: .75; transition: opacity .2s;
}
.controls-bottom .save { background: green;
}
.controls-bottom .cancel { background: red;
}
.controls-bottom .save:hover,
.controls-bottom .cancel:hover { opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Crop Prototype</h1>
<div class='modal'> <img id='croppable' src='https://placeimg.com/640/480/any'>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Photo crop prototype - Script Codes CSS Codes

body { background: #e3e3e3; font-family: Arial; padding: 30px; text-align: center;
}
h1 { font-size: 24px; color: #333; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
.modal { background: white; width: 290px; height: 320px; left: 50%; margin-left: -145px; position: absolute; overflow: hidden; padding: 50px 20px; box-sizing: border-box; border-radius: 7px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);
}
.controls-top { background: rgba(255, 255, 255, 0.7); height: 30px; overflow: hidden; width: 100%; position: absolute; top: 0; left: 0; z-index: 10;
}
.controls-top .zoomer { width: 190px; margin: 7px auto;
}
.controls-top .upload,
.controls-top .rotate { width: 30px; height: 30px; position: absolute; top: 0; left: 0; cursor: pointer; background-repeat: no-repeat; opacity: .4;
}
.controls-top .rotate { right: 0; left: auto;
}
.controls-top .upload { background-position: 6px 3px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABG3AAARtwGaY1MrAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAARFJREFUeNrs1S9LBEEYgPH5ieCfoOCByazf4MRkE8yHIAgmk13MGgTNFoPhwHQHCmLxE/hVjBZB0XMtu7DI7dzs3hkEwxN29n3nmZl3eCdkWRZ+k/D3BdhFFzcRThCaEJAl8oAWZjCXSAj4zCc4QAc7JTrYx3ONhRS84LG8g9hWW3jCV11RwCD/WE440+mc2RHM472JoA6NBF3cJ8RNNRGclc72etKC0yEFvJqU4CJyS7rjCi4TrmK/qeAoHx9EJi/+nTcRrGERq0XwEDaxkMeOVeTXCsFKSg1SWkWVYCmS81YIima3jTbWS7SxVQQPYa8iZwMfGIQGXbJ2sztED3cR+nnMT24jOT0ch/9HfxTfAwBJyoB++UqLaAAAAABJRU5ErkJggg==");
}
.controls-top .rotate { background-position: 6px 6px; background-image: url("data:image/png;base64,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");
}
.controls-bottom { position: absolute; bottom: 0; left: 0; height: 50px; width: 100%; z-index: 10;
}
.controls-bottom .save,
.controls-bottom .cancel { box-sizing: border-box; width: 50%; height: 100%; display: inline-block; color: white; line-height: 50px; cursor: pointer; opacity: .75; transition: opacity .2s;
}
.controls-bottom .save { background: green;
}
.controls-bottom .cancel { background: red;
}
.controls-bottom .save:hover,
.controls-bottom .cancel:hover { opacity: 1;
}

Photo crop prototype - Script Codes JS Codes

// Requires jQuery UI
(function () { 'use strict'; var settings, maxSize = {}; $.fn.croppable = function (options) { var $image = this, initialWidth, $wrapper, $ghost, controls, viewPort; settings = $.extend({ viewPort: { width: 300, height: 300 }, zoom: { step: 10 }, wrapper: { offset: { top: 0, left: 0 }} }, options); $image.css('position', 'absolute'); $wrapper = setupWrapper($image); setupGhostImage($image, onAfterImageLoad); // Once the secondary 'ghost' image has loaded from the target src - we can // begin setup. function onAfterImageLoad(img) { $ghost = img; $ghost.css($image.position()); maxSize.width = $image.width(); maxSize.height = $image.height(); viewPort = new ViewPort(settings.viewPort); initialWidth = setStartingSize($image, viewPort); $ghost.height($image.height()); $ghost.width($image.width()); $image.wrap(viewPort.$el); centerImages($image.add($ghost), viewPort); controls = createControls($wrapper, { min: calculateMinZoom($image, viewPort), max: maxSize.width, step: settings.zoom.step, value: initialWidth }); setupListenersFor(controls, $image.add($ghost), viewPort); setupDrag($image, $ghost, viewPort); } return this; }; // ViewPort class - responsible for handling the croppable area element function ViewPort(attrs) { this.$el = $('<div>'); this.$el.css({ position: 'absolute', boxShadow: '0 0 3px 1px rgba(0,0,0,.33)', left: 0, top: 0, overflow: 'hidden' }); this.$el.width(attrs.width); this.$el.height(attrs.height); // We need to know when the image is rotated - as some calucations need to // be reversed when the image is at 90 or 260 deg. this.$el.bind('image:rotate', function () { this.imageRotated = !this.imageRotated; }.bind(this)); this.imageRotated = false; } ViewPort.prototype = { constructor: 'ViewPort', // Checks if the image is still inside the view port area and returns an // updated position if it is not. checkConstraints: function (pos, $el) { var maxTop = this.$el.position().top, minTop = -($el.height() - this.$el.height() - maxTop), maxLeft = this.$el.position().left, minLeft = -($el.width() - this.$el.width() - maxLeft); if (this.imageRotated) { minTop = -($el.width() - this.$el.height() - maxTop); minLeft = -($el.height() - this.$el.width() - maxLeft); } if (pos.top >= maxTop) pos.top = maxTop; if (pos.top <= minTop) pos.top = minTop; if (pos.left >= maxLeft) pos.left = maxLeft; if (pos.left <= minLeft) pos.left = minLeft; return pos; }, // Checks that the image has not been minimised past the viewports // dimentions, returns an updated size if it has. checkSize: function (size) { var $el = this.$el, ratio = size.width / size.height; if (!this.imageRotated) { if (size.width < $el.width()) { size.width = $el.width(); size.height = size.width / ratio; } if (size.height < $el.height()) { size.height = $el.height(); size.width = size.height * ratio; } } else { if (size.height < $el.width()) { size.height = $el.width(); size.width = size.height * ratio; } if (size.width < $el.height()) { size.width = $el.height(); size.height = size.width / ratio; } } return size; } }; // Sets the initial size of the image to be in the middle of the max size // and the min size of the viewport. function setStartingSize($image, viewPort) { var ratio = $image.width() / $image.height(), newSize = {}, minWidth = calculateMinZoom($image, viewPort); newSize.width = ($image.width() + minWidth) / 2; newSize.height = newSize.width / ratio; newSize = viewPort.checkSize(newSize); $image.css(newSize); return newSize.width; } function setupWrapper($target) { var $el = $('<div>'); $el.addClass('crop-wrapper').css($.extend({ height: '100%', width: '100%', position: 'absolute' }, settings.wrapper.offset)); $target.wrap($el); return $target.parent('div'); } function setupGhostImage($el, cb) { var img = new Image(), $img; img.onload = function () { $img = $(img); $img.css({ position: 'absolute', opacity: '.2' }).insertBefore($el); cb($img); }; img.src = $el.attr('src'); } // Centers the images in the viewport function centerImages($imgs, viewPort) { var left = -($imgs.width()/2 - viewPort.$el.width()/2), top = -($imgs.height()/2 - viewPort.$el.height()/2); $imgs.css({ left: left, top: top }); } // Sets up ui draggable on image function setupDrag($el, $ghost, viewPort) { $el.draggable({ drag: function (e, ui) { ui.position = viewPort.checkConstraints(ui.position, $el); $ghost.css(ui.position); } }).css('cursor', 'move'); } // Creates all the controls for the tool, rotation, upload, save etc. function createControls($el, zoomSettings) { var $topControls = $('<div>'), $bottomControls = $('<div>'), $upload = $('<div><i></i></div>').addClass('upload'), $rotate = $('<div><i></i></div>').addClass('rotate'), $cancel = $('<div><i></i>Cancel</div>').addClass('cancel'), $save = $('<div><i></i>Save</div>').addClass('save'), $zoom = $('<div>').addClass('slider'), $form = settings.customUploadForm || setupUploadForm($el); // Only setup the zoomer if the image is large enough to be scaled if (zoomSettings.max > zoomSettings.min && !isNaN(zoomSettings.value)) { $zoom.slider(zoomSettings).addClass('zoomer'); } $topControls.addClass('controls-top').append($upload, $zoom, $rotate); $bottomControls.addClass('controls-bottom').append($cancel, $save); $el.before($topControls, $bottomControls); // < ie9 will need to use a seperate upload box if ($('html').hasClass('lt-ie9')) { $upload.hide(); } return { $top: $topControls, $bottom: $bottomControls, $zoom: $zoom, $upload: $upload, $rotate: $rotate, $save: $save, $cancel: $cancel, $form: $form }; } function setupUploadForm($el) { var $form = $('<form style="display: none; visibility: hidden;">'+ ' <input type="file" name="img">' + '</form>'); $el.append($form); return $form; } // Function to be called everytime the 'slider' is changed, slider changes // the width of the image and a new height is calculated accordingly function adjustImageZoom(attrs) { var oldSize = { height: attrs.imgs.height(), width: attrs.imgs.width() }, ratio = oldSize.width / oldSize.height, $viewPort = attrs.viewPort.$el, newSize = {}, newPos = {}, diff = {}; if (attrs.viewPort.imageRotated) { newSize.height = attrs.val; newSize.width = newSize.height * ratio; } else { newSize.width = attrs.val; newSize.height = newSize.width / ratio; } newSize = attrs.viewPort.checkSize(newSize); attrs.imgs.css(newSize); diff = calculateDiff(newSize, oldSize); newPos = calculatePos(attrs.imgs, diff, attrs.viewPort.imageRotated); newPos = attrs.viewPort.checkConstraints(newPos, attrs.imgs); attrs.imgs.css(newPos); } // Returns the difference between two dimentions function calculateDiff(newSize, oldSize) { return { width: newSize.width - oldSize.width, height: newSize.height - oldSize.height }; } // Returns a new position based on the images new dimentions (too keep the // images centered when zooming) // TODO: doesnt seem to be 100% accurate. function calculatePos(imgs, diff, rotated) { var height = rotated ? diff.width : diff.height, width = rotated ? diff.height : diff.width; return { top: parseInt(imgs.css('top'), 10) - height / 2, left: parseInt(imgs.css('left'), 10) - width / 2 }; } // Creates listeners on the controls so they can do their thing. function setupListenersFor(controls, imgs, viewPort) { var imageRotate = onImageRotate(controls, imgs, viewPort), uploadInput; uploadInput = settings.customUploadInput || controls.$form.find('input'); controls.$zoom.bind('slide', function (e, ui) { adjustImageZoom({ val: ui.value, imgs: imgs, viewPort: viewPort }); }); controls.$upload.bind('click', function (e) { uploadInput.trigger('click'); }); uploadInput.change(function (e) { settings.actions.upload(controls.$form); }); controls.$rotate.bind('click', imageRotate); controls.$save.bind('click', function () { settings.actions.save( { width: imgs.width(), height: imgs.height(), rotation: imgs.data('rotation') ? imgs.data('rotation') : 0 }, { width: viewPort.$el.width(), height: viewPort.$el.height(), x: Math.abs(imgs.position().left), y: Math.abs(imgs.position().top) } ); }); controls.$cancel.bind('click', settings.actions.cancel); } // This function will return another function that will be trigged on // rotation based on browser support function onImageRotate(controls, imgs, viewPort) { if (checkCssSupportFor('Transform TransformOrigin')) { var rotateAngle = 0, translate, transformOrigin, zoomSettings; return rotationSuppored; } else { controls.$rotate.css('cursor', 'not-allowed'); return rotationNotSuppored; } // If rotation is supported, this function will run // This will calculate the new rotation and perform CSS trickery to keep // image centered in the viewport // TODO: this needs some refactoring function rotationSuppored() { zoomSettings = { step: settings.zoom.step, max: maxSize.height, min: calculateMinZoom(imgs, viewPort) }; viewPort.$el.trigger('image:rotate'); rotateAngle = setRotationAngle(rotateAngle, imgs); if (rotateAngle === 90 || rotateAngle === 270) { translate = rotateAngle === 90 ? '0, -100%' : '-100%, 0'; transformOrigin = rotateAngle === 90 ? 'left bottom' : 'right top'; zoomSettings.min = calculateMinZoom(imgs, viewPort, true); } else { translate = '0, 0'; transformOrigin = '50% 50%'; zoomSettings.max = maxSize.width; } imgs.css($.extend( buildCssProperty({ prop: 'transform', val: 'translate(' + translate + ') rotate(' + rotateAngle + 'deg)' }), buildCssProperty({ prop: 'transform-origin', val: transformOrigin }), viewPort.checkSize({ width: imgs.width(), height: imgs.height() }) )).css(viewPort.checkConstraints(imgs.position(), imgs)); if (rotateAngle === 0 || rotateAngle === 180) { zoomSettings.value = imgs.width(); } else { zoomSettings.value = imgs.height(); } controls.$zoom.slider(zoomSettings); } // If it is not supported show a simple message function rotationNotSuppored() { // TODO: tooltip and friendlyer message alert("We're sorry, this feature is not avalialbe on your browser, please update your browser or rotate the image offline and re-upload it."); } } // Increases rotation angle by 90degs function setRotationAngle(angle, img) { if ((angle += 90) >= 360) angle = 0; img.data('rotation', angle); return angle; } // This function will check both the width and the height of the imagee to // calculate a minimum zoom against the viewport. function calculateMinZoom(imgs, viewPort, rotated) { var ratio = imgs.width() / imgs.height(), minWidth = viewPort.$el.width(), minHeight = minWidth / ratio; if (rotated) { minWidth = viewPort.$el.height(); minHeight = minWidth * ratio; } if (minHeight < viewPort.$el.height()) { if (imgs.width() > imgs.height()) { minWidth = viewPort.$el.height() * ratio; } else { minWidth = viewPort.$el.height() / ratio; } } return minWidth; } // Creates a css property based on given attributes function buildCssProperty(attrs) { var css = {}, prefixes = attrs.prefixes || defaultPrefixes(); for (var i=0, l=prefixes.length; i<l; i++) { css['-' + prefixes[i].toLowerCase() + '-' + attrs.prop] = attrs.val; } css[attrs.prop] = attrs.val; return css; } // Checks if css properties are supported by creating and empty div and // inspecting the style property for matches. function checkCssSupportFor(props, pref) { var div = document.createElement('div'), style = div.style, suffixs = props.split(' '), support = {}, prefixes = pref || defaultPrefixes(); for (var i=0, l=suffixs.length; i<l; i++) { var suffix = suffixs[i]; // First check if unprefixed version is supported if (lowerCaseFirstLetter(suffix) in style) { support[suffix] = true; } else { // If not, check all prefixes for (var j=0, k=prefixes.length; j<k; j++) { if (prefixes[j] + suffix in style) { support[suffix] = true; break; } } } } // If all props are supported return true function allSupported() { for (var i=0, l=suffixs.length; i<l; i++) { if (!support[suffixs[i]]) return false; } return true; } return allSupported(); } // Default prefixes to check for function defaultPrefixes() { return 'Webkit Moz Ms O'.split(' '); } // Lowercases first letter of string eg: 'Webkit' > 'webkit' function lowerCaseFirstLetter(str) { return str.charAt(0).toLowerCase() + str.slice(1); }
})();
$('#croppable').croppable({ viewPort: { width: 250, height: 200 }, wrapper: { offset: { top: 50, left: 20 }}, actions: { cancel: function () {} }
});
Photo crop prototype - Script Codes
Photo crop prototype - Script Codes
Home Page Home
Developer Chris Hanson
Username chrishanson
Uploaded October 01, 2022
Rating 3
Size 19,337 Kb
Views 10,120
Do you need developer help for Photo crop prototype?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Hanson (chrishanson) Script Codes
Name
A Pen by Chris Hanson
Search bar
Uiselect ie8 issues
UI Select Multiselect
Ui-select with tree navigation
Rotating 3d cube
Custom branding
Lf layout
Hello World
Particle Emitter
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!