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> </tr>