How do I save the changes to my image after each step?-CodePudding

I am building a photo editing web application and whenever I make one change to my image the other one disappears. For example, if I rotate my image then the flip is not working correctly. It's flipping the original image only. I probably need to save my image after each change. How do I go about doing that?

Here's my HTML:

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;" id="fileBtn">Upload Image</label></p>
<p><img id="img" /></p>

<!-- side nav -->
<div class="sidenav">
    <label for="filter-select">FILTER AND ADJUST</label>
    <div class="slider">
        <p style="color: aliceblue;">Sepia</p>
        <input id="sepia" type="range" oninput="setSepia(this);" value="0" step="0.1" min="0" max="1"><span id="Amount" style="color: white;"> (0)</span><br/><br>

        <p style="color: aliceblue;">Grayscale</p>
        <input id="Grayscale" type="range" oninput="setGs(this);" value="0" step="0.1" min="0" max="1"><span id="Amount2" style="color: white;"> (0)</span><br/><br>
    </div>
    <label onclick = "RotateImg()">ROTATE</label>
    <label onclick = "flipping()">FLIP</label>
</div>

And here's my Javascript:

function loadFile(event) {
    var image = document.getElementById('img');
    image.src = URL.createObjectURL(event.target.files[0]);
}

function setSepia(e){
    document.getElementById('img').style["webkitFilter"] = "sepia(" e.value ")";
    document.getElementById('Amount').innerHTML="(" e.value ")";
}

function setGs(e){
    document.getElementById('img').style["webkitFilter"] = "grayscale(" e.value ")";
    document.getElementById('Amount2').innerHTML="(" e.value ")";
}

let rotation = 0;
function RotateImg(){
    rotation  = 90;
    if (rotation == 360) {
        rotation = 0;
    }
    document.querySelector("img").style.transform = `rotate(${rotation}deg)`;
}

let scale = 1
function flipping() {
    scale -= 2
    if (scale <= -2) {
        scale = 1;
    }
    document.querySelector('img').style.transform = `scaleX(${scale})`;
}

CodePudding user response：

If you store all the options in an object and after they update apply them all it should work.

I Have updated all the required methods below:

function loadFile(event) {
  var image = document.getElementById("img");
  image.src = URL.createObjectURL(event.target.files[0]);
}

const options = {
  sepia: 0,
  grayscale: 0,
  rotation: 0,
  scale: 1,
};

function setSepia(e) {
  options.sepia = e.value;
  document.getElementById("Amount").innerHTML = "("   e.value   ")";
  redraw();
}

function setGs(e) {
  options.grayscale = e.value;
  document.getElementById("Amount2").innerHTML = "("   e.value   ")";
  redraw();
}

let rotation = 0;

function RotateImg() {
  rotation  = 90;
  if (rotation == 360) {
    rotation = 0;
  }
  options.rotation = rotation;
  redraw();
}

let scale = 1;

function flipping() {
  scale -= 2;
  if (scale <= -2) {
    scale = 1;
  }
  options.scale = scale;
  redraw();
}

function redraw() {
  document.getElementById("img").style["webkitFilter"] =
    "sepia("   options.sepia   ") grayscale("   options.grayscale   ")";
  document.querySelector(
    "img"
  ).style.transform = `rotate(${options.rotation}deg) scaleX(${options.scale})`;
}

<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;" id="fileBtn">Upload Image</label></p>
<p><img id="img" src="https://wallpapersdsc.net/wp-content/uploads/2016/09/Charleston-Images.jpg" style="width:200px;height:200px" /></p>

<!-- side nav -->
<div class="sidenav">
  <label for="filter-select">FILTER AND ADJUST</label>
  <div class="slider">
    <p style="color: aliceblue;">Sepia</p>
    <input id="sepia" type="range" oninput="setSepia(this);" value="0" step="0.1" min="0" max="1"><span id="Amount" style="color: white;"> (0)</span><br/><br>

    <p style="color: aliceblue;">Grayscale</p>
    <input id="Grayscale" type="range" oninput="setGs(this);" value="0" step="0.1" min="0" max="1"><span id="Amount2" style="color: white;"> (0)</span><br/><br>
  </div>
  <label onclick="RotateImg()">ROTATE</label>
  <label onclick="flipping()">FLIP</label>
</div>

Edit: to clarify why the values are reset is because you override the old value whenever you change one of the properties with a new value.