Bootstrap Snippet Image Crop jQuery using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
    All Credit goes to http://fengyuanchen.github.io/cropper
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
<!-- Content -->
<div class="container">
    <div class="row">
      <div class="col-md-9">
        <!-- <h3>Demo:</h3> -->
        <div class="img-container">
          <img id="image" src="https://images.unsplash.com/photo-1556912998-2e11c44a2a08?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjgyMjQzfQ" alt="Picture">
          <div class="frame loader">
                   <div class="center">
                      <div class="dot-1"></div>
                      <div class="dot-2"></div>
                      <div class="dot-3"></div>
                   </div>
                </div>
        </div>
      </div>
      <div class="col-md-3">
        <!-- <h3>Preview:</h3> -->
        <div class="docs-preview clearfix">
          <div class="img-preview preview-lg"></div>
          <div class="img-preview preview-md"></div>
          <div class="img-preview preview-sm"></div>
          <div class="img-preview preview-xs"></div>
        </div>
        <!-- <h3>Data:</h3> -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.btn {
  padding-left: .75rem;
  padding-right: .75rem;
}
label.btn {
  margin-bottom: 0;
}
.d-flex > .btn {
  flex: 1;
}
.carbonads {
  border-radius: .25rem;
  border: 1px solid #ccc;
  font-size: .875rem;
  overflow: hidden;
  padding: 1rem;
}
.carbon-wrap {
  overflow: hidden;
}
.carbon-img {
  clear: left;
  display: block;
  float: left;
}
.carbon-text,
.carbon-poweredby {
  display: block;
  margin-left: 140px;
}
.carbon-text,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function(){
    $.ajax({
        url: "https://api.unsplash.com/photos/?&client_id=f0afe99aaf46a21c572d5dd3d620f3cf96e287a52e8af381f4bbaa5729a02215",
        success: function(result) {
            unsplash = result;
            $('.img-container img').each(function(i) {
                var i = Math.floor((Math.random() * 10) + 1);
                $(this).attr('src', unsplash[i].urls.regular);//[full, small, regular, raw, thumb]
            });
            $(".img-container img").one("load", function() {
                imageCrop();
            }).each(function(i) {
                
            });
        }
    });
});
function imageCrop() {
  'use strict';
  var console = window.console || { log: function () {} };
  var URL = window.URL || window.webkitURL;
  var $image = $('#image');
  var $download = $('#download');
  var $dataX = $('#dataX');
  var $dataY = $('#dataY');
  var $dataHeight = $('#dataHeight');
  var $dataWidth = $('#dataWidth');
  var $dataRotate = $('#dataRotate');
  var $dataScaleX = $('#dataScaleX');
  var $dataScaleY = $('#dataScaleY');
  var options = {
    aspectRatio: 16 / 9,
    preview: '.img-preview',
    viewMode: 1,
    crop: function (e) {
      $dataX.val(Math.round(e.detail.x));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Image Crop jQuery"
Bootstrap 4.1.1 Snippet by johndrova

Related: See More

Questions / Comments:

"Image Crop jQuery" Bootstrap 4.1.1 Snippet by johndrova

Related: See More

Questions / Comments:

"Image Crop jQuery"
Bootstrap 4.1.1 Snippet by johndrova