"Image Crop jQuery"
Bootstrap 4.1.1 Snippet by SOJITRA

Post to Facebook Tweet this

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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

Related: See More

Material Bootstrap Wizard
Image Checkbox
masonry Image Gallery
Image Tiles Full width

Questions / Comments:

I believe this author of this snippet should add credits to the original Jquery plugin: http://fengyuanchen.github....

maxsurguy () - 9 years ago - Reply 1

Thanks for the original one.. max. (Y)

Safry () - 9 years ago - Reply 0

Yes, that's right!!

Hiren Sojitra () - 9 years ago - Reply 0

Could you add a link to that on the top of the snippet please? Thanks!

maxsurguy () - 9 years ago - Reply 0

Done!

Hiren Sojitra () - 9 years ago - Reply 0

Hello, this is awesome! Have you made a php implementation of this snippet?

Webrunner () - 9 years ago - Reply 1

Please check the original plugin: http://fengyuanchen.github....

maxsurguy () - 9 years ago - Reply 0

nice tool

Vinícius Picossi () - 9 years ago - Reply 1

this is a rip-off. Remove it

simkeyur () - 9 years ago - Reply -1

heyy, can you please tell me how i can change images in this canvas

Sachin Singh () - 7 years ago - Reply 0

image not getting small from original size, means not going in crop canvas area

Sachin Singh () - 7 years ago - Reply 0

can any make like, This site "Bootsnipp" profile image upload code..? thank you

backslash () - 8 years ago - Reply 0

How to Upload the server canvas image

PRAKASH () - 9 years ago - Reply 0

Hello Team i need range control for image zoom in and zoom out. can you plz help me njhawar@flair-solution.com

like this http://scottcheng.github.io...

Nikhilesh Jhanwar () - 9 years ago - Reply 0