Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
detect and blur images pixlab
async function blurImage(faceCoordinate, imageUrl) {
try {
let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
url: imageUrl,
coord: faceCoordinate,
}),
});return blurimageResponse.json();
} catch (error) {
throw "Blur image function is not working";
}
}
<button id="btn-process">Process</button>
const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");
async function facedetect(imageurl) {
try {
let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
url: imageurl,
}),
});let tempjson = await faceDetectionResult.json();
return tempjson.faces;
} catch (error) {
throw "Face detection not working";
}
}
<input
type="file"
accept="image/jpeg,image/png"
id="imageinput"
/>
function readFileAsync(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
}imageInput.addEventListener("change", async (e) => {
const fileList = e.target.files;
if (fileList.length > 0) {
let data = await readFileAsync(fileList[0]);
image.src = data;
file = fileList[0];
}
});
<img id="image" />
<img id="finalimage" />
<!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.0" />
<title>Pixlab web</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
processBtn.onclick = async () => {
if (file) {
let imageUploadResponse = await uploadToStore(file);
if (imageUploadResponse["ssl_link"]) {
let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
if (faceCoordinates) {
let blurimage = await blurImage(
faceCoordinates,
imageUploadResponse["ssl_link"]
);
finalImage.src = blurimage["ssl_link"];
}
}
} else {
throw "No file present to process";
}
};
app.post("/facedetect", (req, res) => {
axios
.get("https://api.pixlab.io/facedetect", {
params: {
img: req.body.url,
key: process.env.PIXLAB_KEY,
},
})
.then((resp) => res.json(resp.data))
.catch((err) => console.error(err));
});
app.post("/mogrify", (req, res) => {
axios
.post("https://api.pixlab.io/mogrify", {
img: req.body.url,
key: process.env.PIXLAB_KEY,
cord: req.body.coord,
})
.then((resp) => res.json(resp.data))
.catch((err) => console.error(err));
});
app.post("/upload", (req, res) => {
try {
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send("No files were uploaded.");
}
let image = req.files.image;// If you want to save the image
// image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
form.append("file", image.data, image.name);
form.append("key", process.env.PIXLAB_KEY);form.submit(
{
protocol: "https:",
host: "api.pixlab.io",
path: "/store",
method: "POST",
headers: {
"Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
},
},
(err, resp) => {
if (err) {
res.status(503).send("File server is currently unavailable");
}
resp.pipe(res);
}
);
} catch (error) {
res.status(500).send(error);
}
});
async function uploadToStore(image) {
const formData = new FormData();
formData.append("image", image);
try {
let response = await fetch("http://localhost:5000/upload", {
method: "POST",
body: formData,
});
return await response.json();
} catch (error) {
throw "Fetch request give some error";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment