It can change hue types, however, I do not know how to make it more crispy.

I am attempting to do this with native javascript.

I do not know any canvas or image functions to change anything other than hue. Any ideas?

Javascript:

const stage = document.getElementById("stage"); //Gets the canvas
const ctx = stage.getContext("2d"); //Context
const img = new Image();
var imgData = 0; //Place to store the image data, for any function to use.

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          img.onload = () => {
            //console.log(ctx.getImageData(0,0,stage.width,stage.height));
            draw();
          }

        img.src = URL.createObjectURL(this.files[0]); // set src to blob url
        draw();
      }
  });
});

function draw() {

    ctx.clearRect(0,0,stage.width,stage.height);
    
    ctx.drawImage(img,0,0,stage.width,stage.height);
    imgData = ctx.getImageData(0,0,stage.width,stage.height);
    console.log(imgData);
    
}


function fry() {
    let max = 100,min = -100;
    for (let i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] -= Math.floor(Math.random() * (max - min + 1) ) + min;
        imgData.data[i+1] -= Math.floor(Math.random() * (max - min + 1) ) + min;
        imgData.data[i+2] -=  Math.floor(Math.random() * (max - min + 1) ) + min;
        imgData.data[i+3] = 255;
    }   
    ctx.putImageData(imgData, 0, 0);
}

draw();

Needed HTML:

<input type='file' accept="image/png, image/jpeg" />
<button onclick="fry()">Deep Fry</button>
<div class="stage">
<canvas id="stage" width="400" height="400" style="border:1px solid #000000;"></canvas>
</div>

I did try changing the random integers, but it added more hue variation, didn’t make it look crispy enough.