Как загрузить измененное изображение, загруженное с помощью input type = "file"

Question

Я хочу загрузить загруженное изображение, которое я изменил с помощью фильтров в javascript, но я не знаю, как это сделать, вот код

<input type="file" accept="image/*" onchange="loadFile(event)">  
    <img id="output"/>   
       var loadFile = function(event) {
            var output = document.getElementById('output');
            output.src = URL.createObjectURL(event.target.files[0]);
            output.onload = function() {
              URL.revokeObjectURL(output.src)
            }

Спасибо

Answer 1

Для сохранения изображения вы можете создать элемент Canvas и нарисовать изображение в Canvas, а затем с помощью метода toDataUrl преобразовать и сохранить его.

const myCanvas = document.createElement("canvas");
const ctx = myCanvas.getContext("2d");
var output = document.getElementById('output');
ctx.drawImage(output, 512, 512);
const dataURL = myCanvas.toDataURL();

Также вам потребуется некоторый код для сохранения dataURL в файл, позже dataURL можно использовать как img источник или загрузить его на сервер