Technology stack:
canvas
JSZIP.js (the JSZIP Library of the compression and decompression plug-in on the web page side)
Filesaver.js (file saved to local library)
Direct interpretation of source code:
<div class="cont">
<div class="uploadBtn">Select pictures<input name="file" accept="image/png, image/jpeg" multiple type="file" id="file"></div>
<br>
<br>
<div class="selectbox">
<div>Please select compression quality</div>
<select id="encoderOptions">
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5" selected>50%</option>
<option value="0.6">60%</option>
<option value="0.7">70%</option>
<option value="0.8">80%</option>
<option value="0.9">90%</option>
<option value="1">100%</option>
</select>
</div>
<br>
<div id="show">
<br>
<br>
Pictures to be compressed:
<br>
<br>
<ul id="selectView"></ul>
<br>
</div>
<div id="compressBox">
<button id="active" onclick="startCompress()">Compress pictures and download</button>
</div>
</div>
<canvas id="canvas"></canvas>
js part:
<!-- Web compression and decompression plug-in JSZIP library -->
<script src="jszip.min.js"></script>
<!-- Save file to local library -->
<script src="FileSaver.js"></script>
<!--For file download-->
<script>
// Picture quality (0-1)
var encoderOptions = 0.5;
// Get input
var filesInput = document.querySelector('#file')
// Get compression button
var compressBox = document.querySelector('#compressBox')
// Choose a picture display viewport
var selectView = document.querySelector('#selectView')
// Get the viewport displayed after selecting the picture
var show = document.querySelector('#show')
var encoderOptionInput = document.querySelector('#encoderOptions')
// All selection files
var files;
var canvas;
var ctx;
// new JSZip object
var zip = new JSZip();
// Create the images folder for compressed pictures
var imgFolder = zip.folder("images");
// Listen for changes in input selection file
filesInput.onchange = function() {
// Get all file s
files = filesInput.files
// If the number of files selected is greater than 0, the compression operation will be displayed.
if (files.length > 0) {
show.style.display = 'block'
compressBox.style.display = 'block'
}
// Splicing thumbnail list
var html = ''
for (var i = 0; i < files.length; i++) {
html += '<li><img width="60" height="60" src="' + getObjectURL(files[i]) + '" alt="" /></li>'
}
// Insert a patched picture list
selectView.innerHTML = html
}
// How to compress pictures
function startCompress() {
demo(files[0], 0)
}
// Using recursive loop files
function demo(file, num) {
if (num <= files.length - 1) {
encoderOptions = parseFloat(encoderOptionInput.value)
// Get base64 address of file
var imgsrc = getObjectURL(file)
// Get file name
var name = file.name
// Listen if the conversion of base64 address is successful, execute the following
if (imgsrc) {
// Create image and dynamically copy src
var img = new Image()
img.src = imgsrc
// Monitor img image loading completed
img.onload = () => {
// Get canvas label
canvas = document.querySelector('#canvas')
// Get context
ctx = canvas.getContext('2d')
// Set the width and height of canvas according to the width and height of image
canvas.width = img.width
canvas.height = img.height
// Draw a picture on canvas
ctx.drawImage(img, 0, 0, img.width, img.height);
// Turn canvas to path
// canvas.toDataURL(type, encoderOptions);
// parameter
// type optional
// Picture format, default is image / png
// encoderOptions optional
// Picture quality. Values range from 0 to 1. If the image format is specified as image / jpeg or image / webp. If the value is out of range, the default value of 0.92 will be used. Other parameters are ignored.
var typeTxt = 'image/jpeg'
if (name.indexOf('png') != -1) {
typeTxt = 'image/png'
}
var imgdata = canvas.toDataURL(typeTxt, encoderOptions)
// Split base64
imgdata = imgdata.split(',')
// Add pictures to folder
imgFolder.file(name, imgdata[1], { base64: true });
// If the current tag and the number of files are equal, it means that the compression has been added to the file to the folder, and the compression can be downloaded.
if (num == files.length - 1) {
zip.generateAsync({ type: "blob" })
.then(function(content) {
// The file name of the zip created is images
saveAs(content, "images.zip");
location.reload()
});
} else {
// If the tag is not reached, continue the callback
num++
demo(files[num], num)
}
}
}
}
}
// Get base64 path of file
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
css part:
<style>
*{
padding: 0;
margin: 0;
background-color: #000;
color: #DC143C;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
html,body{
overflow: hidden;
padding: 20px;
box-sizing: border-box;
}
h3{
text-align: center;
}
#compressBox{
display: none;
}
#canvas{
position: fixed;
top: -100000px;
left: -100000px;
opacity: 0;
}
.cont{
margin-top: 20px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #DC143C;
border-radius: 10px;
background-color: #fff;
font-size: 13px;
min-height: 80px;
}
.uploadBtn{
position: relative;
display: inline-block;
padding: 0 20px;
line-height: 28px;
background-color: #fff;
border: 1px solid #DC143C;
font-size: 12px;
border-radius: 30px;
text-align: center;
cursor: pointer;
width: 300px;
}
.uploadBtn input{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
#selectView{
background-color: #fff;
}
#selectView li{
background-color: #fff;
display: inline-block;
margin-right: 10px;
}
#compressBox{
height: 60px;
background-color: #fff;
}
#active{
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
padding: 0 20px;
line-height: 28px;
background-color: #DC143C;
border: 1px solid #DC143C;
font-size: 12px;
border-radius: 30px;
text-align: center;
cursor: pointer;
width: 300px;
color: #fff;
}
#show{
display: none;
background-color: #fff;
}
.help{
position: fixed;
font-size: 12px;
bottom: 20px;
left: 0;
text-align: center;
width: 100%;
}
.selectbox{
background-color: #fff;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.selectbox input,.selectbox div,.selectbox select{
background-color: #fff;
}
.selectbox div{
padding-right: 20px;
}
</style>
Interpretation:
1. The above tools are only temporarily configured to allow png and jpg image compression. If you need other formats, please go to my github to download and modify them by yourself.
2. Compression quality: 10 copies;
3. The compression will be automatically packed into zip, downloaded and decompressed by itself, and the compression speed is amazing. ,
4. I think the compression speed is better than that of panda.
usage method:
github: https://github.com/xiaoqiuxiong/imageCompressionTool
Directly clone Git, and then the browser (preferably Google browser) opens the idnex.html page, which is instantly easy to use.
It can be used in the future, and there is no need to use any panda compression.
One key compression, is the crane!
If it's easy to use, remember to add stars.