À propos de la compression d'images Electron-Vue

J'ai récemment utilisé electron-vue (Electron : basé sur Chromium et Node.js, permettant de créer des applications en utilisant HTML, CSS et JavaScript) pour créer un petit logiciel de compression d'images. Il est toujours nécessaire pour le travail quotidien et prend en charge les images couramment utilisées. formats. ;

Vous pouvez définir le taux de compression

1. Prise en charge du réglage de la largeur et de la hauteur fixes

2. Prise en charge de la largeur ou de la hauteur fixes (réduites en fonction du rapport d'image d'origine)

3.

Les opérations spécifiques sont les suivantes :

1. Le front-end transmet le chemin de l'image et le chemin compressé au back-end. Cela peut être communiqué via l'événement électronique

L'événement ipcRenderer.send est appelé. , et un nom d'événement est transmis. Le back-end utilise ipcRenderer.on Il suffit de le recevoir

Quelque chose à noter ici est que nous pouvons utiliser ipcRenderer.once pour le recevoir une fois afin d'éviter de recevoir des messages à plusieurs reprises.

Veuillez vous référer au code suivant pour plus de détails :

await request('resize', this.form.imgPath , this.form.imgSavePath)
  request方法是对ipcRenderer.send做的一个封装
  async function request( event = '', ...params) {
  if (!event) {
    return
  }
  // 构造promise
  const reply = new Promise((resolve, reject) => {
    // 数据返回事件，事先约定
    const eventReply = `${event}-reply`
    ipcRenderer.once(eventReply, (event, data) => {
      resolve(data)
    })
  })
  // 触发事件
  ipcRenderer.send(event, ...params)
  // 返回promise
  return reply
}

2. Le backend vient de commencer à envisager d'utiliser la bibliothèque de tailles d'image pour obtenir la largeur et la hauteur de l'image : il vous suffit de la transmettre ; le chemin de l'image

const sizeOf = require('image-size')
 let dimensions = sizeOf(path)
  if(!dimensions){
    return
  }
  let width = dimensions.width
  let height = dimensions.height

Après les tests, j'ai découvert quelque chose. Le petit problème est que parfois l'acquisition échoue. S'il y a un problème, elle ne peut pas être utilisée. Il n'y a aucun problème à utiliser la bibliothèque probe-image-size après une requête ultérieure. La méthode d'utilisation est la suivante :

const probe = require('probe-image-size');
 let dimensions = probe.sync(require('fs').readFileSync(path))
  if(!dimensions){
    return
  }
  let width = dimensions.width
  let height = dimensions.height

3 Enfin, transmettez le chemin de l'image de sortie ainsi que la largeur et la hauteur enregistrées, et appelez le redimensionnement. -optimize-images library. , le code est le suivant :

fs.readFile(path, function (err, originBuffer) {
    if (err) {
      return
    }
    output = output + `/${basename(path)}`
    fs.writeFile(output, originBuffer, async function (err) {
      if (err) {
        return
      }
      const options = {
        images: [output],
        width,
        height,
        quality: 95,
      }
      //执行压缩.
      await resizeOptimizeImages(options)
    })
  })

Résumé :

Voici quelques problèmes mineurs rencontrés lors du processus d'utilisation de la taille de l'image. Bien que le problème ne soit pas résolu à la racine, nous. peut aussi en tirer des leçons. Parfois, nous voulons réaliser les fonctions que vous souhaitez ne peuvent pas être corrigées d'une seule manière, vous devez apprendre à être flexible et, plus important encore, vous devez apprendre à analyser et à résoudre les problèmes.

Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!