增加亮度和对比度的裁剪JS没有卡曼JS？
增加亮度和对比度的裁剪JS没有卡曼JS？
提问于 2020-07-11 02:56:03
因为CamanJS is no longer maintained，有没有人知道更新的轻量级解决方案，可以像这样给Cropper JS添加亮度和对比度调整
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);
}
});
});回答 1
Stack Overflow用户
发布于 2020-07-21 17:30:37
CSS3 filter:规则可以在浏览器中执行这些任务。它支持多种操作：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62840698
复制相关文章
相似问题
腾讯云开发者
