I am working on a photo editor and I want to download the edited image after the user makes the necessary changes on the original one. So the filter value depends on the user and is not constant
The changes are working fine but when I click download I get the original one instead of the modified one. Does anyone have any ideas on how I can proceed further? (P.S. I searched all over Stack Overflow and tried to implement every solution in my code but nothing's working)
const canvas = document.getElementById("img");
const ctx = canvas.getContext("2d");
let img = new Image();
let fileName = "";
const downloadBtn = document.getElementById("download-btn");
const uploadFile = document.getElementById("upload-file");
const revertBtn = document.getElementById("revert-btn");
// Upload File
uploadFile.addEventListener("change", () => {
// Get File
const file = document.getElementById("upload-file").files[0];
// Init FileReader API
const reader = new FileReader();
// Check for file
if (file) {
// Set file name
fileName = file.name;
// Read data as URL
reader.readAsDataURL(file);
}
// Add image to canvas
reader.addEventListener(
"load",
() => {
// Create image
img = new Image();
// Set image src
img.src = reader.result;
// On image load add to canvas
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
canvas.removeAttribute("data-caman-id");
};
},
false
);
});
// Download Event
downloadBtn.addEventListener("click", () => {
// Get ext
const fileExtension = fileName.slice(-4);
// Init new filename
let newFilename;
// Check image type
if (fileExtension === ".jpg" || fileExtension === ".png") {
// new filename
newFilename = fileName.substring(0, fileName.length - 4) + "-edited.jpg";
}
// Call download
download(canvas, newFilename);
});
// Download
function download(canvas, filename) {
// Init event
let e;
// Create link
const link = document.createElement("a");
// Set props
link.download = filename;
link.href = canvas.toDataURL("image/jpeg", 0.8);
// New mouse event
e = new MouseEvent("click");
// Dispatch event
link.dispatchEvent(e);
}
const options = {
sepia: 0,
rotation: 0,
scale: 1,
};
function setSepia(e) {
options.sepia = e.value;
document.getElementById('Amount').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();
}
let invertVal = 0
function invert() {
invertVal += 100
if (invertVal > 100) {
invertVal = 0
}
options.invertVal = invertVal;
redraw();
}
function redraw() {
document.getElementById("img").style["webkitFilter"] = "sepia(" + options.sepia + ")
grayscale(" + options.grayscale + ") brightness(" + options.brightness + ") contrast(" +
options.contrast + ") opacity(" + options.opacity + ") invert(" + options.invertVal + ")"; document.querySelector("img").style.transform = `rotate(${options.rotation}deg)
scaleX(${options.scale})`;
}<!-- class="custom-file-label" -->
<p><input type="file" id="upload-file">upload</input>
</p>
<p><label for="upload-file">Upload Image</label></p>
<p><canvas id="img"></canvas></p>
<button id="download-btn" class="btn btn-primary btn-block">Download</button>
<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>
</div>
<label onclick="RotateImg()">ROTATE</label>
<label onclick="flipping()">FLIP</label>
</div>
