convert image to base64
by John Wick
HTML
<form class="form-horizontal" id="img2b64">
<h2>Image</h2>
<img class="img-responsive" src="https://siga-pmx.s3.amazonaws.com/digitalization/1448213569280_saya_pixel.png"></img>
<h2>Input</h2>
<div class="form-group">
<label class="col-sm-2 control-label">Convert via:</label>
<div class="col-sm-10">
<select class="form-control" name="convertType">
<option value="Canvas" selected>Canvas</option>
<option value="FileReader">FileReader</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">URL:</label>
<div class="col-sm-10">
<input type="url" name="url" class="form-control" placeholder="Insert an IMAGE-URL" value="https://siga-pmx.s3.amazonaws.com/digitalization/1448213569280_saya_pixel.png" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default">
</div>
</div>
</form>
<div class="output form-horizontal" style="display: none">
<hr>
<h2>Output</h2>
<div>
<strong class="col-sm-2 text-right">Converted via:</strong>
<div class="col-sm-10">
<span class="convertType"></span>
</div>
</div>
<div>
<strong class="col-sm-2 text-right">Size:</strong>
<div class="col-sm-10">
<span class="size"></span>
</div>
</div>
<div>
<strong class="col-sm-2 text-right">Text:</strong>
<div class="col-sm-10">
<textarea class="form-control textbox"></textarea>
</div>
</div>
<div>
<strong class="col-sm-2 text-right">Link:</strong>
<div class="col-sm-10">
<a href="#" class="link"></a>
</div>
</div>
<div>
<strong class="col-sm-2 text-right">Image:</strong>
<div class="col-sm-10">
<img...
CSS
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
body{
padding: 20px;
}