イメージをjpg角度に変換する4

Question

WebアプリケーションにTypeScriptでAngular 4を使用しています。ユーザーがサムネイルプロフィール写真を自分の端末からpng、jpeg、またはjpg形式でアップロードできるようにしています。その写真をフロントエンドのjpgに変換したいと思います。私はこれを行うためのいくつかの方法を探しています、ファイルの種類は読み取り専用です。

私がこれをやっているのは、ユーザーがプロファイルページを読み込んだときに、ページが高速になるように大きな画像をダウンロードする必要がないからです。私はjpgへの変換は、サンプル画像でテストしたときに、画像のpngが35.4KBで、同じ画像の変換されたjpgが6.7KBであったため、最良の賭けと考えることができます。より良い解決策があれば、私はそれを聞いてみたい！

ありがとうございます！私はちょうどここに、あなたの要件のようないくつかのコードを書いた

Answer 1

は私がやったことです：FileReaderによって

1. 負荷ローカルの画像をしてonloadリスナーにそのonloadイベント
2. にリスナーを追加し、「作成SRC 『（データのURL形式）
3. が作成した『キャンバス』の要素を、このキャンバス
4. 使用上の画像を描画する『ロードされたイメージによって属性』イメージ」new Image()することにより、オブジェクト、および設定』 SRCあなたがキャンバスに画像を描画した後Canvas.toDataURL()はData URL文字列のキャンバスのコンテンツを取得する呼び出し、サーバー

に画像データを投稿し、それはだということに注意してください

（BASE64に）変換した画像データをフェッチするキャンバスデータは元の画像データではなく、たとえば画像サイズが100×100、キャンバスサイズが50×50の場合、この機能では50×50ピクセルの画像が得られるため、フルサイズの画像が必要な場合はキャンバスを特定のサイズにリサイズする必要があります。

この関数は、2つのパラメータがあります

canvas.toDataURL（タイプ、encoderOptions）を、

• タイプ - イメージフォーマットを示すDOMString。デフォルトのフォーマットタイプはimage/pngです。あなたのコードでがあなたのケースで "image/jpeg"に設定されている場合
• encoderOptions - 要求されたタイプがimage/jpegまたはimage/webpの場合、画質を示す0から1までの数字。私はいくつかの変数を省略

  preview(input: HTMLInputElement) { 
       if (input.files.length) { 
        let reader = new FileReader(); 
        reader.onload = (e) => { 
         if (!this.img) { 
          this.img = new Image(); 
         } 
  
         this.img.src = (e.target as any).result; 
         this.img.onload =() => { 
          // omit code of setting 'dx', 'dy', 'width', 'height' 
          let ctx = <CanvasRenderingContext2D>this.canvas.nativeElement.getContext('2d'); 
          ctx.drawImage(this.img, dx, dy, width, height); 
  
          let dataUrl = (<HTMLCanvasElement>this.canvas.nativeElement).toDataURL('image/jpeg', 0.7); 
          this.uploadService.upload(dataUrl).then((resp: any) => { 
           if (resp.key) { 
            this.asset.image = resp.key; 
           } 
          }); 
         }; 
        } 
  
        reader.readAsDataURL(input.files[0]); 
       } 
      } 
  

  ：

はここに私の参考のためにTypesScriptに関数write「をプレビューし、アップロード」で上記のコードでdx, dx, width, height、私はクリッピング（画像位置を調整するためにこれらの変数を使用します目的）。

これはJavaScriptの例である：

function _elm(id) { 
 
    return document.getElementById(id); 
 
} 
 

 
_elm('fileInput').onchange= function(event) { 
 
    if (event.target.files.length) { 
 
    var fileReader = new FileReader(); 
 
    fileReader.onload = function(event) { 
 
     var img = new Image(); 
 
     img.src = event.target.result; 
 
     _elm('sizeRaw').innerText = '+ data-url size ' + event.target.result.length; 
 
     img.onload = function() { 
 
     var canvas = _elm('canvas'); 
 
     var context = canvas.getContext('2d'); 
 
     context.drawImage(img, 0, 0, 200, 200); 
 
     var dataUrl = canvas.toDataURL('image/jpeg', 0.5); 
 
     _elm('output').innerText = dataUrl; 
 
     _elm('sizeNew').innerText = '+ data-url size ' + dataUrl.length; 
 
     } 
 
    }; 
 
    fileReader.readAsDataURL(event.target.files[0]); 
 
    } 
 
};

#canvas { 
 
    border: 1px solid blue; 
 
} 
 

 
#output { 
 
    word-break: break-all; 
 
}

<h3>Input file <span id="sizeRaw"></span>: </h3> 
 
<input id="fileInput" type="file" accept="image/*"> 
 
<h3>Canvas</h3> 
 
<div> 
 
<canvas id="canvas" width="200" height="200"></canvas> 
 
</div> 
 
<h3>Output <span id="sizeNew"></span>: </h3> 
 
<div id="output"> 
 
</div>