watermarkjs
Version:
Watermarked images in the browser
137 lines (125 loc) • 5.83 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>watermark.js - watermarks in the browser</title>
<script src="/scripts/watermark.js"></script>
<script src="/scripts/upload.js"></script>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab|Maven+Pro' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center"><a href="/">watermark.js</a></h1>
<nav>
<ul>
<li><a href="/images.html">images</a></li>
<li class="separator">-</li>
<li><a href="/text.html">text</a></li>
<li class="separator">-</li>
<li><a href="#">uploading</a></li>
<li class="separator">-</li>
<li><a href="pooling.html">pooling</a></li>
<li class="separator">-</li>
<li><a href="docs.html">documentation</a></li>
</ul>
</nav>
<div class="row">
<div class="col-xs-12">
<p class="lead">
It would be pretty handy to upload a watermarked image once generated. Doing so in the client is a
great idea, especially if you are uncertain about image library support in a hosting environment. JavaScript is
decent at doing things concurrently as well, so you can even make your application snappier by letting the client
upload multiple images concurrently instead of a hosting environment that may or may not support such things.
</p>
<p class="lead">
The form below allows you to generate a watermarked image and upload it to <a href="http://aws.amazon.com/s3/" target="__blank">Amazon S3</a>. The form expects
a an access key id, a policy, and a signature. If you want an easy tool for generating the policy and signature, you can check out <a href="https://github.com/brianium/policy-signer" target="__blank">policy-signer</a>.
More info on policy documents can be found <a href="https://aws.amazon.com/articles/1434#policydocument" target="__blank">here</a>.
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<form action="" id="uploadForm" method="POST" style="margin-top: 45px;">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="target">
</span>
</span>
<input type="text" class="form-control" readonly>
</div>
<span class="help-block">
Select the image to watermark
</span>
<div class="input-group">
<span class="input-group-btn">
<span id="watermark-button" type="button" class="btn btn-primary btn-file" disabled>
Browse… <input type="file" id="watermark">
</span>
</span>
<input type="text" class="form-control" id="watermark-name" readonly>
</div>
<span class="help-block">
Select the watermark image
</span>
<div class="input-group">
<h3>Position</h3>
<div class="row">
<div class="col-xs-6">
<div class="radio">
<label><input type="radio" name="position" value="lowerRight" checked disabled>Lower Right</label>
</div>
<div class="radio">
<label><input type="radio" name="position" value="lowerLeft" disabled>Lower Left</label>
</div>
<div class="radio">
<label><input type="radio" name="position" value="upperRight" disabled>Upper Right</label>
</div>
</div>
<div class="col-xs-6">
<div class="radio">
<label><input type="radio" name="position" value="upperLeft" disabled>Upper Left</label>
</div>
<div class="radio">
<label><input type="radio" name="position" value="center" disabled>Center</label>
</div>
</div>
</div>
</div>
<h3>Amazon S3 Info</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Access Key ID" id="accessKeyId" disabled />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Policy" id="policy" disabled />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Signature" id="signature" disabled />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Bucket" id="bucket" disabled />
</div>
<button id="upload" type="submit" class="btn btn-default" disabled>Upload</button>
<div class="progress" id="progress" style="margin-top: 20px; visibility: hidden;">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 0%">
</div>
</div>
<p id="complete" style="display: none;">
upload complete!
</p>
<p id="error" style="display: none;">
there was an error uploading
</p>
</form>
</div>
<div class="col-md-offset-1 col-md-7" id="preview">
<h2 class="text" style="margin-top:0">Preview</h2>
</div>
</div>
</body>
</html>