【发布时间】：2021-12-04 20:08:46
【问题描述】：
我正在使用照片编辑器，我想在用户对原始图像进行必要的更改后下载编辑后的图像。所以过滤值取决于用户，不是恒定的
更改工作正常，但是当我单击下载时，我得到的是原始版本而不是修改后的版本。有人对我如何进一步进行有任何想法吗？ （P.S. 我搜索了整个 Stack Overflow 并尝试在我的代码中实现每个解决方案，但没有任何效果）
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>【问题讨论】：
标签： javascript html canvas html5-canvas