wklejamy.pl website for sale. You are interested in. Please contact. wklejamy@gmail.com
Click to buy coffe
Untitled
Guest 443 3rd Jan, 2023
<html>
<head>
<title>How to Crop Image Before Uploading using Cropper Js?</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="cropper.css" rel="stylesheet">
<script src="cropper.js"></script>
</head>
<style type="text/css">
img {
display: block;
max-width: 100%;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
</style>
<body>
<div class="container">
<h5>Upload Images</h5>
<!-- <form method="post"> -->
<input type="file" name="image" class="image" onchange="uploadImage()" id="uploadImg">
<!-- </form> -->
</div>
<!-- Modal start -->
<div class="modal fade" id="cropModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<!-- default image where we will set the src via jquery-->
<img id="image">
</div>
<div class="col-md-4">
<!-- <div class="preview" id="preview"></div> -->
<img id="preview">
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- default image where we will set the src via jquery-->
<img id="imageFinal">
</div>
</div>
</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">Przytnij</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script>
var cropper, reader, file;
function uploadImage() {
//aktualnie dodane
var uploadImg = document.getElementById('uploadImg');
const file = uploadImg.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
openModal(reader.result);
});
reader.readAsDataURL(file);
}
function openModal(base64) {
var cropModal = $('#cropModal');
var image = document.getElementById('image');
image.src = base64;
cropModal.modal('show');
cropModal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
//preview: '.preview'
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
//var imageFinal = document.getElementById('imageFinal');
var preview = document.getElementById('preview');
$("#crop").click(function () {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function (blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64data = reader.result;
//imageFinal.src = base64data;
preview.src = base64data;
};
});
});
}
// var bs_modal = $('#cropModal');
// var image = document.getElementById('image');
// var imageFinal = document.getElementById('imageFinal');
// var cropper, reader, file;
/*$("body").on("change", ".image", function (e) {
var files = e.target.files;
var done = function (url) {
image.src = url;
bs_modal.modal('show');
};
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);
}
}
});*/
// bs_modal.on('shown.bs.modal', function () {
// cropper = new Cropper(image, {
// aspectRatio: 1,
// viewMode: 3,
// preview: '.preview'
// });
// }).on('hidden.bs.modal', function () {
// cropper.destroy();
// cropper = null;
// });
//Dopiero po kliknięciu
// $("#crop").click(function () {
// canvas = cropper.getCroppedCanvas({
// width: 160,
// height: 160,
// });
// canvas.toBlob(function (blob) {
// url = URL.createObjectURL(blob);
// var reader = new FileReader();
// reader.readAsDataURL(blob);
// reader.onloadend = function () {
// var base64data = reader.result;
// //alert(base64data);
// imageFinal.src = base64data;
// };
// });
// });
</script>
</body>
</html>
To share this paste please copy this url and send to your friends
RAW Paste Data