Shell
x
1
1
npm init -y
Shell
1
1
1
npm i express
Shell
1
1
1
npm i multer
Just make a uploads
directory where all the input image
files will be stored
index.js
JavaScript
1
49
49
1
const express = require('express')
2
3
const multer = require('multer')
4
5
const {exec} = require('child_process')
6
7
const path = require('path')
8
9
const app = express()
10
11
var storage = multer.diskStorage({
12
destination: function (req, file, cb) {
13
cb(null, 'uploads')
14
},
15
filename: function (req, file, cb) {
16
cb(null, Date.now() + path.extname(file.originalname)) //Appending extension
17
}
18
})
19
20
var upload = multer({ storage: storage }).single('file')
21
22
app.post('/pixelatedimage',(req,res) => {
23
let output = Date.now() + "output.jpg"
24
upload(req,res,(err) => {
25
if(err){
26
console.log("Error in uploading file")
27
}else{
28
console.log(req.file.path)
29
30
exec(`magick convert -scale 10% -scale 1000% ${req.file.path} ${output}`,(err,stdout,stderr) => {
31
if(err){
32
console.log("Error takes place in processing image")
33
}else{
34
res.download(output,(err) => {
35
36
})
37
}
38
})
39
}
40
})
41
})
42
43
app.get('/',(req,res) => {
44
res.sendFile(__dirname + "/index.html")
45
})
46
47
app.listen(5000,() => {
48
console.log("App is listening on port 5000")
49
})
index.html
HTML
1
15
15
1
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>Image to Pixelated Image</title>
8
</head>
9
<body>
10
<form action="/pixelatedimage" method="post" enctype="multipart/form-data">
11
<input type="file" name="file" id="" required>
12
<button>Download Pixelated Image</button>
13
</form>
14
</body>
15
</html>
Run the Project
Shell
1
1
1
node index.js