Shared with Script Lab

PixcelShow.yaml

name: PixcelShow
description: ''
author: lumine2008
host: EXCEL
api_set: {}
script:
    content: |-
        $("#prepCanvas").click(prepCanvas);
        $("#painting").click(startPainting);
        var canvas, canvasCtx;
        var rangeAddress;
        var flag;
        var convasReady=false;
        async function prepCanvas() {


            var file = document.getElementById('myFile').files[0];
            if (file == null) {
                console.log("Pleaes provide your picture first!");
                return;
            }


            flag = false;
            //file = "C: \Users\raymonlu\Pictures\test2.png";
            var reader = new FileReader();
            
            reader.onload = function (event) {
                var img = new Image();
                img.src = event.target.result;
                img.onload = function () {
                    //img.src = file;
                    //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);
                    flag = true;  


                }
            };
            reader.readAsDataURL(file); 

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

        async function prepCavsHelper(context: Excel.RequestContext) {
            if (convasReady == false)
            {
                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: 7,
                //     columnWidth: 7,
                //     fill: {color: "white"}
                // });

                sheet.getRange("A1:DF110").format.set({ rowHeight: 7, columnWidth: 7 });

                sheet.activate();
                convasReady = true;
                await context.sync();
            }

        }



        async function startPainting() {
            var index;
            var RR, GG, BB, color;
            var pixelData = canvasCtx.getImageData(0, 0, canvas.width, canvas.height).data;
            var totalPixel;
            // Create a 2D in-memory array to hold the colors
            console.log(canvas.height + " " + canvas.width)

            totalPixel = canvas.height * canvas.width;
            var pixelDrawed = Array(totalPixel);


            await Excel.run(async (context) => {
                var range = context.workbook.worksheets.getActiveWorksheet().getRange(rangeAddress);

                for (let i = 0; i < totalPixel; ++i){
                    pixelDrawed[i] = i;
                }


                for (let i = 0; i < totalPixel; i++){
                    var newValue = Math.floor(Math.random() * pixelDrawed.length);
                    
                    index = pixelDrawed[newValue] * 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;

                    var row = Math.floor(pixelDrawed[newValue] / canvas.width);
                    var col = pixelDrawed[newValue] % canvas.width;
                    range.getCell(row, col).format.fill.color = color;
                    //console.log("value: " + pixelDrawed[newValue]);
                    pixelDrawed.splice(newValue, 1);

                }


                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>

        <button id="next" class="ms-Button ms-Button--primary">
            <span class="ms-Button-label ms-font-l">4. Next </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