Webpack 圧縮画像のサイズを制限する方法

今回は、Webpack圧縮画像のサイズを制限する方法と、Webpack圧縮画像のサイズを制限するための注意事項について説明します。以下は実際的なケースです。

画像のサイズが URL ローダーのサイズ標準よりも大きいため、Webpack が画像パスを自動的に圧縮し、それが直接の原因となり、画像を取得するときに画像を正しく取得できなくなります。正しいパスの値。

解決策に直接進みます。

picUpload(e) {
   let image = new Image();
   const reader = new FileReader();
   const $img = e.target.files[0];
   const formData = new FormData();
   formData.append('pic', $img);
   reader.onload = (e) => {
    const src = e.target.result;
    image.src = src;
    if (image.width !== 750 && image.height !== 1334) {
     this.showModal('', '图片尺寸有误,请重新上传', 'warning', true, false);
    } else {
     if ($img.size > (300 * 1024)) {
      this.showModal('', '图片大小不能超过300k', 'warning', true, false);
      this.setParams('pic', '');
     } else {
      this.$set(this, 'IMGNAME', $img.name);
      this.setParams('pic', formData);
     }
    }
   }
   if (e.target.files && e.target.files[0]) {
    reader.readAsDataURL(e.target.files[0]);
   }
  },

ここで画像の src に割り当てられる値は、base64 でエンコードされた画像のパスです。 したがって、パスの Base64 エンコード結果を取得するには、readAsDataURL を使用する必要があります。小さな穴です。後で簡単に見られるように、ここにメモを付けます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Webpack がファイルを動的に導入する方法

WeChat アプレットの円形プログレスバーを作成する方法

JS はデフォルトのアバター塗りつぶしを実装します

以上がWebpack 圧縮画像のサイズを制限する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。