Pro Img Compressor
January 28, 2023
Pro Img Compressor
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yfu8Gbvupol44PCxcpMHpvG13m2ACMuHd9IwSLKNyTLGUWOjuRt-Y4bsD8wOOuAnxHRihMv0ejHTs96Gua9bZTx3TQEWeKMK5mqiDM0KLJT7nFp5pMZZtYjMyj-NF48XdYMs0V5idnhGBONuCYbVfb6RpeO33KYtpbCKp441QkP8YOq7OvgKqk2a/s3264/toolme%20logo%20.webp">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>Pro Image Compressor tool Online</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="With the help of this Pro tool, you can compress any image for free...">
<meta name="keywords" conten="TET photo compressor, jpeg compressor, file Compressor, photo compressor to 100kb, photo compressor online, image resize, reduce image size, jpeg compressor, png compressor, ">
<meta name="language" content="English">
<style>
/* optional */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
*{
box-sizing: border-box;
}
body {
font-family: "Noto Sans", sans-serif;
margin-left: 110px;
margin-right: 110px;
background-color: lightskyblue;
}
@media only screen and (max-width: 600px) {
body {
margin-left: 10px;
margin-right: 12px;
}
}
/*--------------------- banner style stat--------------------------*/
@keyframes fade{
from{
opacity:0.4;
}
to{
opacity:1;
}
}
#slider{
margin:0 auto;
width:100%;
overflow:hidden;
}
.slides{
overflow:hidden;
animation-name:fade;
animation-duration:1s;
display:none;
}
img{
width:99%;
border-radius: 7px;
}
#dot{
margin:0 auto;
text-align:center;
}
.dot{
display:inline-block;
border-radius:50%;
background:#d3d3d3;
padding:8px;
margin:10px 5px;
}
.cdot{
background: rgb(255, 0, 0);
}
@media (max-width:567px){
#slider{
width:100%;
}
}
#heading{
display:block;
text-align:center;
font-size:2em;
margin:10px 0px;
}
/*------------------------banner style end---------------------------------------*/
.container {
background-color: #ffffff;
border-radius: 12px;
padding: 40px 30px;
color: rgb(73, 172, 27);
margin-top: 40px;
}
.upload,
.download {
background-color: red;
border: 0px;
padding: 10px 30px;
font-family: "Noto Sans", sans-serif;
color: white;
font-weight: 700;
border-radius: 4px;
width: 125px;
cursor: pointer;
outline: none;
}
.upload:hover,
.download:hover{
background-color: green;
}
.download {
margin-top: 40px;
margin-bottom: 0px;
}
.upload:active,
.download:active {
cursor: unset;
}
.metadata {
display: inline;
margin-left: 5px;
}
.metadata li {
display: inline-block;
font-weight: 700;
width: 200px;
}
.metadata li span {
position: relative;
top: 5px;
display: inline-block;
font-weight: 400;
width: 90px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #ffffff;
outline: none;
opacity: 0.7;
border-radius: 5px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: red;
cursor: pointer;
border-radius: 5px;
}
.preview-container {
width: calc(100% - 253px);
position: relative;
margin: 0px 116px;
margin-top: 60px;
font-weight: 700;
}
#slider-input {
width: 100%;
position: absolute;
left: -21px;
display: none;
/* top: -6px; */
-webkit-appearance: none;
outline: none;
}
#slider-input::-webkit-slider-runnable-track {
height: 0px;
}
#slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #6165f8;
}
.compressed,
.original {
position: absolute;
top: -25px;
margin-left: 10px;
color: white;
}
.original {
right: 10px;
}
#org {
display: none;
}
.bottom img ,
.top img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 5px;
padding: 10px;
background-color: white;
}
.output,
.progress,
.preview-container {
display: none;
}
@media (max-width: 600px) {
.bottom img ,
.top img {
margin-top: 10px;
width: 100%;
border-radius: 5px;
padding:3px;
background-color: white;
}
.wrap{
display: flex;
flex-direction:column;
}
.compressed,.original{
text-align: center;
width:100% !important;
position: inherit;
}
.preview-container{
text-align: center;
margin:5px;
width:100% !important;
position: inherit;
}
}
.compressed,
.original {
margin: 0;
cursor: pointer !important;
background-color: red;
border-radius: 5px;
padding: 12px 50px;
}
.compressed:hover,
.original:hover{
background-color: green;
}
/*footer css*/
.footer{
padding: 40px 0;
background-color: black;
border-radius: 7px;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: red;
}
.footer .social a{
font-size: 25px;
color: red;
border: 2px solid red;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50px;
margin: 0 8px;
}
.footer .social a:hover{
color: white;
border: 2px solid white;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 20px;
line-height: 1.7;
margin-bottom: 0;
text-align: center;
}
.footer ul a{
text-decoration: none;
color: white;
}
.footer ul li{
display:inline-block;
padding: 0 15px;
}
.footer ul a:hover{
color: red;
}
.copyright{
color: rgba(255, 255, 255, 0.658);
text-align: center;
font-size: 17px;
}
/*footer css end*/
.home-bt{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home-bt a{
position: relative;
background-color: red;
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 2rem;
font-weight: 400;
padding: 10px 30px;
border-radius: 7px;
transition: 0.5s;
}
.home-bt a:hover{
letter-spacing: 0.25em;
background-color: rgb(27, 255, 6);
box-shadow: 0 0 35px rgb(27, 255, 6);
}
.content-box{
background-color: white;
border-radius: 7px;
padding: 20px;
text-align: left;
}
</style>
</head>
<body>
<!----------------------banner hear------------------------------>
<div class="slides">
<a href="https://image-editor.toolme.xyz/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TYbyHh8tDTr0lEcmXbR3drWxlYJnoRkHRbqJ_Q3ToAdhhdjxfnBL7YC6GLEyb25HFekghTBk2xdiCOeXQathsdkNY1iyWFJc_9BkhEbFv1aZkHWmBcixl49FTNd1rul39Sjegn5xtCzwT-eN31cDYywR-p_eSHuFkfO0bDDpKEAuo3jLFYj-qc4K/s3264/image%20editor%20.png.webp" width="100%" /></a>
</div>
<div class="slides">
<a href="https://qrcode.toolme.xyz/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1S95bobqW4BOa5PxrVdXvtQy5T-bfHHiLtmdqRY1qYkn9Dlepy2Ht_aaj-Mhbu-VPWhxsjUWiYxh9jcYtE9VZ07VatipYXPHtbmYK3jYWFadbvfDlNdPrPK9TAC8AI7nYYC-FQvqP-SQZdmf67estSkLvFr6xQDIwcdGGV_1hu7iVlwwhZdLYbtz/s3264/QR%20code%20.png.webp" width="100%" /></a>
</div>
<div class="slides">
<a href="https://text-number.toolme.xyz/?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jt4nh-TGj-fSGv2zrRsSGHMG2QB7443WwkcUil5TaA0iw99FjjpKU5f9As42h0XQeB61Lo6ojbuQDGMcKRJ7wLdNRAqVF7PHuTy_UHuyfakQ5eI4ZsCbctfOXZC8t756aJVPQs-H4I-nshuAoCFnO8DvHG7E_3WtTahTQbLjkvyf3aFnr3IV6nVK/s3264/text%20to%20imoji%20.png.webp" width="100%"/></a>
</div>
<div id="dot">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!----------------------banner end hear------------------------------>
<div class="home-bt">
<a href="https://toolme.xyz"><span><i class="fas fa-home"></i> Home</span></a>
</div>
<div class="container">
<div class="input">
<button class="upload"><i class="fa-solid fa-cloud-arrow-up"></i> Upload</button>
<ul class="metadata">
<li>Name: <span></span></li>
<li>Dimension: <span></span></li>
<li>Size: <span></span></li>
</ul>
</div>
<div class="output">
<button class="download"><i class="fa-solid fa-download"></i> Download</button>
<ul class="metadata">
<li>Compressed: <span></span></li>
<li>Dimension: <span></span></li>
<li>Size: <span></span></li>
</ul>
</div>
</div>
<div class="progress">
<br/>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="10" class="slider" >
</div>
<div class="preview-container">
<input type="range" id="slider-input" min="100" max="100" step="any" />
<div class="wrap">
<div class="compressed">Compressed</div>
<br/>
<div class="original">Original</div>
</div>
<div class="bottom">
<img id="org" class="com-img" src="" alt="" />
</div>
<div class="top">
<img id="compress" class="com-img" src="" alt=""/>
</div>
</div>
<input
type="file"
id="hidden-button"
style="display: none"
accept="image/*"
/>
</div>
<br/>
<div class="content-box">
<h3 style="text-align: left;"><span style="color: red;">Why is Image Compressor beneficial?</span></h3><p>Friends, all of you must be sending some or the other photo to your friends and when you send it, it will take time to go to the photo due to slow internet because one, the internet is slow and the size of the photo from above is also in MB, then in such condition your It must have come to the mind that I wish there was some way that the photo would go away immediately, but now the speed of the internet remains the same, then the second option is to put some mind in the photo that is to be sent.</p><p>So you can reduce the size of the photo in such condition, but if you shrink the photo, the quality will also decrease.</p><p>Now only one option will be left and that is to use some software which can reduce the size of the photo in MB and the quality should not be disturbed.</p><h3 style="text-align: left;"><span style="color: #ff00fe;">Free Image Compression Tool</span></h3><p>This is a free image compressor tool with the help of which all of us can shrink any image by compressing its size by 90%, understanding the meaning of 90% !!! This means that if there is a photo of 1MB, then it can be made from 80 to 90 KB.</p><p><span style="color: red;"><b>Does quality matter?</b></span></p><p>If we talk about quality, then logically whenever any image is compressed, there is a slight difference in quality but this can be ignored.</p>
</div>
<!-----footer bar---------->
<br/>
<section class="footer">
<div class="social">
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-facebook"></i></a>
<a href=""><i class="fab fa-snapchat"></i></a>
<a href=""><i class="fab fa-youtube"></i></a>
</div>
<ul class="list">
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contect Us</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
</ul>
<p class="copyright">
copyright by shamshad
</p>
</section>
<!-----footer bar end------->
<script>
// banner js
var index = 0;
var slides = document.querySelectorAll(".slides");
var dot = document.querySelectorAll(".dot");
function changeSlide(){
if(index<0){
index = slides.length-1;
}
if(index>slides.length-1){
index = 0;
}
for(let i=0;i<slides.length;i++){
slides[i].style.display = "none";
dot[i].classList.remove("cdot");
}
slides[index].style.display= "block";
dot[index].classList.add("cdot");
index++;
setTimeout(changeSlide,4000);
}
changeSlide();
// banner js end
var upload = document.querySelector(".upload");
var download = document.querySelector(".download");
var hiddenButton = document.querySelector("#hidden-button");
var input = document.querySelector("#slider-input");
var inputValue = document.querySelector(".slider");
var inputMetedata = document.getElementsByClassName("metadata")[0];
var outputMetedata = document.getElementsByClassName("metadata")[1];
input.oninput = function () {
var c = document.getElementsByClassName("top")[0];
c.style.width = (600 / 100) * input.value + "px";
};
upload.onclick = function () {
// click on input type file
hiddenButton.click();
};
hiddenButton.onchange = () => {
// get selected file
var file = hiddenButton.files[0];
var url = URL.createObjectURL(file);
var img = document.createElement("img");
// load image to get width height
img.src = url;
img.onload = function () {
var w = img.width;
var h = img.height;
// give metedata of input file
inputMetedata
.getElementsByTagName("li")[0]
.getElementsByTagName("span")[0].innerHTML = file.name;
inputMetedata
.getElementsByTagName("li")[1]
.getElementsByTagName("span")[0].innerHTML = w + "/" + h;
inputMetedata
.getElementsByTagName("li")[2]
.getElementsByTagName("span")[0].innerHTML =
(file.size / 1024 / 1024).toFixed(2) + "Mb";
// set attribute for file name used in downloading
upload.setAttribute("filename", file.name);
// create a function to get ratio of width height
calculateValues(inputValue.value, w, h);
inputValue.onchange = function () {
// run function again on changing compressed ratio
calculateValues(inputValue.value, w, h);
};
// set original image on preview
document.querySelector(".bottom img").src = url;
};
};
// now create calculateValues function here
function calculateValues(v, w, h) {
var outputQuality = (100 - v) / 100;
var outputWidth = w * outputQuality;
var outputHeight = h * outputQuality;
// now craete a function to compress
Compress(outputQuality, outputWidth, outputHeight);
}
function Compress(q, w, h) {
new Compressor(hiddenButton.files[0], {
quality: q,
width: w,
height: h,
success(result) {
var url = URL.createObjectURL(result);
document.getElementsByClassName("output")[0].style.display =
"block";
document.getElementsByClassName("progress")[0].style.display =
"block";
document.getElementsByClassName(
"preview-container"
)[0].style.display = "block";
var img = document.createElement("img");
img.src = url;
img.onload = function () {
// show compressed image on preview
chill();
document.querySelector(".top img").src = url;
var w = img.width;
var h = img.height;
// give metedata of output file
outputMetedata
.getElementsByTagName("li")[0]
.getElementsByTagName("span")[0].innerHTML =
(q * 100 - 99 + ((q * 100) / 100) * 10).toFixed(0) + "%";
outputMetedata
.getElementsByTagName("li")[1]
.getElementsByTagName("span")[0].innerHTML = w + "/" + h;
outputMetedata
.getElementsByTagName("li")[2]
.getElementsByTagName("span")[0].innerHTML =
(result.size / 1024).toFixed(0) + "Kb";
};
download.onclick = function () {
var filename = upload.getAttribute("filename").split(".");
var a = document.createElement("a");
a.href = url;
a.download = filename[0] + "-min." + filename[1];
a.click();
};
},
error(err) {
console.log(err.message);
},
});
}
</script>
<!-----compressor----->
<script>
/*!
* Compressor.js v1.1.1
* https://fengyuanchen.github.io/compressorjs
*
* Copyright 2018-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2021-10-05T02:32:40.212Z
*/
(function (global, factory) {
typeof exports === "object" && typeof module !== "undefined"
? (module.exports = factory())
: typeof define === "function" && define.amd
? define(factory)
: ((global =
typeof globalThis !== "undefined" ? globalThis : global || self),
(global.Compressor = factory()));
})(this, function () {
"use strict";
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(
target,
Object.getOwnPropertyDescriptors(source)
);
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(
target,
key,
Object.getOwnPropertyDescriptor(source, key)
);
});
}
}
return target;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true,
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends =
Object.assign ||
function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var canvasToBlob = { exports: {} };
/*
* JavaScript Canvas to Blob
* https://github.com/blueimp/JavaScript-Canvas-to-Blob
*
* Copyright 2012, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*
* Based on stackoverflow user Stoive's code snippet:
* http://stackoverflow.com/q/4998908
*/
(function (module) {
if (typeof window === "undefined") {
return;
}
(function (window) {
var CanvasPrototype =
window.HTMLCanvasElement && window.HTMLCanvasElement.prototype;
var hasBlobConstructor =
window.Blob &&
(function () {
try {
return Boolean(new Blob());
} catch (e) {
return false;
}
})();
var hasArrayBufferViewSupport =
hasBlobConstructor &&
window.Uint8Array &&
(function () {
try {
return new Blob([new Uint8Array(100)]).size === 100;
} catch (e) {
return false;
}
})();
var BlobBuilder =
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
var dataURIPattern = /^data:((.*?)(;charset=.*?)?)(;base64)?,/;
var dataURLtoBlob =
(hasBlobConstructor || BlobBuilder) &&
window.atob &&
window.ArrayBuffer &&
window.Uint8Array &&
function (dataURI) {
var matches,
mediaType,
isBase64,
dataString,
byteString,
arrayBuffer,
intArray,
i,
bb; // Parse the dataURI components as per RFC 2397
matches = dataURI.match(dataURIPattern);
if (!matches) {
throw new Error("invalid data URI");
} // Default to text/plain;charset=US-ASCII
mediaType = matches[2]
? matches[1]
: "text/plain" + (matches[3] || ";charset=US-ASCII");
isBase64 = !!matches[4];
dataString = dataURI.slice(matches[0].length);
if (isBase64) {
// Convert base64 to raw binary data held in a string:
byteString = atob(dataString);
} else {
// Convert base64/URLEncoded data component to raw binary:
byteString = decodeURIComponent(dataString);
} // Write the bytes of the string to an ArrayBuffer:
arrayBuffer = new ArrayBuffer(byteString.length);
intArray = new Uint8Array(arrayBuffer);
for (i = 0; i < byteString.length; i += 1) {
intArray[i] = byteString.charCodeAt(i);
} // Write the ArrayBuffer (or ArrayBufferView) to a blob:
if (hasBlobConstructor) {
return new Blob(
[hasArrayBufferViewSupport ? intArray : arrayBuffer],
{
type: mediaType,
}
);
}
bb = new BlobBuilder();
bb.append(arrayBuffer);
return bb.getBlob(mediaType);
};
if (window.HTMLCanvasElement && !CanvasPrototype.toBlob) {
if (CanvasPrototype.mozGetAsFile) {
CanvasPrototype.toBlob = function (callback, type, quality) {
var self = this;
setTimeout(function () {
if (quality && CanvasPrototype.toDataURL && dataURLtoBlob) {
callback(dataURLtoBlob(self.toDataURL(type, quality)));
} else {
callback(self.mozGetAsFile("blob", type));
}
});
};
} else if (CanvasPrototype.toDataURL && dataURLtoBlob) {
if (CanvasPrototype.msToBlob) {
CanvasPrototype.toBlob = function (callback, type, quality) {
var self = this;
setTimeout(function () {
if (
((type && type !== "image/png") || quality) &&
CanvasPrototype.toDataURL &&
dataURLtoBlob
) {
callback(dataURLtoBlob(self.toDataURL(type, quality)));
} else {
callback(self.msToBlob(type));
}
});
};
} else {
CanvasPrototype.toBlob = function (callback, type, quality) {
var self = this;
setTimeout(function () {
callback(dataURLtoBlob(self.toDataURL(type, quality)));
});
};
}
}
}
if (module.exports) {
module.exports = dataURLtoBlob;
} else {
window.dataURLtoBlob = dataURLtoBlob;
}
})(window);
})(canvasToBlob);
var toBlob = canvasToBlob.exports;
var isBlob = function isBlob(value) {
if (typeof Blob === "undefined") {
return false;
}
return (
value instanceof Blob ||
Object.prototype.toString.call(value) === "[object Blob]"
);
};
var DEFAULTS = {
/**
* Indicates if output the original image instead of the compressed one
* when the size of the compressed image is greater than the original one's
* @type {boolean}
*/
strict: true,
/**
* Indicates if read the image's Exif Orientation information,
* and then rotate or flip the image automatically.
* @type {boolean}
*/
checkOrientation: true,
/**
* The max width of the output image.
* @type {number}
*/
maxWidth: Infinity,
/**
* The max height of the output image.
* @type {number}
*/
maxHeight: Infinity,
/**
* The min width of the output image.
* @type {number}
*/
minWidth: 0,
/**
* The min height of the output image.
* @type {number}
*/
minHeight: 0,
/**
* The width of the output image.
* If not specified, the natural width of the source image will be used.
* @type {number}
*/
width: undefined,
/**
* The height of the output image.
* If not specified, the natural height of the source image will be used.
* @type {number}
*/
height: undefined,
/**
* Sets how the size of the image should be resized to the container
* specified by the `width` and `height` options.
* @type {string}
*/
resize: "none",
/**
* The quality of the output image.
* It must be a number between `0` and `1`,
* and only available for `image/jpeg` and `image/webp` images.
* Check out {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob canvas.toBlob}.
* @type {number}
*/
quality: 0.8,
/**
* The mime type of the output image.
* By default, the original mime type of the source image file will be used.
* @type {string}
*/
mimeType: "auto",
/**
* Files whose file type is included in this list,
* and whose file size exceeds the `convertSize` value will be converted to JPEGs.
* @type {string｜Array}
*/
convertTypes: ["image/png"],
/**
* PNG files over this size (5 MB by default) will be converted to JPEGs.
* To disable this, just set the value to `Infinity`.
* @type {number}
*/
convertSize: 5000000,
/**
* The hook function to execute before draw the image into the canvas for compression.
* @type {Function}
* @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
* @param {HTMLCanvasElement} canvas - The canvas for compression.
* @example
* function (context, canvas) {
* context.fillStyle = '#fff';
* }
*/
beforeDraw: null,
/**
* The hook function to execute after drew the image into the canvas for compression.
* @type {Function}
* @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
* @param {HTMLCanvasElement} canvas - The canvas for compression.
* @example
* function (context, canvas) {
* context.filter = 'grayscale(100%)';
* }
*/
drew: null,
/**
* The hook function to execute when success to compress the image.
* @type {Function}
* @param {File} file - The compressed image File object.
* @example
* function (file) {
* console.log(file);
* }
*/
success: null,
/**
* The hook function to execute when fail to compress the image.
* @type {Function}
* @param {Error} err - An Error object.
* @example
* function (err) {
* console.log(err.message);
* }
*/
error: null,
};
var IS_BROWSER =
typeof window !== "undefined" &&
typeof window.document !== "undefined";
var WINDOW = IS_BROWSER ? window : {};
/**
* Check if the given value is a positive number.
* @param {*} value - The value to check.
* @returns {boolean} Returns `true` if the given value is a positive number, else `false`.
*/
var isPositiveNumber = function isPositiveNumber(value) {
return value > 0 && value < Infinity;
};
var slice = Array.prototype.slice;
/**
* Convert array-like or iterable object to an array.
* @param {*} value - The value to convert.
* @returns {Array} Returns a new array.
*/
function toArray(value) {
return Array.from ? Array.from(value) : slice.call(value);
}
var REGEXP_IMAGE_TYPE = /^image\/.+$/;
/**
* Check if the given value is a mime type of image.
* @param {*} value - The value to check.
* @returns {boolean} Returns `true` if the given is a mime type of image, else `false`.
*/
function isImageType(value) {
return REGEXP_IMAGE_TYPE.test(value);
}
/**
* Convert image type to extension.
* @param {string} value - The image type to convert.
* @returns {boolean} Returns the image extension.
*/
function imageTypeToExtension(value) {
var extension = isImageType(value) ? value.substr(6) : "";
if (extension === "jpeg") {
extension = "jpg";
}
return ".".concat(extension);
}
var fromCharCode = String.fromCharCode;
/**
* Get string from char code in data view.
* @param {DataView} dataView - The data view for read.
* @param {number} start - The start index.
* @param {number} length - The read length.
* @returns {string} The read result.
*/
function getStringFromCharCode(dataView, start, length) {
var str = "";
var i;
length += start;
for (i = start; i < length; i += 1) {
str += fromCharCode(dataView.getUint8(i));
}
return str;
}
var btoa = WINDOW.btoa;
/**
* Transform array buffer to Data URL.
* @param {ArrayBuffer} arrayBuffer - The array buffer to transform.
* @param {string} mimeType - The mime type of the Data URL.
* @returns {string} The result Data URL.
*/
function arrayBufferToDataURL(arrayBuffer, mimeType) {
var chunks = [];
var chunkSize = 8192;
var uint8 = new Uint8Array(arrayBuffer);
while (uint8.length > 0) {
// XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9
// eslint-disable-next-line prefer-spread
chunks.push(
fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize)))
);
uint8 = uint8.subarray(chunkSize);
}
return "data:"
.concat(mimeType, ";base64,")
.concat(btoa(chunks.join("")));
}
/**
* Get orientation value from given array buffer.
* @param {ArrayBuffer} arrayBuffer - The array buffer to read.
* @returns {number} The read orientation value.
*/
function resetAndGetOrientation(arrayBuffer) {
var dataView = new DataView(arrayBuffer);
var orientation; // Ignores range error when the image does not have correct Exif information
try {
var littleEndian;
var app1Start;
var ifdStart; // Only handle JPEG image (start by 0xFFD8)
if (
dataView.getUint8(0) === 0xff &&
dataView.getUint8(1) === 0xd8
) {
var length = dataView.byteLength;
var offset = 2;
while (offset + 1 < length) {
if (
dataView.getUint8(offset) === 0xff &&
dataView.getUint8(offset + 1) === 0xe1
) {
app1Start = offset;
break;
}
offset += 1;
}
}
if (app1Start) {
var exifIDCode = app1Start + 4;
var tiffOffset = app1Start + 10;
if (getStringFromCharCode(dataView, exifIDCode, 4) === "Exif") {
var endianness = dataView.getUint16(tiffOffset);
littleEndian = endianness === 0x4949;
if (
littleEndian ||
endianness === 0x4d4d
/* bigEndian */
) {
if (
dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002a
) {
var firstIFDOffset = dataView.getUint32(
tiffOffset + 4,
littleEndian
);
if (firstIFDOffset >= 0x00000008) {
ifdStart = tiffOffset + firstIFDOffset;
}
}
}
}
}
if (ifdStart) {
var _length = dataView.getUint16(ifdStart, littleEndian);
var _offset;
var i;
for (i = 0; i < _length; i += 1) {
_offset = ifdStart + i * 12 + 2;
if (
dataView.getUint16(_offset, littleEndian) === 0x0112
/* Orientation */
) {
// 8 is the offset of the current tag's value
_offset += 8; // Get the original orientation value
orientation = dataView.getUint16(_offset, littleEndian); // Override the orientation with its default value
dataView.setUint16(_offset, 1, littleEndian);
break;
}
}
}
} catch (e) {
orientation = 1;
}
return orientation;
}
/**
* Parse Exif Orientation value.
* @param {number} orientation - The orientation to parse.
* @returns {Object} The parsed result.
*/
function parseOrientation(orientation) {
var rotate = 0;
var scaleX = 1;
var scaleY = 1;
switch (orientation) {
// Flip horizontal
case 2:
scaleX = -1;
break;
// Rotate left 180°
case 3:
rotate = -180;
break;
// Flip vertical
case 4:
scaleY = -1;
break;
// Flip vertical and rotate right 90°
case 5:
rotate = 90;
scaleY = -1;
break;
// Rotate right 90°
case 6:
rotate = 90;
break;
// Flip horizontal and rotate right 90°
case 7:
rotate = 90;
scaleX = -1;
break;
// Rotate left 90°
case 8:
rotate = -90;
break;
}
return {
rotate: rotate,
scaleX: scaleX,
scaleY: scaleY,
};
}
var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
/**
* Normalize decimal number.
* Check out {@link https://0.30000000000000004.com/}
* @param {number} value - The value to normalize.
* @param {number} [times=100000000000] - The times for normalizing.
* @returns {number} Returns the normalized number.
*/
function normalizeDecimalNumber(value) {
var times =
arguments.length > 1 && arguments[1] !== undefined
? arguments[1]
: 100000000000;
return REGEXP_DECIMALS.test(value)
? Math.round(value * times) / times
: value;
}
/**
* Get the max sizes in a rectangle under the given aspect ratio.
* @param {Object} data - The original sizes.
* @param {string} [type='contain'] - The adjust type.
* @returns {Object} The result sizes.
*/
function getAdjustedSizes(_ref) {
var aspectRatio = _ref.aspectRatio,
height = _ref.height,
width = _ref.width;
var type =
arguments.length > 1 && arguments[1] !== undefined
? arguments[1]
: "none";
var isValidWidth = isPositiveNumber(width);
var isValidHeight = isPositiveNumber(height);
if (isValidWidth && isValidHeight) {
var adjustedWidth = height * aspectRatio;
if (
((type === "contain" || type === "none") &&
adjustedWidth > width) ||
(type === "cover" && adjustedWidth < width)
) {
height = width / aspectRatio;
} else {
width = height * aspectRatio;
}
} else if (isValidWidth) {
height = width / aspectRatio;
} else if (isValidHeight) {
width = height * aspectRatio;
}
return {
width: width,
height: height,
};
}
var ArrayBuffer$1 = WINDOW.ArrayBuffer,
FileReader = WINDOW.FileReader;
var URL = WINDOW.URL || WINDOW.webkitURL;
var REGEXP_EXTENSION = /\.\w+$/;
var AnotherCompressor = WINDOW.Compressor;
/**
* Creates a new image compressor.
* @class
*/
var Compressor = /*#__PURE__*/ (function () {
/**
* The constructor of Compressor.
* @param {File|Blob} file - The target image file for compressing.
* @param {Object} [options] - The options for compressing.
*/
function Compressor(file, options) {
_classCallCheck(this, Compressor);
this.file = file;
this.image = new Image();
this.options = _objectSpread2(
_objectSpread2({}, DEFAULTS),
options
);
this.aborted = false;
this.result = null;
this.init();
}
_createClass(
Compressor,
[
{
key: "init",
value: function init() {
var _this = this;
var file = this.file,
options = this.options;
if (!isBlob(file)) {
this.fail(
new Error(
"The first argument must be a File or Blob object."
)
);
return;
}
var mimeType = file.type;
if (!isImageType(mimeType)) {
this.fail(
new Error(
"The first argument must be an image File or Blob object."
)
);
return;
}
if (!URL || !FileReader) {
this.fail(
new Error(
"The current browser does not support image compression."
)
);
return;
}
if (!ArrayBuffer$1) {
options.checkOrientation = false;
}
if (URL && !options.checkOrientation) {
this.load({
url: URL.createObjectURL(file),
});
} else {
var reader = new FileReader();
var checkOrientation =
options.checkOrientation && mimeType === "image/jpeg";
this.reader = reader;
reader.onload = function (_ref) {
var target = _ref.target;
var result = target.result;
var data = {};
if (checkOrientation) {
// Reset the orientation value to its default value 1
// as some iOS browsers will render image with its orientation
var orientation = resetAndGetOrientation(result);
if (orientation > 1 || !URL) {
// Generate a new URL which has the default orientation value
data.url = arrayBufferToDataURL(result, mimeType);
if (orientation > 1) {
_extends(data, parseOrientation(orientation));
}
} else {
data.url = URL.createObjectURL(file);
}
} else {
data.url = result;
}
_this.load(data);
};
reader.onabort = function () {
_this.fail(
new Error("Aborted to read the image with FileReader.")
);
};
reader.onerror = function () {
_this.fail(
new Error("Failed to read the image with FileReader.")
);
};
reader.onloadend = function () {
_this.reader = null;
};
if (checkOrientation) {
reader.readAsArrayBuffer(file);
} else {
reader.readAsDataURL(file);
}
}
},
},
{
key: "load",
value: function load(data) {
var _this2 = this;
var file = this.file,
image = this.image;
image.onload = function () {
_this2.draw(
_objectSpread2(
_objectSpread2({}, data),
{},
{
naturalWidth: image.naturalWidth,
naturalHeight: image.naturalHeight,
}
)
);
};
image.onabort = function () {
_this2.fail(new Error("Aborted to load the image."));
};
image.onerror = function () {
_this2.fail(new Error("Failed to load the image."));
}; // Match all browsers that use WebKit as the layout engine in iOS devices,
// such as Safari for iOS, Chrome for iOS, and in-app browsers.
if (
WINDOW.navigator &&
/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(
WINDOW.navigator.userAgent
)
) {
// Fix the `The operation is insecure` error (#57)
image.crossOrigin = "anonymous";
}
image.alt = file.name;
image.src = data.url;
},
},
{
key: "draw",
value: function draw(_ref2) {
var _this3 = this;
var naturalWidth = _ref2.naturalWidth,
naturalHeight = _ref2.naturalHeight,
_ref2$rotate = _ref2.rotate,
rotate = _ref2$rotate === void 0 ? 0 : _ref2$rotate,
_ref2$scaleX = _ref2.scaleX,
scaleX = _ref2$scaleX === void 0 ? 1 : _ref2$scaleX,
_ref2$scaleY = _ref2.scaleY,
scaleY = _ref2$scaleY === void 0 ? 1 : _ref2$scaleY;
var file = this.file,
image = this.image,
options = this.options;
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var is90DegreesRotated = Math.abs(rotate) % 180 === 90;
var resizable =
(options.resize === "contain" ||
options.resize === "cover") &&
isPositiveNumber(options.width) &&
isPositiveNumber(options.height);
var maxWidth = Math.max(options.maxWidth, 0) || Infinity;
var maxHeight = Math.max(options.maxHeight, 0) || Infinity;
var minWidth = Math.max(options.minWidth, 0) || 0;
var minHeight = Math.max(options.minHeight, 0) || 0;
var aspectRatio = naturalWidth / naturalHeight;
var width = options.width,
height = options.height;
if (is90DegreesRotated) {
var _ref3 = [maxHeight, maxWidth];
maxWidth = _ref3[0];
maxHeight = _ref3[1];
var _ref4 = [minHeight, minWidth];
minWidth = _ref4[0];
minHeight = _ref4[1];
var _ref5 = [height, width];
width = _ref5[0];
height = _ref5[1];
}
if (resizable) {
aspectRatio = width / height;
}
var _getAdjustedSizes = getAdjustedSizes(
{
aspectRatio: aspectRatio,
width: maxWidth,
height: maxHeight,
},
"contain"
);
maxWidth = _getAdjustedSizes.width;
maxHeight = _getAdjustedSizes.height;
var _getAdjustedSizes2 = getAdjustedSizes(
{
aspectRatio: aspectRatio,
width: minWidth,
height: minHeight,
},
"cover"
);
minWidth = _getAdjustedSizes2.width;
minHeight = _getAdjustedSizes2.height;
if (resizable) {
var _getAdjustedSizes3 = getAdjustedSizes(
{
aspectRatio: aspectRatio,
width: width,
height: height,
},
options.resize
);
width = _getAdjustedSizes3.width;
height = _getAdjustedSizes3.height;
} else {
var _getAdjustedSizes4 = getAdjustedSizes({
aspectRatio: aspectRatio,
width: width,
height: height,
});
var _getAdjustedSizes4$wi = _getAdjustedSizes4.width;
width =
_getAdjustedSizes4$wi === void 0
? naturalWidth
: _getAdjustedSizes4$wi;
var _getAdjustedSizes4$he = _getAdjustedSizes4.height;
height =
_getAdjustedSizes4$he === void 0
? naturalHeight
: _getAdjustedSizes4$he;
}
width = Math.floor(
normalizeDecimalNumber(
Math.min(Math.max(width, minWidth), maxWidth)
)
);
height = Math.floor(
normalizeDecimalNumber(
Math.min(Math.max(height, minHeight), maxHeight)
)
);
var destX = -width / 2;
var destY = -height / 2;
var destWidth = width;
var destHeight = height;
var params = [];
if (resizable) {
var srcX = 0;
var srcY = 0;
var srcWidth = naturalWidth;
var srcHeight = naturalHeight;
var _getAdjustedSizes5 = getAdjustedSizes(
{
aspectRatio: aspectRatio,
width: naturalWidth,
height: naturalHeight,
},
{
contain: "cover",
cover: "contain",
}[options.resize]
);
srcWidth = _getAdjustedSizes5.width;
srcHeight = _getAdjustedSizes5.height;
srcX = (naturalWidth - srcWidth) / 2;
srcY = (naturalHeight - srcHeight) / 2;
params.push(srcX, srcY, srcWidth, srcHeight);
}
params.push(destX, destY, destWidth, destHeight);
if (is90DegreesRotated) {
var _ref6 = [height, width];
width = _ref6[0];
height = _ref6[1];
}
canvas.width = width;
canvas.height = height;
if (!isImageType(options.mimeType)) {
options.mimeType = file.type;
}
var fillStyle = "transparent"; // Converts PNG files over the `convertSize` to JPEGs.
if (
file.size > options.convertSize &&
options.convertTypes.indexOf(options.mimeType) >= 0
) {
options.mimeType = "image/jpeg";
}
if (options.mimeType === "image/jpeg") {
fillStyle = "#fff";
} // Override the default fill color (#000, black)
context.fillStyle = fillStyle;
context.fillRect(0, 0, width, height);
if (options.beforeDraw) {
options.beforeDraw.call(this, context, canvas);
}
if (this.aborted) {
return;
}
context.save();
context.translate(width / 2, height / 2);
context.rotate((rotate * Math.PI) / 180);
context.scale(scaleX, scaleY);
context.drawImage.apply(context, [image].concat(params));
context.restore();
if (options.drew) {
options.drew.call(this, context, canvas);
}
if (this.aborted) {
return;
}
var done = function done(result) {
if (!_this3.aborted) {
_this3.done({
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
result: result,
});
}
};
if (canvas.toBlob) {
canvas.toBlob(done, options.mimeType, options.quality);
} else {
done(
toBlob(
canvas.toDataURL(options.mimeType, options.quality)
)
);
}
},
},
{
key: "done",
value: function done(_ref7) {
var naturalWidth = _ref7.naturalWidth,
naturalHeight = _ref7.naturalHeight,
result = _ref7.result;
var file = this.file,
image = this.image,
options = this.options;
if (URL && !options.checkOrientation) {
URL.revokeObjectURL(image.src);
}
if (result) {
// Returns original file if the result is greater than it and without size related options
if (
options.strict &&
result.size > file.size &&
options.mimeType === file.type &&
!(
options.width > naturalWidth ||
options.height > naturalHeight ||
options.minWidth > naturalWidth ||
options.minHeight > naturalHeight ||
options.maxWidth < naturalWidth ||
options.maxHeight < naturalHeight
)
) {
result = file;
} else {
var date = new Date();
result.lastModified = date.getTime();
result.lastModifiedDate = date;
result.name = file.name; // Convert the extension to match its type
if (result.name && result.type !== file.type) {
result.name = result.name.replace(
REGEXP_EXTENSION,
imageTypeToExtension(result.type)
);
}
}
} else {
// Returns original file if the result is null in some cases.
result = file;
}
this.result = result;
if (options.success) {
options.success.call(this, result);
}
},
},
{
key: "fail",
value: function fail(err) {
var options = this.options;
if (options.error) {
options.error.call(this, err);
} else {
throw err;
}
},
},
{
key: "abort",
value: function abort() {
if (!this.aborted) {
this.aborted = true;
if (this.reader) {
this.reader.abort();
} else if (!this.image.complete) {
this.image.onload = null;
this.image.onabort();
} else {
this.fail(
new Error("The compression process has been aborted.")
);
}
}
},
/**
* Get the no conflict compressor class.
* @returns {Compressor} The compressor class.
*/
},
],
[
{
key: "noConflict",
value: function noConflict() {
window.Compressor = AnotherCompressor;
return Compressor;
},
/**
* Change the default options.
* @param {Object} options - The new default options.
*/
},
{
key: "setDefaults",
value: function setDefaults(options) {
_extends(DEFAULTS, options);
},
},
]
);
return Compressor;
})();
return Compressor;
});
function chill() {
let org = document.querySelector("#org");
let cmp = document.querySelector("#compress");
let org1 = document.querySelector(".original");
let cmp1 = document.querySelector(".compressed");
org1.addEventListener("click", () => {
cmp.style.display = "none";
org.style.display = "block";
});
cmp1.addEventListener("click", () => {
org.style.display = "none";
cmp.style.display = "block";
});
}
</script>
</body>
</html>
0 blogger-facebook