Блог

Я создаю веб-приложение для редактирования фотографий, и всякий раз, когда я делаю одно изменение в своем изображении, другое исчезает. Например, если я поворачиваю изображение, то сальто работает неправильно. Он переворачивает только исходное изображение. Мне, вероятно, нужно сохранять свое изображение после каждого изменения. Как мне это сделать?

Вот мой 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>  

И вот мой 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})`; }  

Если вы сохраните все параметры в объекте и после их обновления примените их все, это должно сработать.

Я обновил все необходимые методы ниже:

 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> 

Изменить: чтобы уточнить, почему значения сбрасываются, необходимо переопределить старое значение всякий раз, когда вы меняете одно из свойств новым значением.