因为 CamanJS is no longer maintained , 有没有人知道一个更新的轻量级解决方案来为 Cropper JS 添加亮度和对比度调整？像这样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);
}
});
});
最佳答案
CSS3 filter: 规则可以在浏览器中简单地完成这些任务。它支持
许多操作:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
关于javascript - 在没有 Caman JS 的情况下为 Cropper JS 添加亮度和对比度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62840698/