simple-image-server v1.0.2
simple-image-server
Command line utility which starts a web server that you can save and query images from. Only supports png images.
So install with
npm install -g simple-image-serverand then you can override the port and place where the files go (default to ~/simple-image-server) for example
simple-image-server -p 3000 -d /some/path/herePhoto route is at /photos/. So for example, you send a POST with a base64 encoded png image to /photos/hello and you can then view it by sending a GET to /photos/hello.png (or just navigate in a browser to it)
Valid photo names are limited to what is considered valid by https://www.npmjs.com/package/sanitize-filename
If you want something to handle more case names and you want to use this just send me an email at bradmedeiros0@gmail.com and we can improve this. The goal here is just to have a simple generic photo upload/download tool. Nothing fancy.
Example html if you're trying to get it to work with this (this server was made to rip webcam images an upload them to this server).
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px;
padding: 0px;
}
#videoElement {
width: 100vw;
height: 100vh;
background-color: none;
position: relative;
}
</style>
</head>
<body>
<video autoplay="true" id="videoElement"></video>
<form method="post" accept-charset="utf-8" name="form1">
<input name="hidden_data" id='hidden_data' type="hidden"/>
</form>
</body>
<script>
const video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
const handleVideo = stream => { video.srcObject = stream; };
const videoError = e => {
console.error('video error');
};
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
const uploadWebcam = imageName => {
const video = document.querySelector("#videoElement");
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth * 1;
canvas.height = video.videoHeight * 1;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL("image/png");
document.getElementById('hidden_data').value = dataURL;
const fd = new FormData(document.forms["form1"]);
const xhr = new XMLHttpRequest();
xhr.open('POST', `http://localhost:3000/photos/upload/${imageName}`, true); // change this to the port you want
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
}
};
xhr.send(fd);
};
</script>
</html>