SaveCanvas

by Elkokonut

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.29.0/js/canvas-to-blob.min.js"></script>
<!-- /canvas.offers -->

<div class="form">
  <!-- All rows here -->


  <input id="textInput" placeholder="Your username" type="text" /> <button id="generateCanvasBtn">
    Generate
  </button>
  <button id="downloadImage">Download image</button>

</div>
<!-- /div.form -->

<div>
  <p id="textOutput">

  </p>
</div>

<canvas height="891" width="630" id="canvas">
  Sorry, canvas not supported
</canvas>

JavaScript

const URL_SRC = "https://www.eldarya.fr/";
const WIDTH = 630;
const HEIGHT = 891;

const canvas = document.getElementsByTagName("canvas")[0];
const ctx = canvas.getContext("2d");


function drawImages(imgs) {
  canvas.width = imgs[0].width;
  canvas.heigth = imgs[0].height;
  imgs.forEach(img => ctx.drawImage(img, 0, 0));
}

function generateCanvas(imagesURLs) {
  var imgs = [];
  var counter = 0;
  imagesURLs.forEach(imgURL => {
    var img = new Image();
    imgs.push(img);
    img.crossOrigin = "Anonymous";
    img.addEventListener("load", function() {
      counter++;
      if (counter == imagesURLs.length)
        drawImages(imgs);
    }, false);
    img.src = imgURL;
  })
}


function getImagesURLs(pseudo) {

  const url = `${URL_SRC}player/profile/${pseudo}`;
  $(function() {
    $.ajax({
      url: url,
      success: function(data, status, jqXHR) {
        // cleaning the data
        var str = data.slice(data.indexOf("wornItems"));
        str = str.replaceAll(/JSON\.parse\([^\)]*\)/g, '');
        str = str.replaceAll(',[]', '');
        str = str.replaceAll('wornItems.push(new ', '');
        str = str.replace('wornItems = [];', '');
        str = str.replace('wornItems = [];', '');

        // getting class of hidden elements
        var exclude = [...str.matchAll(/\[(?:[0-9],*)+\]/g)];
        
        
        str = str.replaceAll(/\[(?:[0-9],*)+\]/g, '');
        if (exclude.length > 0) {
          exclude = exclude.join().replaceAll('[', '').replaceAll(']', '').split(",");

          var arr1 = str.split("Sacha.Avatar.");
          arr1.splice(arr1.length - 1, 1);

          // remove hidden elements
          arr1 = arr1.filter(function(s) {
            return !exclude.some(function(n) {
              return s.includes(',' + n + ',');
            })
          });

          str = arr1.join();
        }


        // get images urls
        const regex = /assets\/img(\/item\/player|\/player\/\w*)\/web_full\/\w*~\d*\.png/g;

        var arr =...