Stack Overflow Asked on November 4, 2021
Because CamanJS is no longer maintained, does anyone know of a newer lightweight solution to add brightness and contrast adjustment to Cropper JS like this CodePen?
HTML:
<!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" />
<title>Cropper</title>
<!-- Styles -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.2.4/cropper.min.css"
/>
</head>
<body>
<!-- Content -->
<div class="container">
<h1 class="page-header">Use Cropper with CamanJS</h1>
<p id="upload">
<input id="file" type="file" />
</p>
<p id="handle" style="display: none;">
<button class="btn btn-primary" id="brightness">Brightness</button>
<button class="btn btn-primary" id="contrast">Contrast</button>
</p>
<p>
<canvas id="canvas" style="max-width: 100%;"></canvas>
</p>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.2.4/cropper.min.js"></script>
</body>
</html>
Javascript:
$(function () {
var URL = window.URL || window.webkitURL;
var $upload = $("#upload");
var $handle = $("#handle");
var $file = $("#file");
var $canvas = $("#canvas");
var caman;
function startCropper() {
// Destroy if already initialized
if ($canvas.data("cropper")) {
$canvas.cropper("destroy");
}
// Initialize a new cropper
$canvas.cropper({
crop: function (e) {
console.log(e);
},
});
}
function startCaman(url) {
caman = Caman("#canvas", url, function () {
URL.revokeObjectURL(url);
//$upload.hide();
$handle.show();
startCropper();
});
}
$handle.hide();
if (URL) {
$file.change(function () {
var files = this.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image/w+$/.test(file.type)) {
startCaman(URL.createObjectURL(file));
} else {
window.alert("Please choose an image file.");
}
}
});
} else {
$file.prop("disabled", true);
}
$("#brightness").on("click", function () {
if (caman) {
caman.brightness(20).render(startCropper);
}
});
$("#contrast").on("click", function () {
if (caman) {
caman.contrast(10).render(startCropper);
}
});
});
The CSS3 filter: rule can do these tasks naively in the browser. It supports
numerous operations:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Answered by LAX1DUDE on November 4, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP