77 lines
2.2 KiB
JavaScript
77 lines
2.2 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 svgWidth = this.width;
|
|
let svgHeight = this.height;
|
|
|
|
if (this.height > 1000) {
|
|
svgHeight = 1000;
|
|
svgWidth = 1000 * this.width / this.height;
|
|
}
|
|
|
|
svg.setAttribute("height", svgHeight);
|
|
svg.setAttribute("width", svgWidth);
|
|
|
|
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);
|