WOPP Drawing script

DrawPX=function(x,y,clr){
MPP.addons.draw.mkline(x,y,x+1,y,6,clr);
MPP.addons.draw.mkline(x,y+1,x+1,y+1,6,clr);
};


var RgbToHex = function(rgb) {


var TheRgbToHex = function (rgb) {

var hex = Number(rgb).toString(16);
  if (hex.length < 2) {



  hex = "0" + hex;
  }
  return hex;
};
var red = TheRgbToHex(rgb[0]);

 var green = TheRgbToHex(rgb[1]);


var blue = TheRgbToHex(rgb[2]);
  return red+green+blue;}

function functiondrawimg(){};
imageBotX=5;
imageBotY=5;
imgBotX=imageBotX;
imgBotY=imageBotY;
drawing1=false;
i_max1=0;
j_max1=0;
drawImgFT=false;
WOPPImageSRC="";
function drawImg(context, width, height){
var botft=false;
 drawImgFT=true;
    var i = imageBotX; //starting x-value
    var j = imageBotY; //starting y-value
    var _i = i;
    var _j = j;
var i1=0;
var j1=0;
    var i_max = i + width;
    var j_max = j + height;
i_max1=width;
j_max1=height;

if(drawing1==true){
  for(var ib=0; ib < j_max1; ib++){
setTimeout(function(ib){
for(var ia=0; ia < i_max1; ia++){
        let pixelArray = context.getImageData(i - _i, j - _j, 1, 1).data;
pixelarray=pixelArray;

DrawPX(imgBotX+i1, imgBotY+j1, "#"+RgbToHex([pixelArray[0],pixelArray[1],pixelArray[2]]));

if (pixelArray[3] > 25){
            var arr = new ArrayBuffer(11);
            var dv = new DataView(arr);
            dv.setInt32(0, i, true);
            dv.setInt32(4, j, true);
            dv.setUint8(8, pixelArray[0]);
            dv.setUint8(9, pixelArray[1]);
            dv.setUint8(10, pixelArray[2]);

        }

        i++;

i1+=1;

if (i > i_max-1){
j1+=2;
i1=0;

            i = _i;
 j++;
        }



    }

},256*ib,ib);

}
}

}

window.copier = {};
copier.maxHeight = 50;
copier.maxWidth = 50;
copier.img = new Image();
copier.img.onload = function() {
    copier.canvas = document.createElement('canvas');
   copier.canvas.width = this.width;
    copier.canvas.height=this.height;
    copier.ctx = copier.canvas.getContext('2d');
    copier.ctx.drawImage(copier.img, 0, 0, copier.canvas.width, copier.canvas.height);
    drawImg(copier.canvas.getContext('2d'), copier.canvas.width, copier.canvas.height);
}

function encodeImageFile(){
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0){
        var fileToLoad = filesSelected[0];
        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) {
            let src = fileLoadedEvent.target.result;
            copier.img.src = src;
            console.log(src);
WOPPImageSRC=src;
        }
    }
    fileReader.readAsDataURL(fileToLoad);
}

(function styleInit() {
    var head=document.getElementsByTagName('head')[0];
        if (!head) {
            return;
        }
    addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em;
    position: absolute;bottom: 0;right:20px;width: 20%;
    background-color: rgba(0,200,200,0.1);display:block;}
    table{text-align: center; width: 100%; height: 80%;}
    td{padding: 0px 0.3em;border: 1px solid black;}`);
    function addGlobalStyle(css) {
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }
})();
var temp = `<div id="styleSetting">
<input id="inputFileToLoad" type="file" style="display:none" onchange="encodeImageFile()"/>`
document.querySelector('body').insertAdjacentHTML('beforeend', temp);
//document.getElementById('inputFileToLoad').click();

$("body #bottom .relative").append('<div id="WOPPDRAWING" class="ugly-button 2_btn" style="position: fixed;bottom: 8px;right: 450px;width: 180px;">Draw image</div>');
$("#WOPPDRAWING").click(function(){
drawing1=true;
document.getElementById('inputFileToLoad').click();

});