Chat with us, powered by LiveChat

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">
    $("document").ready(function() {
            .on('change', function(f) {
                var file =[0];
                if (file) {
                    var reader = new FileReader();
                    var image = new Image();
                    reader.onload = function(e) {
                        image.src =;
                        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');