<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Compress Multiple images in javascript</h2>
<input id="img-input" type="file" accept="image/*" style="display: block;" multiple />
<div id="preview"></div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test 2</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
</head>
<body>
<div id="root">
<p>Upload an image and see the result</p>
<input id="img-input" type="file" accept="image/*" style="display: block;" multiple />
<div id="preview"></div>
</div>
<script>
const MAX_WIDTH = 300;
const MAX_HEIGHT = 300;
const MIME_TYPE = "image";
const QUALITY = 0.7;
const input = document.getElementById("img-input");
input.onchange = function (ev) {
const file = ev.target.files; // get the file
let imageArray = [];
for (let i = 0; i < file.length; i++) {
const Imgfile = file[i];
console.log(Imgfile);
const blobURL = URL.createObjectURL(Imgfile);
const img = new Image();
img.src = blobURL;
img.onerror = function () {
URL.revokeObjectURL(this.src);
// Handle the failure properly
console.log("Cannot load image");
};
img.onload = function () {
let x = $("#preview").length;
console.log(Imgfile);
URL.revokeObjectURL(this.src);
const [newWidth, newHeight] = calculateSize(img, MAX_WIDTH, MAX_HEIGHT);
// const newImg = new File([img], "name")
// photos.push(img)
const canvas = document.createElement("canvas");
console.log(img, "jkdhebh");
canvas.width = newWidth;
canvas.height = newHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, newWidth, newHeight);
var srcEncoded = ctx.canvas.toDataURL("image");
let div = document.createElement("span");
var imgs = document.createElement("img");
imgs.className = "pimge";
const btnn = document.createElement("button");
btnn.innerText = "x";
btnn.className = "closebtn";
btnn.onclick = function () {
this.parentNode.remove();
document.getElementById("closebtn");
};
imgs.src = srcEncoded;
let imageData = imgs;
// let imageSrc= localStorage.setItem("imageArray", srcEncoded);
// photos.push(imgs)
imageArray.push(srcEncoded);
// imageArray[i] = srcEncoded;
console.log(imageArray, "image array ================");
let imageArrayData = localStorage.setItem("imageArrayData", JSON.stringify(imageArray));
div.appendChild(imgs);
div.appendChild(btnn);
document.getElementById("preview").appendChild(div);
x++;
};
}
function calculateSize(img, maxWidth, maxHeight) {
let width = img.width;
let height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > maxWidth) {
height = Math.round((height * maxWidth) / width);
width = maxWidth;
}
} else {
if (height > maxHeight) {
width = Math.round((width * maxHeight) / height);
height = maxHeight;
}
}
console.log(img);
return [width, height];
}
document.getElementById("file-icon-block").style.display = "none";
};
</script>
<script>
// convert base 64 to image
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || "";
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, { type: contentType });
return blob;
}
function decodeImage64(dataImage) {
var ImageURL = dataImage;
// Split the base64 string in data and contentType
var block = ImageURL.split(";");
// Get the content type
var contentType = block[0].split(":")[1]; // In this case "image/gif"
// get the real base64 content of the file
var realData = block[1].split(",")[1]; // In this case "iVBORw0KGg...."
// Convert to blob
var blob = b64toBlob(realData, contentType);
return blob;
}
</script>
<script>
// Onsubmit
let srcUrl = localStorage.getItem("imageArrayData");
var imageJSONdata = JSON.parse(srcUrl);
let dust = [];
for (let a = 0; a < imageJSONdata.length; a++) {
var imageGET = decodeImage64(imageJSONdata[a]);
dust.push(imageGET);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
