画像圧縮のサンプルコードを共有し、HTML5 を使用してアップロードする

実装プロセス:

• でアップロードされたファイルを取得します。

• FileReader を使用して画像を読み取り、FileReader で読み取った画像データを配置する新しい Image オブジェクトを作成します。

• キャンバスを使用して、Image オブジェクトを比例的に拡大縮小し、キャンバスに書き込み、base64 形式のデータとして保存します (ここでは FormData オブジェクトのアップロードを使用します。実際、base64 データは、次を使用して ajax 経由でサーバーに直接アップロードできます) post メソッドを使用すると、次の 2 つの手順を回避できます。

• 新しい Blob オブジェクトを作成し、そこに Base64 データを配置します。

• サードパーティのクラウド ストレージ サーバーにアップロードします。

HTML ネイティブを使用する画像をアップロードします。ここでいくつかの落とし穴があります:

• ここでは、特定のサフィックス名を指定せずに image/* を直接使用します。 、一部の Android スマートフォンでは写真をアップロードできません。;

• 複数の写真を選択するには、

  属性を追加します (この例では 1 つの写真のみを選択します)。

capture="camera" 属性を追加すると、カメラを呼び出すことができます。属性は iPhone のカメラを直接呼び出します) が、フォト アルバムを読み取りません。現在、Android デバイスと iOS デバイスの両方で、accept="image/*" を使用して、カメラを使用して写真を撮るか、写真からの写真を使用するかを選択します。アルバムなので、この属性は無視できます)。

• <input id="imgUpload" type="file" onchange="addPic" accept="image/*" />

入力ファイルが変更

イベント

をトリガーすると、アップロードされたファイルを取得します

function addPic(e){
  if (typeof FileReader === 'undefined') {
    return alert('你的浏览器不支持上传图片哟！');
  }
  var files = e.target.files || e.dataTransfer.files;
  if(files.length > 0){
    imgResize(file[0], callback);
  }
}

FileReaderを使用して画像データを取得し、キャンバスを使用して圧縮します

iOS携帯電話は写真を撮るときに90度回転しますここで、iOS端末がそれを行うかどうかを判断する必要があります 対応する処理後にアップロードします

• function imgResize(file, callback){
    var fileReader = new FileReader();
    fileReader.onload = function(){
      var IMG = new Image();
      IMG.src = this.result;
      IMG.onload = function(){
        var w = this.naturalWidth, h = this.naturalHeight, resizeW = 0, resizeH = 0;
        // maxSize 是压缩的设置，设置图片的最大宽度和最大高度，等比缩放，level是报错的质量，数值越小质量越低
        var maxSize = {
          width: 500,
          height: 500,
          level: 0.6
        };
        if(w > maxSize.width || h > maxSize.height){
          var multiple = Math.max(w / maxSize.width, h / maxSize.height);
          resizeW = w / multiple;
          resizeH = w / multiple;
        } else {
          // 如果图片尺寸小于最大限制，则不压缩直接上传
          return callback(file)
        }
        var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        if(window.navigator.userAgent.indexOf('iPhone') > 0){
          canvas.width = resizeH;
          canvas.height = resizeW;
          ctx.rorate(90 * Math.PI / 180);
          ctx.drawImage(IMG, 0, -resizeH, resizeW, resizeH);
        }else{
          canvas.width = resizeW;
          canvas.height = resizeH;
          ctx.drawImage(IMG, 0, 0, resizeW, resizeH);
        }
        var base64 = canvas.toDataURL('image/jpeg', maxSize.level);
        convertBlob(window.atob(base64.split(',')[1]), callback);
      }
    };
    fileReader.readAsDataURL(file);
  }

base64データをBlobオブジェクトに変換します

Android端末はBlobをサポートしていません
• 構築メソッド

  function convertBlob(base64, callback){
    var buffer = new ArrayBuffer(base64.length);
    var ubuffer = new Uint8Array(buffer);
    for (var i = 0; i < base64.length; i++) {
      ubuffer[i] = base64.charCodeAt(i)
    }
    var blob;
    try {
      blob = new Blob([buffer], {type: &#39;image/jpg&#39;});
    } catch (e) {
      window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
      if(e.name === &#39;TypeError&#39; && window.BlobBuilder){
        var blobBuilder = new BlobBuilder();
        blobBuilder.append(buffer);
        blob = blobBuilder.getBlob(&#39;image/jpg&#39;);
      }
    }
    callback(blob)
  }

FormDataを使用しますデータをアップロードするための

HTML5

のオブジェクト

function callback(fileResize){
  var data = new FormData();
  data.append('file', fileResize);
  var config = {
    headers: {'Content-Types': 'multipart/form-data'}
  };
  // 这里用的es6语法发起请求，可以无视
  axios.post(url, data, config).then().catch(e){}
}

[関連する推奨事項]

1.

無料のh5オンラインビデオチュートリアル

2.

HTML5完全版マニュアル

3.

php.cnオリジナルのhtml5ビデオチュートリアル

以上が画像圧縮のサンプルコードを共有し、HTML5 を使用してアップロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。