ts-image-compress
Version:
A tiny library for handling image size.
82 lines (76 loc) • 2.64 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Compress Test Page</title>
<link href="./Test.style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div class="Container">
<div class="SectionWrap">
<h2>Image compression example</h2>
<div class="ContentSection">
<input type="file" id="imageInput" accept=".jpeg, .jpg, .png, .gif" />
<div class="ImageSection">
<h4>Origin Image</h4>
<h4>Origin Image Size: <span id="originImageSize"></span></h4>
<div class="Image">
<img src="" id="originImage" alt="OriginImage" />
</div>
</div>
<div>
<input
type="button"
alt="resizeButton"
value="Resize?"
id="resizeButton"
/>
</div>
<div class="ImageSection">
<h4>Compress Image</h4>
<h4>Resize Image Size: <span id="resizeImageSize"></span></h4>
<div class="Image">
<img src="" id="resizeImage" alt="ResizeImage" />
</div>
</div>
</div>
</div>
</div>
<script>
var exports = {};
</script>
<script src="../dist/imageCompress.js"></script>
<script>
let imageInput = document.getElementById("imageInput");
let originfile = null;
imageInput.addEventListener("change", function (e) {
originfile = e.target.files[0];
document.getElementById("originImage").src = URL.createObjectURL(
e.target.files[0]
);
document.getElementById("originImageSize").innerText = originfile.size;
});
let resizeInput = document.getElementById("resizeButton");
resizeInput.addEventListener("click", async function (e) {
try {
if (originfile === null) {
alert("Please check origin image");
}
let resizeFile = await ImageCompress(originfile);
if (!resizeFile) {
return;
}
const resizeImage = document.getElementById("resizeImage");
resizeImage.src = URL.createObjectURL(resizeFile);
document.getElementById("resizeImageSize").innerText =
resizeFile.size;
} catch (e) {
console.error(e);
}
});
</script>
</body>
</html>