Use compressorjs to compress pictures, optimize functions, and compress pictures in all formats

  The image compression function written in the last article is only applicable to image/jpeg and image/webp Images .vue Achieve image compression , Support the compression of pictures when uploading multiple files （ Can only support jpeg)_ZMJ_QQ The blog of -CSDN Blog

  In the actual development, there are other common picture formats png as well as ios Medium heic Image format , Need to compress pictures in all formats , Therefore, you can first convert the picture format to jpeg Reuse later compressorjs The compressed image .

1、ConvertImage.js Turn picture into jpeg Format

Reference blog    input file Upload pictures and compress _ A blog named Mo Yu -CSDN Blog _input Upload compressed pictures

The method of this article directly adjusts canvas On canvas size , However, the image compressed by this method is seriously distorted

（ There may be an easier way to convert the image format , If someone knows, leave a link for me , Hee hee ）

//  The idea is to create a picture , take file Equal to this picture , And then create a canvas Layers  , take canvas Scale equally ,
// And then use canvas Of drawImage Match the picture with canvas Close , Then I'm putting canvas Of base64 Turn into file that will do 
export default function ConvertImage(file) {
    return new Promise((resolve, reject) => {
        const fileName = file.name.substring(0, file.name.indexOf('.'));
        let reader = new FileReader(); // Read file
        reader.readAsDataURL(file);
        reader.onloadend = function (e) {
            let image = new Image() // Create a new one img label （ It's not embedded yet DOM node )
            image.src = e.target.result // Set the path of the picture to file route 
            image.onload = function () {
                let canvas = document.createElement('canvas'),
                    context = canvas.getContext('2d'),
                    imageWidth = image.width,    
                    imageHeight = image.height,
                    data = ''
                canvas.width = imageWidth
                canvas.height = imageHeight

                context.drawImage(image, 0, 0, imageWidth, imageHeight)
                data = canvas.toDataURL('image/jpeg')
                var newfile = dataURLtoFile(data, fileName + '.jpeg');
                resolve(newfile)
            }
        }
    })
}
function dataURLtoFile(dataurl, filename) { // base64 turn file object 
    let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });  // Into the jpeg Format 
}

2、ImageCompressor.js  Compress the picture

import Compressor from 'compressorjs';
//  Only right jpeg Format of the picture 
/**
 * @param image  picture 
 * @param backType  The type to be returned blob,file
 * @param quality  Picture compression ratio  0-1, The smaller the number is. , The smaller the picture compression 
 * @returns
 */
export default function ImageCompressor(image, backType, quality) {
    return new Promise((resolve, reject) => {
        new Compressor(image, {
            quality: quality || 0.6,
            success(result) {

                let file = new File([result], image.name, { type: image.type })
                if (!backType || backType == 'blob') {
                    resolve(result)
                } else if (backType == 'file') {
                    resolve(file)
                } else {
                    resolve(file)
                }
            },
            error(err) {
                console.log(' Picture compression failed ---->>>>>', err)
                reject(err)
            }
        })
    })
}

 3、 Use

If the picture is not jpeg For format, first convert the file , Compress after successful conversion

import ImageCompressor from '@/utils/ImageCompression';
import ConvertImage from '@/utils/ConvertImage';

 async getUrl(file) {
      this.isShowLoading = true;
      const formData = new FormData();
      for (let i = 0; i < file.length; i++) {
        let img = file[i];
        
        const fileType = img.name.substring(img.name.indexOf('.') + 1);
       //  Determine if the file is jpeg  No jpeg Everything turned into jpeg 
        if (!['jpeg', 'jpg'].includes(fileType)) {
          img = await ConvertImage(img);  // Turn to Chen jpeg Format file
        }

        let newImg = await ImageCompressor(img, 'file', 0.6); // Picture compression 
        formData.append('file', newImg);
      }
      multipleFiles(formData).then((res) => {
         //axios Upload .....
      });
    },