Skip to content

Instantly share code, notes, and snippets.

@tpmccallum

tpmccallum/image_processing_using_JAMStack.html

Last active December 29, 2020 04:52
Show Gist options
  • Save tpmccallum/0e7836ed6d38dc93b852b711a6bad515 to your computer and use it in GitHub Desktop.
Save tpmccallum/0e7836ed6d38dc93b852b711a6bad515 to your computer and use it in GitHub Desktop.
Download ZIP
An HTML page which accesses API endpoints for image processing
Raw
image_processing_using_JAMStack.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Image processing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function callService(_wasm_id, _function_name) {
setTimeout(function() {
$(':button').prop('disabled', true);
}, 0);
var formData = new FormData();
formData.append('input_image', $('#input_image')[0].files[0]);
$.ajax({
url: "https://rpc.ssvm.secondstate.io:8081/api/multipart/run/" + _wasm_id + "/" + _function_name + "/bytes",
type: "post",
data: formData,
contentType: false,
processData: false,
xhrFields: {
responseType: 'blob'
},
success: function(data) {
const img_url = URL.createObjectURL(data);
$('#output_image').prop('src', img_url);
$(':button').prop('disabled', false);
},
error: function() {
alert("Rate limit exceeded");
$(':button').prop('disabled', false);
}
});
return false;
}
</script>
</head>
<body>
<div class="container">
<div style="text-align:center;margin:25px">
<a href="https://www.secondstate.io/"><img style="border:0;" src="https://www.secondstate.io/assets/img/logo.png"></a>
<div style="font-size:90%;color:gray;margin:20px"><a href="https://www.secondstate.io/faas/">Fast, safe, portable and serverless Rust functions as services</a></div>
</div>
<h1>Image processing using JAMStack</h1>
<form id="draw" enctype="multipart/form-data">
<div class="form-group">
<label for="input_1">Please upload an image file (<a href="https://second-state.github.io/wasm-learning/faas/image-grayscale/html/cowboy.png" target="_blank">here is an example image for you to use</a>)</label>
<p style="font-size:0.5vw;">Image Attribution: Wyofile, CC BY-SA 4.0, via Wikimedia Commons</p>
<input type="file" class="form-control-file" id="input_image" name="input_image">
</div>
<button class="btn btn-primary mb-2" id="process_flip_h" name="process_flip_h" value="1" onclick="return callService(272, 'flip_h');">
Flip Horizontal </button>
<button class="btn btn-primary mb-2" id="process_flip_v" name="process_flip_v" value="1" onclick="return callService(272, 'flip_v');">
Flip Vertical </button>
<button class="btn btn-primary mb-2" id="process_brighten" name="process_brighten" value="1" onclick="return callService(268, 'brighten');">
Brighten </button>
<button class="btn btn-primary mb-2" id="process_grayscale" name="process_grayscale" value="1" onclick="return callService(273, 'grayscale');">
Grayscale </button>
<button class="btn btn-primary mb-2" id="process_thumbnail" name="process_thumbnail" value="1" onclick="return callService(274, 'thumbnail');">Thumbnail </button>
<button class="btn btn-primary mb-2" id="process_rotate_90" name="process_rotate_90" value="1" onclick="return callService(269, 'rotate_90');">
Rotate 90 Degrees </button>
<button class="btn btn-primary mb-2" id="process_rotate_180" name="process_rotate_180" value="1" onclick="return callService(270, 'rotate_180');">
Rotate 180 Degrees </button>
<button class="btn btn-primary mb-2" id="process_rotate_270" name="process_rotate_270" value="1" onclick="return callService(271, 'rotate_270');">
Rotate 270 Degrees </button>
</form>
<div class="jumbotron">
<img id="output_image" class="img-fluid rounded mx-auto d-block"/>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment