画像処理のマイクロダーマブレーション係数を調整できる美容ツールです。Javascript版opencvで作成し、ブラウザにアクセス後、美化したい画像を選択します。
1) ローカル画像を選択
2) 肌スムージング係数を調整
3) 「美容処理」ボタンをクリック
画像処理には次の方法が使用されます。
オンラインで体験できます:クリックして参加してください
。
完全なコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
<script async src="../opencv.js" onload="" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQMxRonb/M3b9EmhCNNNrV" crossorigin="anonymous"></script>
<style type="text/css">
body,html {
height: 100%;
width: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div style="width: 100%;height: 100%;background-color: blanchedalmond;display: flex;">
<div style="width: 50%;height: 100%;background-color: cornsilk;">
<div style="width:95%;height: 85%;background-color: wheat;margin: auto;display: flex;justify-content: center;align-items: center;">
<canvas id="selectImg" style="width: 100%;height: 100%;"></canvas>
</div>
<div style="width: 100%;height: 15%;background-color: cadetblue;display: flex;justify-content: center;align-items: center;">
<input id="fileInput" type="file" value="选择图片" style="width: 300px;height: 50px;font-size: 30px;"/>
</div>
</div>
<div style="width: 50%;height: 100%;">
<div style="width:95%;height: 85%;background-color: wheat;margin: auto;display: flex;justify-content: center;align-items: center;">
<canvas id="resultImg" style="width: 100%;height: 100%;"></canvas>
</div>
<div style="width: 100%;height: 15%;background-color: cadetblue;display: flex;">
<div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column">
<div class="form-group">
<label for="formControlRange">磨皮系数</label>
<input onchange="Cv_updateShow()" type="range" min="1" max="4" style="width: 300px;" class="form-control-range" id="mpNum">
</div>
<!-- <div class="form-group">
<label for="formControlRange">细节系数</label>
<input οnchange="Cv_updateShow()" type="range" min="1" max="5" style="width: 300px;" class="form-control-range" id="xjNum">
</div> -->
</div>
<div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column">
<button style="width: 240px;height: 50px;font-size: 30px;" onclick="start()">美颜处理</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var handlePic = null;
//选取图片
let inputEle = document.getElementById('fileInput');
inputEle.addEventListener('change', function(e) {
var img = document.createElement("img");
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function() {
//获取宽高，修改显示默认大小
var showWidth = document.getElementById("selectImg").scrollWidth;
var showHeight = document.getElementById("selectImg").scrollHeight;
var imgWidth = img.width;
var imgHeight = img.height;
//计算比例进行缩放
var scale = 1;
if(showWidth / showHeight > imgWidth / imgHeight) {
scale = imgHeight / showHeight;
} else {
scale = imgWidth / imgWidth;
}
document.getElementById("selectImg").style.width = parseInt(img.width / scale) + "px";
document.getElementById("selectImg").style.height = parseInt(img.height / scale) + "px";
document.getElementById("resultImg").style.width = parseInt(img.width / scale) + "px";
document.getElementById("resultImg").style.height = parseInt(img.height / scale) + "px";
var pic = cv.imread(img);
//压缩图片
let outputPic = new cv.Mat();
cv.resize(pic, outputPic, new cv.Size(parseInt(img.width / scale), parseInt(img.height / scale)));
//显示图片
showImg(outputPic, "selectImg");
handlePic = outputPic;
};
}, false);
//显示图片
function showImg(pic, canvasId) {
cv.imshow(canvasId, pic);
}
function start() {
var mpNum = parseInt(document.getElementById("mpNum").value);
var xjNum = 3;
//美颜处理
var outPic = face2(handlePic, mpNum, xjNum);
showImg(outPic, "resultImg");
}
//美颜处理
function face2(image, value1, value2) {
let dst = new cv.Mat();
if (value1 == null || value1 == undefined) value1 = 3;//磨皮系数
if (value2 == null || value2 == undefined) value2 = 1;
var dx = value1 * 5;//双边滤波参数
var fc = value1 * 12.5;//参数
var p = 0.1;//透明度
let temp1 = new cv.Mat(), temp2 = new cv.Mat(), temp3 = new cv.Mat(), temp4 = new cv.Mat();
cv.cvtColor(image, image, cv.COLOR_RGBA2RGB, 0);
cv.bilateralFilter(image, temp1, dx, fc, fc);
let temp22 = new cv.Mat();
cv.subtract(temp1, image, temp22);
cv.add(temp22, new cv.Mat(image.rows, image.cols, image.type(), new cv.Scalar(128, 128, 128, 128)), temp2);
cv.GaussianBlur(temp2, temp3, new cv.Size(2 * value2 - 1, 2 * value2 - 1), 0, 0);
let temp44 = new cv.Mat();
temp3.convertTo(temp44, temp3.type(), 2, -255);
cv.add(image, temp44, temp4);
cv.addWeighted(image, p, temp4, 1 - p, 0.0, dst);
cv.add(dst, new cv.Mat(image.rows, image.cols, image.type(), new cv.Scalar(10, 10, 10, 0)), dst);
return dst;
}
</script>
</body>
</html>
。
opencv.jsのダウンロード
https://download.csdn.net/download/Fujian87232/17966919