This is old news by now for most but I had quite a bit of fun implementing it for myself and figured I'd share my code and some learnings that came along with it. The basic idea is to use canvas
to render an uploaded image and then utilize the toDataURL
method on canvas to retrieve a Base64 encoded version of the image. In the example included here we will just direct link to the newly scaled image but you could imagine that we kick off an ajax request and actually process the image (in PHP base64_decode
FTW). Without any more tangential delay let's take a look at the code.
<input type="file" accept="image/*" id="imageFile" />
<table>
<tr>
<td>Width: <input type="text" id="width" value="200" style="width:30; margin-left: 20px;" /></td>
</tr>
<tr>
<td>Height: <input type="text" id="height" value="200" style="width:30; margin-left: 20px;" /></td>