Of Stack

js realizes pure front end compression picture

  • 2021-09-20 19:21:01
  • OfStack

In this paper, we share the specific code of js to realize pure front-end compression pictures for your reference. The specific contents are as follows 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title> Compressed picture </title>
</head>
<body>
 <input id='file' type="file">
 <script>
  var eleFile = document.querySelector('#file')
  var file;
  var render = new FileReader(), img = new Image();
  render.onload = function(e) {
   img.src = e.target.result
  }
  //  Get a picture file 
  eleFile.addEventListener('change', function(e) {
   file = e.target.files[0];
   if(file.type.indexOf('image') === 0) {
    // Read the file and return 1 A URL Format Base64 String 
    render.readAsDataURL(file)
   }
  })
 
  // Use canvas Draw a picture 
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
 
  img.onload = function() {
 
   // Original size 
   var originWidth = this.width;
   var originHeight = this.height;
 
   // Maximum size limit 
   var maxWidth = 200, maxHeight = 200
 
   //  Target size 
   var targetWidth = originWidth, targetHeight = originHeight;
 
   // When the original size is greater than 200*200 Time 
   if(originWidth > maxWidth || originHeight > maxHeight) {
    if(originWidth / originHeight > maxWidth / maxHeight) {
     // Wider 
     targetWidth = maxWidth;
     targetHeight = Math.round(maxWidth * (originHeight / originWidth))
    }else {
     targetHeight = maxHeight;
     targetWidth = Math.round(maxHeight * (originWidth / originHeight))
    } 
   }
 
   // Draw a picture 
   canvas.width = targetWidth;
   canvas.height = targetHeight;
   // Clear canvas 
   context.clearRect(0,0,targetWidth, targetHeight)
   // Picture compression 
   context.drawImage(img, 0, 0, targetWidth, targetHeight);
   //canvas  Convert to blob And upload 
   canvas.toBlob(function(blob) {
    try {
     var xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function() {{
      if(xhr.status == 200) {
 
      }
     }}
     // Start uploading 
     xhr.open('POST','upload.php', true);
     xhr.send(blob)
    } catch (error) {
     console.log(error)
    }
    
   }, file.type || 'image/png')
   // Preview the original picture on the page 
   var div1 = document.createElement('div')
   div1.innerText = ' Original image: '
   document.body.appendChild(div1)
   document.body.appendChild(img)
   //canvas Preview 
   var div2 = document.createElement('div')
   div2.innerText = 'canvas Photo: '
   document.body.appendChild(div2)
   document.body.appendChild(canvas)
  }
  
 </script>
</body>
</html>

Analysis: The principle is to use the generated pictures of canvas to control its size to compress the pictures. It should be noted that if the size of the pictures is too small, it will lead to blurred pictures. When using, pay attention to setting its proportion control.

1. Read the picture file through FileReader, and install the picture url with Image (which can be used for preview)
2. Convert to base64 String Mode
3. The width and height of the final canvas are controlled by maxWidth, MaxHeight and proportion
4. Draw with canvas
5. Output blob file from canvas and upload it

Related articles: