aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/docs/examples/upload-cropped-image-to-server.html
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2020-01-11 10:30:12 +0000
committerMario <mario@mariovavti.com>2020-01-11 10:30:12 +0000
commitf645c6f3a57bf5f53bbb2bde362b2447f725c977 (patch)
tree9b37650aad46296c5d98a55969348ebb4ee2d097 /library/cropperjs/docs/examples/upload-cropped-image-to-server.html
parent4c1c6908165e5c4fb1b7238f66764f89faa2301a (diff)
downloadvolse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.tar.gz
volse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.tar.bz2
volse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.zip
update cropperjs to the recent version
Diffstat (limited to 'library/cropperjs/docs/examples/upload-cropped-image-to-server.html')
-rw-r--r--library/cropperjs/docs/examples/upload-cropped-image-to-server.html176
1 files changed, 176 insertions, 0 deletions
diff --git a/library/cropperjs/docs/examples/upload-cropped-image-to-server.html b/library/cropperjs/docs/examples/upload-cropped-image-to-server.html
new file mode 100644
index 000000000..aef0ee58b
--- /dev/null
+++ b/library/cropperjs/docs/examples/upload-cropped-image-to-server.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <title>Cropper.js</title>
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
+ <link rel="stylesheet" href="../css/cropper.css">
+ <style>
+ .label {
+ cursor: pointer;
+ }
+
+ .progress {
+ display: none;
+ margin-bottom: 1rem;
+ }
+
+ .alert {
+ display: none;
+ }
+
+ .img-container img {
+ max-width: 100%;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Upload cropped image to server</h1>
+ <label class="label" data-toggle="tooltip" title="Change your avatar">
+ <img class="rounded" id="avatar" src="https://avatars0.githubusercontent.com/u/3456749?s=160" alt="avatar">
+ <input type="file" class="sr-only" id="input" name="image" accept="image/*">
+ </label>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+ </div>
+ <div class="alert" role="alert"></div>
+ <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="modalLabel">Crop the image</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">&times;</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <div class="img-container">
+ <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-primary" id="crop">Crop</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>
+ <script src="../js/cropper.js"></script>
+ <script>
+ window.addEventListener('DOMContentLoaded', function () {
+ var avatar = document.getElementById('avatar');
+ var image = document.getElementById('image');
+ var input = document.getElementById('input');
+ var $progress = $('.progress');
+ var $progressBar = $('.progress-bar');
+ var $alert = $('.alert');
+ var $modal = $('#modal');
+ var cropper;
+
+ $('[data-toggle="tooltip"]').tooltip();
+
+ input.addEventListener('change', function (e) {
+ var files = e.target.files;
+ var done = function (url) {
+ input.value = '';
+ image.src = url;
+ $alert.hide();
+ $modal.modal('show');
+ };
+ var reader;
+ var file;
+ var url;
+
+ if (files && files.length > 0) {
+ file = files[0];
+
+ if (URL) {
+ done(URL.createObjectURL(file));
+ } else if (FileReader) {
+ reader = new FileReader();
+ reader.onload = function (e) {
+ done(reader.result);
+ };
+ reader.readAsDataURL(file);
+ }
+ }
+ });
+
+ $modal.on('shown.bs.modal', function () {
+ cropper = new Cropper(image, {
+ aspectRatio: 1,
+ viewMode: 3,
+ });
+ }).on('hidden.bs.modal', function () {
+ cropper.destroy();
+ cropper = null;
+ });
+
+ document.getElementById('crop').addEventListener('click', function () {
+ var initialAvatarURL;
+ var canvas;
+
+ $modal.modal('hide');
+
+ if (cropper) {
+ canvas = cropper.getCroppedCanvas({
+ width: 160,
+ height: 160,
+ });
+ initialAvatarURL = avatar.src;
+ avatar.src = canvas.toDataURL();
+ $progress.show();
+ $alert.removeClass('alert-success alert-warning');
+ canvas.toBlob(function (blob) {
+ var formData = new FormData();
+
+ formData.append('avatar', blob, 'avatar.jpg');
+ $.ajax('https://jsonplaceholder.typicode.com/posts', {
+ method: 'POST',
+ data: formData,
+ processData: false,
+ contentType: false,
+
+ xhr: function () {
+ var xhr = new XMLHttpRequest();
+
+ xhr.upload.onprogress = function (e) {
+ var percent = '0';
+ var percentage = '0%';
+
+ if (e.lengthComputable) {
+ percent = Math.round((e.loaded / e.total) * 100);
+ percentage = percent + '%';
+ $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
+ }
+ };
+
+ return xhr;
+ },
+
+ success: function () {
+ $alert.show().addClass('alert-success').text('Upload success');
+ },
+
+ error: function () {
+ avatar.src = initialAvatarURL;
+ $alert.show().addClass('alert-warning').text('Upload error');
+ },
+
+ complete: function () {
+ $progress.hide();
+ },
+ });
+ });
+ }
+ });
+ });
+ </script>
+</body>
+</html>