How to generate image on canvas and use it in file input in cypress tests without real file storing.

random_image_canvas_cypress.js

// install package:
import 'cypress-file-upload';

// add the command:
Cypress.Commands.add('makeRandomisedImage', (callback) => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const width = 1200
  const height = 1200
  canvas.width = width;
  canvas.height = height;
  const base64Cat = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEhAQEBIQEBUSEg8QEBAQDxAPDw8QFRUWFhUVFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OFQ8QFS0dFxkrLSsrLSsrKy0tLS0tKy0tLS0tLSstLS0tLS0rLSsrLS03Ky0tKysrKysrKysrKy0rK//AABEIAMIBAwMBIgACEQEDEQH/xAAcAAAABwEBAAAAAAAAAAAAAAAAAQIDBAUGBwj/xAA/EAABBAAEBAQDBgUCBAcAAAABAAIDEQQFITEGEkFREyJhcQcygRRCUpGSoSNygrHBU2LR4fDxFRYkMzRDVP/EABkBAAMBAQEAAAAAAAAAAAAAAAABAgMEBf/EAB8RAQEBAQADAQEBAQEAAAAAAAABEQISITEDQSIyE//aAAwDAQACEQMRAD8A5Sd0olKRFqVdAgU43RNvddeiWHXoUgWG9Qisgo2GglwakkoBJPdNuA6J3lFm+6bk0FBIjNIEIXogUU59XHD2HtxcdhstjGKZaz+S02NvqrvEPpm+6wr0fy5mG7vXdOxn6KtjlIohSJ8UA0nbS1PM9tO7kZzjDMPNyNPuqLA43lOuyazPEF8jneqlZHl5leNNBuV0WenBOre/TUZI0vJf90bK+LqCjYdrWNDGigmMXiaWPjtdt6zkvF4gNBdaxeb5jzOobAp7OMwe/wArdieUV1PZVuHwfMCSXaBxoN5nEAgf3K6+fjzP162tVwLxPBhHSOkDjzitlbZ1xbgp9udp9lz4YU7t5qFAlwDSCelWkuwrgCa0Bd2ugdTS257rk6/OW61UeaYYGxI4aVqFUZiYHvLxKTfcKDFl5O/lstHQnW9+yj4aHncGWBZqzoE7+g5/OT4ekjjvR6SXtGxJTYgcSKF24tB7kbpRwz6BrQ11F67WFPmrxgjiB0Sm4wDolQ5eSXNcQ0ge/mOzUUGXFzQ62i+fQkX5RqjzHiBx/Sk2cSOyH2V1c1dtiCddtEs4F2tjpYqjZsAjTrqjRhBxXRBuJrompIyDR6bpLmo8hiR9q9EFGpBLzprgboy5EAgSsK6Bd0bq/JFY6ogUgW0WnWS0a7ppo1TobZrsghYg9Ew/SlLli09U05miBDBRFGOyDnBKq5+tVkMJc1tqXnE3LyM9QEvIGfw2eyhZ7IOdv8wXP19ep+frlPihAHuqLijFFrOQbnRX0L/KsdxXPbw3tqr4ntn+9zlSRNLiBuSaXQspwHhQt01IsmlhMpcBMwu2tdEzHM2 hg5SKoLXufxy/hZ9qunxtXrXqs/mua35Wn3Ki5hj+YnlNC1XXujjgv2/bUnDYlrQOYF3K/nbRrWuqP7XvQItnIKNFut2ogQJXRI4rUlmJoUbPna+yd6FUn35lY2INOAoiqJO/5qtBSgU8JPbj2glwYbc8Pd5tLG9fmmGyMDmua1wo2Q5wN6+yjkomlTQnRYrlDxXzWQfwk6E/knTj7A0N+QEWA0htenoq+0LSVEsY1zQeXQl5eSaPsNuiP7c275TvIaDhs8UenfVQyUkJBYR5gAKDSPk0scoLSPTrSQ3GhpJjaWkg6l16kg/4pQUEyw5M8FxIFAm6u9eqQ4okEDBII0SBi4opIG9qb4HVRy0b+uoUVuaez1SgQBSsgIW3TDJzNABJotPopTMmacK+fQOY4CidSEgomy0FIwz0Rib10QcGjqgj3ME1MCktcFZTZc8Brtw4ICmLaNpMlFS5oyLB/ZRmNSqp9jY8PzXEzrQKqeIp/Oz+YFPcMy0OXerUTi35mlY5tejv+Yv8JKCxY3iBtzP9Fs8oc12HadNBqVmsfgDI2XENvl5+UfRXzMY/t3LzjMg7V+afkxLyKJJTbm0SK2Qcto4Ns+EBKCCJWgLSnbJAQadUSpEAjCMlEnoAowUEAEqcC0doBqBCRiRhABEgBSFIIWgBSFIWjtAFSCVzI0BoY7LTZUNraN31Vhh6LO5qz6BROYdjW3NWiitk2BrTrr30VzDA5+Gle1hLGEWTpqqWN1K1kxj24fwwaa424d1PsKwlli4/zOidGPDflijP8wtRubvqmJBumTRZNmL3SMJhg5CaPlTPE2ZF0r2sAY1unlFC1By5xpovY3Xqo8z7MhO9pkjONtPdRG3afe5NEqdOequ+FpWh7g7sovF84LgAq+KUtII0SMxfzapSOjr9f84Thc1kazwmnQ6LTZK8ugOGPQ83vaxLNKPqtHhpy0RyNNdHJ2MtU2bM5ZXNHQqMxWOekOk5x95VwNKpWVG4JJSih2VoIAR0lUjAQRqkdIykhAwvlQCNxRBAwSCOkRQYwiQCCANEgjBQApEjtAoAkEEEDHacw4WhOGayC2TMby833ZB6qz4eyXDswX2XEBpeQ5z3dQfQpbcQbGhKVI+9S1PxOVgf/LUjmSzQFrmRucCDoaB3UKSzGPTT6rY8XY9seHMbAWF+nl0Hraxwf5GhTYuXUMxqPM0qxawu0a0n2VlhuF5Hi5DyDfuoUpsv2J7KXl+W88Mz+1lTZeHzEx5a7mFHStVc8NYQfY5CfwutMnNebdHQS3t39ykNakKQWpMxsUluCHLonISrKvMkcHscwmuo9VTTDVP5bPyube10gaVi324jsaUYhaPO+Gp42icN543gOBbqQD3WfrogqRGglNbqkjQq0FNQKMOQJQDZQASkOiAIpICWUKQBIFAoWgAiSgiQBIIdSgCgAjQQpB4JBHXqggY7tFNdFKbMf3USI79kJZxHE+Q/dBI160Vr/EM1xpmHiSNiGzNXe6r8JhXScoG3Uqslnc9z3nUvN/QrcZRhA2IGvM4LG1pPRrCwNjFAfX1U6OcnRRpSR0SsKdVCklosPB2IKcyePlw0w6crqTLtn+ycwJrDTa/dcmblkgJv+YpFJ9h0/qKZk3SMnmS29khzdQl1ScKxW45tHRMMU7MY9ioXZORHx1Lg7MrhEfMH6C2E3olZxwRDiLkw7hC87sOxKxfCmY+HIBW+hPouo4aUENI0sXYUdXG85nUcmzfIMRhnVKx1dHtBIP1VVKNV6DixDHs8OVjXjbzCyqPOvh5h5iJIDyEnUdFU6ZdcY4sGlGuuu+GDSPnCWPhOwiy837J6jHIQEL0pdSxnwmff8OYDTqE1gvhI/m/izDl9BqjRjmIBQ3XYR8KoxtIT7hUfEnwxmYOaCngVoEaqRzlEVfy8G40CzC4+gCcyvgfGTP5PDdH3c8I8hjOp3D4WR9BjHOvagV1LLPh9BCAcQ7nPbordjIIvLDG1v+6gl5HOWDybgV7qfiXeG068vUhQONYoI3tjw7a5RTj3W6zfFU0ue7YGly3NJueRzj12T0YiAI6SeZKRpUVIIUgjSduYPyWa45xwDWQNJFm3AdVpYx97sLPZc8z/ABQlmdIOhpvbTRbW+kRKyPKfF87ncoaRp3pbloby6bAUFn+FXtdGWt3Bs91bXX/Bc7QKu7SIQBSVLNrqKTbHAmvqgkh8fzapDXVDOP8AYSnJCOiYxkgEEvq0hCpXNGDy/UpBPdOuHZNkaoMRRvJSXUlAIhDxURdHzdtFUFaRjf4ThXqs48UVpEdFQyEG2miuncI4o+G0PeCe3VcuadVo+Fi4zxgXXusu1/n1ddcwTQfVXkGgVfg4Q0KU12yznTovOrKJPE6UosTttU85yXmnwLs9UT3BR3zJgvtXz0jxS+f6pLpvX3UYvTfPurPEibGtA3/ZUmYZzXymvbRLxLLGipcVhNbOqztaTmFOmc/Vxu/VB7QBR0PdJjrYbqHnOPaxjg/R1Gk+U9ZGN4yzcn+EO+vdY8uT+PxBc9xJvXRMtK0ZaUBaBCU4JJKZByoJPOiRodgzLHlrOWMAF2jifw9Vicc9vKeQbO0T2NxLwBznXoP8Kvmmc5utD2WtZ8xbcK44RSkHTmFX6rW+LrZOnRc4jfWvaitXl+LL2tN7dFjVreZ1/mkOd5hSZZMdUbZtUglzmgo2PBGHkPonpZRWygZ7Kfsz9d9ECMW9w0THMluboEQSUS5qWHUP7IijLbTgxYYUktI9Dos9io9SPUrRYNtKmzdlP99VozqvC6B8Osv5j4mmiwUDLIC7PwLgGxwMrd2qx/Sr/OLqfM4o6a5wafVS4pQ7VpB06Kl4w4WOKjHhUHjUG6VFwZlGMw8xEx8gB6krG5jqjoWGcnJZFFZKEHzhoLv2WasJlnPqiEh7rEcUcWSscWRRu660qKHOMbiOVkTHtferqPLS149IsdaYb3Ruj7Kp4fwE7WN8d9mtVeAALTyTismaQe6iTREgq60KT4Y2pGF5M1FHzOA2rUlc/wDiDmVzBjDtVrrE+BaBIRuWmvdcCzoO8eXmsnmKvmM+ukFwSgapJKMFNFOptyWkOQIFIJKCRtfnM5cHSED59K6BVza5Sp/IXNc2hq291XwN0N/ktbUcksH9lPy/F8hA7qACnIqGt+yirrVCU8oI6pTHnRUuAxZohysWSjcFSUWeJd5L9lAzaT+AQTupT3XGT7Ktzp48NoQahmZQBUUAnVPTS9Bsmg7RKmIlA2jCAar5g1a4OMhtlVedNuirCGQ1yqBmWoVosQcAzzt912zJnhscQH4QuKZc0+I33C69HIWxREfhC5v0acNVFPQCiYrEi6tV2BxhrXums5ic0+LGb7rDHXxJVpDihYFi1JbHe+yyuXYSWVzXF4A7dVqoIixoBNpKswbsBGd2tPuE7FAxnyNDfYInz1SiTY8BPaztTZZeqjfalXS5jemqET+60lZ1aMlTgmCri7sia43qrl9oqZM7T81xDjSOsTJ01XZXTVdrkHHLrnefVdEnpl0zSAKBRBLClPBybcUaCmqIpBKQSNdywyNOocPUHSkmJw3vp1TGEzORtAnnA3Dld4WWKUWAB3A6K2Sn5tU63a0/mOC8M3dtO3omWdkLPMfolYPEkXX7pi0eEcPNamhqMJM58LzVUqnMpA6NquckiuGRoF2Cs64+XlJ2JCWCIDT0pKeKTocEzK6yhZsmylNcLF9wmj8yejjspxNWzCK0VdiIwTSnNFN0UQtp3dXCR8NHyu2AFrouDeTHGfRc9i1kA211XTsBGPDjGmyx7XwiHFcm6iY3iRmrL/dWOY4YEErNPyIPcXUsnRzfa1yviNlhvMB9Vooc0uvNf1WMdw+wVQIKaGEnjd5bI+qWNO28OPUPE4izus/HLLVEa+6dw7HuOv8AdDHV5EAa1CmsIrdVeEwzulqbFE4boCc0p9oUYHRL8YKufqOi5miiuS8fYWpbtdSlnoFcz+Ib7eK+q6p8YdViiUpoRcqVSCg7QQRqaoSCCCRHBqQG2T0AWkyPAFrC5256J7BYFkWws9SRqjxOKLWkjurxMM5rN5eUqtBNJuSeyS4oCcJNIed3CJj6s+yZmxXQBR3TEoK10zgd7XeU18rifyWQzMcj5B0LnEe1qw4Qx3hEk7ltD6qqzycCV17IpSorCkSu7JDsS1NOxIU4rTw3+ik4YKvOIF3WicjzIDTlQS45gAo8r61UL/xfpypl+Yk2aCcI+H04OXRshxfNC3VcwZOXmv2FlaHK8bPC0CNj3/0uWfU1py3chttD/uoLJOUm+qzzs4x51bh3/oKbfjMwdvh3foKjxX5NQJuxRfaK3WULsaNTDIP6So8+LxWxil/Q5Kcn5tZLjRf+FMwbHnzALn/2rEA2I5L9WOU2HiDGtAAa8f0OTsLXSIWkDVONkK54OKMX2d+hyW3iLFHv+ghRh+TeOlSTIsY3P5+v9ilN4gkv5v2KviI7rVY7FEDQWuY8YSPdLzEGv2Wgk4keNi0+6zmcZ/JKS1zWe4XRPjBQ2lBB4G6AQYwjtBoROCRwklBHaCSsbhvmoJObYcfZyezt1MwzQmMYQYJmnYOCes4xTjqQUScxkPK5wG2lJpl9VSimuSwEhycYUJW2BxFAUdlBzR/M6z11ReP5dE1i/unuEAxaIoiEbPVFEoiiRvap2TZRLiZGxxDcgOcdglJo0xhMHJM9scTS5xNaBdM4c+E9hsmMfpofDbutDwtkEeDZysaC8/NJv+SuMyzfwIJpj9xpI9Sr8fSdSMs4YwUNCOCPmH4qLj9FbfZ2jaJo7UwLzdJxHizK6cTSNcXFwHMaA6ClZH4j5lQHjad6CzrSV6AcCB8tf0hDnI6fsuFZV8TsdE8eI/xm/eDgLr0XX+HeKMNjGh0T2tfXmjdV2pqvJbh3t+SbodWtP9ISubXcIdVGq5uiEbfwM/SEl0TP9OP9AS6Qruo3Vw2II/8ASj/QEg4aL/Rj/QE6Qg5BmXYGD/Ri/QEj7Dh//wA8P6ApLkhwS1PURJMjwbrvDRfQKvm4My52+HA9ldt/6KTiMRFHrJIxgHd2qqdo9YzM/wAOstd/9bx7FQpfhVgHfKZW36rSR8Q4MuLROyxruqPifjTwwG4Uh1/M+rDUv/RHpWYr4MxH5MS5v8w/5KrxnwZmAuLExv7B1j/CtOH86xD3mSfENa2/lNfkFvY5eZocDYOoPdXO/Qjib/hXmAJHLGfXm3QXbPFd3/coJ+Z64yzdRHf+3ifoggrv1EZrNPm/pb/ZRW9EEFf8V/B9Ckt3QQQlJCGO3b7IIICM9EggilB911X4cRgYckAA9wBaCCfBdNixQOJx/wCixF/gKCC36/5Zz64SD5SmuyCC5K6INm491a8OSObiY+UltnWiReyJBKlXbY5DY1Ow6lOeI6xqfzKCCx6Xx8WWXOPOdTt3UrDSE81knU7klBBEWeHRLbsggnTGUOyCCg+lTxNI5sZ5SW6dCR/ZcYz2dxf5nOOp3cSiQWdYdE4Jo00HTotFhR/Dd7IIJMooj/8AIiHTnGnRdwhHkZX4R/ZBBbT4vkRQQQTU/9k=";

  cy.wrap(Array.from(Array(Math.round(width / 200)).keys()).map((element) => {
    return element * 200;
  })).each((baseHeight, i, array) => {
    return new Cypress.Promise((resolve) => {

      let h = baseHeight * (Math.random() + 0.5);
      let w = baseHeight * (Math.random() + 0.5);

      // add gradients
      var my_gradient=context.createLinearGradient(0 + w,0 + h,170 + w,0 + h);
      my_gradient.addColorStop(0,"black");
      my_gradient.addColorStop(0.5,"red");
      my_gradient.addColorStop(1,"green");
      context.fillStyle=my_gradient;
      context.fillRect(20 + w,20  + h,150+ w,100 + h);

      // add image
      let image = new Image();
      image.onload = function() {
        h *= (Math.random() + 0.5);
        w *= (Math.random() + 0.5);
        context.drawImage(image, w, h);
        resolve()
      };
      image.src = base64Cat;

      h *= (Math.random() + 0.5);
      w *= (Math.random() + 0.5);

      // add shape
      context.beginPath();
      context.moveTo(170 + w, 80 + h);
      context.bezierCurveTo(130 + w, 100 + h, 130 + w, 150 + h, 230 + w, 150 + h);
      context.bezierCurveTo(250 + w, 180 + h, 320 + w, 180 + h, 340 + w, 150 + h);
      context.bezierCurveTo(420 + w, 150 + h, 420 + w, 120 + h, 390 + w, 100 + h);
      context.bezierCurveTo(430 + w, 40 + h, 370 + w, 30 + h, 340 + w, 50 + h);
      context.bezierCurveTo(320 + w, 5 + h, 250 + w, 20 + h, 250 + w, 50 + h);
      context.bezierCurveTo(200 + w, 5 + h, 150 + w, 20 + h, 170 + w, 80 + h);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = 'blue';
      context.stroke();

      h *= (Math.random() + 0.5) * (Math.random() + 0.5);
      w *= (Math.random() + 0.5) * (Math.random() + 0.5);

      // add inscription
      context.font = "60px Verdana";
      var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
      gradient.addColorStop("0"," magenta");
      gradient.addColorStop("0.5", "blue");
      gradient.addColorStop("1.0", "red");
      context.fillStyle = gradient;
      context.fillText("This is made by cypress autotest", 10 + w, 90 + h);
    })
  }).then(() => {
    const fileContent = canvas.toDataURL('image/png').replace('data:image/png;base64,', '')
    const fileName = 'test.png'
    const mimeType = 'image/png'
    callback({fileContent, fileName, mimeType})
  })
})

// then:
it('Tries to set picture', () => {
  cy.makeRandomisedImage(({fileContent, fileName, mimeType}) => {
    cy.get('input[type="file"]').upload({fileContent, fileName, mimeType});
  })
})

Result looks like this: