86 lines
2.4 KiB
JavaScript
86 lines
2.4 KiB
JavaScript
let can = document.createElement("canvas");
|
|
let ctx = can.getContext("2d");
|
|
let result;
|
|
const downloadButton = document.querySelector("#download");
|
|
|
|
function filterImage(svgDataUrl, width, height) {
|
|
const filteredImage = new Image();
|
|
const resultPreview = document.querySelector("#result_img");
|
|
|
|
can.width = width;
|
|
can.height = height;
|
|
|
|
filteredImage.onload = function () {
|
|
ctx.drawImage(filteredImage, 0, 0, width, height);
|
|
result = can.toDataURL();
|
|
downloadButton.disabled = false;
|
|
resultPreview.src = result;
|
|
};
|
|
filteredImage.src = svgDataUrl;
|
|
}
|
|
|
|
function loadImage(base64Image) {
|
|
const sourceImage = new Image();
|
|
const svg = document.querySelector("svg");
|
|
const svgImage = svg.querySelector("image");
|
|
const sourcePreview = document.querySelector("#source_img");
|
|
let svgDataUrl;
|
|
|
|
sourceImage.onload = function () {
|
|
let svgViewBox = `0 0 ${Math.trunc((800 / this.height) * this.width)} 800`;
|
|
svg.setAttribute("height", this.height);
|
|
svg.setAttribute("width", this.width);
|
|
svg.setAttribute("viewBox", svgViewBox);
|
|
|
|
let svgString = new XMLSerializer().serializeToString(svg);
|
|
svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);
|
|
|
|
filterImage(svgDataUrl, this.width, this.height);
|
|
};
|
|
sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
|
|
}
|
|
|
|
function handleFileSelect(e) {
|
|
const files = e.target.files;
|
|
if (!files || !files.length) return;
|
|
const file = files[0];
|
|
if (!file.type.match("image.*")) return;
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (readerEvent) => {
|
|
loadImage(readerEvent.target.result);
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
document
|
|
.querySelector("#file_input")
|
|
.addEventListener("change", handleFileSelect, false);
|
|
|
|
function downloadURI(_uri, _name) {
|
|
let link = document.createElement("a");
|
|
link.download = "distortedImageEH22.png";
|
|
link.href = result;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
delete link;
|
|
}
|
|
|
|
downloadButton.addEventListener("click", downloadURI);
|
|
|
|
(async () => {
|
|
let exampleImageBlob = await fetch("../assets/image/example_qrcode.png").then(
|
|
(r) => r.blob(),
|
|
);
|
|
|
|
let dataUrl = await new Promise((resolve) => {
|
|
let reader = new FileReader();
|
|
reader.onload = () => resolve(reader.result);
|
|
reader.readAsDataURL(exampleImageBlob);
|
|
});
|
|
|
|
loadImage(dataUrl);
|
|
})();
|