ホームページ  >  記事  >  ウェブフロントエンド  >  画像圧縮のサンプルコードを共有し、HTML5 を使用してアップロードする

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

零下一度
零下一度オリジナル
2017-05-08 13:47:042544ブラウズ
実装プロセス:
  • 3525558f8f338d4ea90ebf22e5cde2bc でアップロードされたファイルを取得します。

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

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

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

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

HTML ネイティブを使用するec7025d016b05aec9d8081c59197edf6画像をアップロードします。ここでいくつかの落とし穴があります:
  • ここでは、特定のサフィックス名を指定せずに 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 === &#39;undefined&#39;) {
    return alert(&#39;你的浏览器不支持上传图片哟!&#39;);
  }
  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(&#39;canvas&#39;),
          ctx = canvas.getContext(&#39;2d&#39;);
          if(window.navigator.userAgent.indexOf(&#39;iPhone&#39;) > 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(&#39;image/jpeg&#39;, maxSize.level);
          convertBlob(window.atob(base64.split(&#39;,&#39;)[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(&#39;file&#39;, fileResize);
  var config = {
    headers: {&#39;Content-Types&#39;: &#39;multipart/form-data&#39;}
  };
  // 这里用的es6语法发起请求,可以无视
  axios.post(url, data, config).then().catch(e){}
}
[関連する推奨事項]

1.

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

2.

HTML5完全版マニュアル

3.

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。