Shared with Script Lab

basic cellproperties set.yaml

name: basic cellproperties set
description: ''
author: lumine2008
host: EXCEL
api_set: {}
script:
    content: |-
        $("#prepCanvas").click(prepCanvas);
        $("#painting").click(startPainting);
        var canvas, canvasCtx;
        var rangeAddress;
        var flag;
        async function prepCanvas() {
            var file = document.getElementById('myFile').files[0];
            if (file == null) {
                console.log("Pleaes provide your picture first!");
                return;
            }
            flag = false;
            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 * 2;
                canvas.height = img.height * 2;
                canvasCtx = canvas.getContext('2d');
                canvasCtx.drawImage(img, 0, 0, img.width, img.height);

                console.log("a " + canvas.width + " " + canvas.height);  
                flag = true;  
            };
            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*/);
            await context.sync();
            while (true) {
                if (flag === true)
                    break;
            }
            rangeAddress = "A1:" + GetExcelColumnName(canvas.width) + "" + canvas.height;
            console.log(rangeAddress);
            sheet.getRange(rangeAddress).format.set({
                rowHeight: 1,
                columnWidth: 1,
                fill: {
                    color: "white"
                }
            });

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

        async function startPainting() {
            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)
            
            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(color);
                        }
                        index = (row * canvas.width + col) * 4;
                        RR = pixelData[index] < 16 ? "0" + pixelData[index].toString(16) : pixelData[index].toString(16);
                        //console.log(RR);
                        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(color);//test if get the data

                        range.getCell(row, col).format.fill.color =
                            color;
                        //console.log(colors2D[0][0]);
                    }
                }
                range.load("address");  //这里是我加的
                await context.sync();
                console.log(`The range address was "${range.address}".`);
            });
        }



        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,image/jpg" />

        <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: |
        /* Your style goes here */
    language: css
libraries: |
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
    https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts

    [email protected]/dist/css/fabric.min.css
    [email protected]/dist/css/fabric.components.min.css

    [email protected]/client/core.min.js
    @types/core-js

    @microsoft/[email protected]/dist/office.helpers.min.js
    @microsoft/[email protected]/dist/office.helpers.d.ts

    [email protected]
    @types/jquery