Convert Image to Base64 Data URI

In Spreadsheet Paintings, you upload a photograph from the local disk and it transforms the picture into pixel art. Internally, the JavaScript resizes the image using the HTML5 Canvas API and then uploads the base64-encoded representation of the canvas data to the Google Script using the HTMLService where the pixels are converted into RGB colors.

<input type="file" id="image">
<canvas></canvas>
<script>
    $("document").ready(function() {
        $('input[type=file]')
            .on('change', function(f) {
                var file = f.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    var image = new Image();
                    reader.onload = function(e) {
                        image.src = e.target.result;
                        var canvas = $('canvas')[0];
                        canvas.height = image.height;
                        canvas.width = image.width;
                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(image, 0, 0);
                        var dataURL = canvas.toDataURL('image/png');
                        console.log(dataURL);
                    }
                    reader.readAsDataURL(file);
                }
            });
    });
</script>