skribbbl_copypaste.js

/*
 * HOW TO USE THIS FILE -- PLEASE READ
 * 1. go to scribbl.io
 * 2. copy this entire file
 * 3. press f12 on the scribbl page
 * 4. paste this file into the console and close developer tools
 * 5. enter a game
 * 6. Search the image you want to insert on google images.
 * 7. Right click on the image that you want to select.
 * 8. When it is your turn to draw, select the drawing canvas and press [ctrl] + v
 */
var convertImageToScribblCommands = function(img, scale, previewContext){
    var allCommands = [];
    function calcImageFitCoordinates(outerWidth, outerHeight, innerWidth, innerHeight){
        var outerAspectRatio = outerWidth / outerHeight;
        var innerAspectRatio = innerWidth / innerHeight;
        if(outerAspectRatio > innerAspectRatio){
            var widthToUse = innerAspectRatio * outerHeight;
            return {x: (outerWidth - widthToUse) / 2, y: 0, width: widthToUse, height: outerHeight};
        }else{
            var heightToUse = (outerWidth * innerHeight) / innerWidth;
            return {x: 0, y: (outerHeight - heightToUse) / 2, width: outerWidth, height: heightToUse};
        }
    }
    var colorMap = [[255,255,255],[0,0,0],[193,193,193],[76,76,76],[239,19,11],[116,11,7],[255,113,0],[194,56,0],[255,228,0],[232,162,0],[0,204,0],[0,85,16],[0,178,255],[0,86,158],[35,31,211],[14,8,101],[163,0,186],[85,0,105],[211,124,170],[167,85,116],[160,82,45],[99,48,13]];
    var cWidth = 800;
    var cHeight = 600;
    var imgHeight = Math.floor(cHeight * scale);
    var imgWidth = Math.floor(cWidth * scale);
    var alterCanvas = document.createElement("canvas");
    alterCanvas.height = imgHeight;
    alterCanvas.width = imgWidth;
    var alterContext = alterCanvas.getContext("2d");
    var b = calcImageFitCoordinates(imgWidth, imgHeight, img.width, img.height);
    alterContext.drawImage(img, b.x, b.y, b.width, b.height);
    var rawImageData = alterContext.getImageData(0, 0, imgWidth, imgHeight).data;
    var diameter = Math.floor(1 / scale);
    for(var y = 0; y < imgHeight; y++){
        for(var x = 0; x < imgWidth; x++){
            let currentStartPosition = ((y * imgWidth) + x) * 4;
            if(rawImageData[currentStartPosition] != 255 || rawImageData[currentStartPosition + 1] != 255 || rawImageData[currentStartPosition + 2] != 255){
                let actualX = x / scale;
                let actualY = y / scale;
                let actualColor = 0;
                let lowestColorScale = (255 * 3);
                colorMap.forEach(function(item, index){
                    let counterOfOffset = 0;
                    for(var uu = 0; uu < 2; uu++){
                        counterOfOffset += Math.abs(item[uu] - rawImageData[currentStartPosition + uu]);
                    }
                    if(counterOfOffset < lowestColorScale){
                        lowestColorScale = counterOfOffset;
                        actualColor = index;
                    }
                });
                if(previewContext){
                    var color = `rgb(${colorMap[actualColor][0]}, ${colorMap[actualColor][1]}, ${colorMap[actualColor][2]})`;
                    previewContext.fillStyle = color;
                    previewContext.fillRect(actualX - (diameter / 2), actualY - (diameter / 2), diameter, diameter);
                }
                var yyyu = [0, actualColor, diameter, actualX, actualY, actualX, actualY];
                allCommands.push(yyyu);
            }
        }
    }
    return allCommands;

};
(function(){
    var notify = function(message){
        var kl = document.getElementById("boxMessages");
        if(kl){
            let y = document.createElement("p");
            y.innerText = message;
            Object.assign(y.style, {fontSize: "25px"});
            kl.appendChild(y);
            kl.scrollTop = kl.scrollHeight;
        }
    };
    var connected = false;
    var ypo= io;
    var tyu;
    io = function(){
        connected = true;
        var hhh = ypo();
        tyu = hhh;
        return hhh;
    };

    document.body.onpaste = function(pasteData){
        
        var clipboardItems = pasteData.clipboardData.items;
        for(var i = 0; i < clipboardItems.length; i++){
            let currentItem = clipboardItems[i];
            if(currentItem.kind === "file" && currentItem.type.substr(0, 5) === "image"){
                let fr = new FileReader();
                fr.onload = function(e){
                    var img = document.createElement("img");
                    img.src = e.target.result;
                    img.onload = function(){
                        if(connected && !(document.getElementsByClassName("containerToolbar")[0].style.display === "none")){
                            notify("Loaded Images...");
                            tyu.emit("drawCommands", convertImageToScribblCommands(img, 0.3, document.getElementById("canvasGame").getContext("2d")));
                        }else{
                            notify("You cannot paste images when it is not your turn!");
                        }
                    };
                }
                fr.readAsDataURL(currentItem.getAsFile());
                break;
            }
        }
    };
})();