Uses range formatting and external libraries to draw a colorful gradient within a range. Contributed by Alexander Zlatkovski. - Shared with Script Lab

Paint.yaml

name: Paint
description: Uses range formatting and external libraries to draw a colorful gradient within a range. Contributed by Alexander Zlatkovski.
author: jipyua
host: EXCEL
api_set: {}
script:
    content: |-
        $("#prepCanvas").click(prepCanvas);
        $("#painting").click(startPainting);
        var canvas, canvasCtx;
        var rangeAddress;
        async function prepCanvas() {
            var file = document.getElementById('myFile').files[0];
            if (file == null) {
                console.log("Pleaes provide your picture first!");
                return;
            }

            var reader = new FileReader();
            reader.onload = function (event) {       
                var img = new Image();
                img.src = event.target.result;
                //canvas = $('<canvas/>')[0];
                canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                canvasCtx = canvas.getContext('2d');
                canvasCtx.drawImage(img, 0, 0, img.width, img.height);

                console.log("a " + canvas.width + " " + canvas.height);        
            };
            reader.readAsDataURL(file);    

            try {
                await Excel.run(prepCavsHelper);
            }
            catch (error) {
                OfficeHelpers.Utilities.log(error);
            }
        }

        async function prepCavsHelper(context: Excel.RequestContext) {
            const sheet = await OfficeHelpers.ExcelUtilities
                .forceCreateSheet(context.workbook, "Paint", true /*clearOnly*/);

            rangeAddress = "A1:" + GetExcelColumnName(canvas.width) + "" + canvas.height;
            console.log(rangeAddress);
            sheet.getRange(rangeAddress).format.set({
                rowHeight: 5,
                columnWidth: 5,
                fill: {
                    color: "white"
                }
            });

            sheet.activate();
            await context.sync();
        }

        async function startPainting()
        {
            var colors2D = Array(canvas.height).fill(Array(canvas.width));
            //console.log(colors2D[0][0]);
            getColorArray(colors2D);
            console.log(colors2D[0][0]);
            await Excel.run(async (context) => {
                var range = context.workbook.worksheets.getActiveWorksheet().getRange(rangeAddress);
                for (let row = 0; row < canvas.height; row++) {
                    for (let col = 0; col < canvas.width; col++) {
                        if (row == 0 && col == 0)
                        {
                            console.log(colors2D[0][0]);
                        }
                        //range.getCell(row, col).format.fill.color =
                            //colors2D[row][col];
                    }
                }

                await context.sync();
                console.log(`The range address was "${range.address}".`);
            });   
        } 

        function getColorArray(colors2D)
        {
            var index;
            var RR, GG, BB, color;
            var pixelData = canvasCtx.getImageData(0, 0, canvas.width, canvas.height).data;
            // Create a 2D in-memory array to hold the colors
            console.log(canvas.height + " " + canvas.width)
           
            for (var row = 0; row < canvas.height; row++) {//y<height
                for (var col = 0; col < canvas.width; col++) {//x<width
                    index = (row * canvas.width + col)*4;
                    RR = pixelData[index] < 16 ? "0" + pixelData[index].toString(16) : pixelData[index].toString(16);
                    GG = pixelData[index + 1] < 16 ? "0" + pixelData[index + 1].toString(16) : pixelData[index + 1].toString(16);
                    BB = pixelData[index + 2] < 16 ? "0" + pixelData[index + 2].toString(16) : pixelData[index + 2].toString(16);
                    color = "#" + RR + GG + BB;
                    
                    //console.log(colors2D);
                    colors2D[row][col] = color;

                    if (row == 0 && col == 0)
                    { console.log(colors2D[0][0] + " " + row + " " + col); }
                }
            };
        }

        function GetExcelColumnName(columnNumber: number)
        {
            var dividend = columnNumber;
            var columnName = "";
            var modulo;

            while (dividend > 0)
            {
                modulo = (dividend - 1) % 26;
                columnName = String.fromCharCode(65 + modulo) + columnName;
                dividend = Math.round((dividend - modulo) / 26);
            } 

            return columnName;
        }
    language: typescript
template:
    content: |


        <button id="prepPic" class="ms-Button">
            <span class="ms-Button-label ms-font-l">1. Prepare your picture</span>
        </button>

        <input id="myFile" name="myFile" type="file" accept="image/x-png,image/gif,image/jpeg" />

        <button id="prepCanvas" class="ms-Button ms-Button--primary">
            <span class="ms-Button-label ms-font-l">2. Prepare the canvas</span>
        </button>

        <button id="painting" class="ms-Button ms-Button--primary">
            <span class="ms-Button-label ms-font-l">3. Start painting</span>
        </button>
    language: html
style:
    content: |-
        h2:not(:first-child) {
            margin-top: 35px;
        }

        #color-table {
            width: 130px;
            margin-bottom: 20px;
        }

            #color-table table {
                width: 100%;
            }

            #color-table td:nth-child(2),
            #color-table div:last-child {
                text-align: right;
            }

        #credits {
            margin-top: 60px;
            padding: 10px;
            background: linear-gradient(rgb(150, 150, 200), white);
        }

            #credits div:first-child {
                margin-bottom: 6px;
            }

        #size {
            width: 100%;
        }

        #draw-gradient {
            width: 100%;
        }
    language: css
libraries: |-
    # Office.js
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js

    # CSS Libraries
    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

    # NPM libraries
    core-js@2.4.1/client/core.min.js
    @microsoft/office-js-helpers@0.6.3/dist/office.helpers.min.js
    jquery@3.1.1

    # IntelliSense: @types/library or node_modules paths or URL to d.ts files
    @types/office-js
    @types/core-js
    @microsoft/office-js-helpers/dist/office.helpers.d.ts
    @types/jquery

    tinycolor2@1.4.1/tinycolor.js
    @types/tinycolor2
    spectrum-colorpicker@1.8.0/spectrum.js
    spectrum-colorpicker@1.8.0/spectrum.css
    @types/spectrum