Created
July 17, 2022 19:37
-
-
Save hrishiksh/082bb69293963c5df973c9b20719f7f6 to your computer and use it in GitHub Desktop.
detect and blur images pixlab
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button id="btn-process">Process</button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const imageInput = document.getElementById("imageinput"); | |
| const image = document.getElementById("image"); | |
| const finalImage = document.getElementById("finalimage"); | |
| const processBtn = document.getElementById("btn-process"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input | |
| type="file" | |
| accept="image/jpeg,image/png" | |
| id="imageinput" | |
| /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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]; | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img id="image" /> | |
| <img id="finalimage" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"; | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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)); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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)); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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