2017-12-23 10 views
1

私は受け取ったイメージを圧縮するための最良のソリューションを探しています。データベースに保存する必要があります。イメージを圧縮する最良の方法Javascript React Web App

実際、base64でイメージを変換してから、サーバーに送信します。

handleImage = e => { 
    e.preventDefault(); 
    let reader = new FileReader(); 
    let file = e.target.files[0]; 

    reader.onloadend =() => {   
     this.setState({ 
      file: file, 
      image: reader.result 
     }); 
    } 

    this.setState({ imgchange: true }) 
} 

そして現在の状態のイメージをサーバーに送信します。しかし、低品質の画像では問題ありませんが、中程度の高品質をアップロードしようとするとサーバーに保存できません。画像を圧縮する方法が必要です。

これを達成するためのご意見はありますか?私に例を教えてもらえますか?

+0

これまでに何を試みましたか?多くの画像圧縮ライブラリとAPIが利用可能です。 –

答えて

0

最終的に圧縮JPGファイルを生成する画像ライブラリがあるReact/Reduxアプリでこれをやったことがあります。それがうまくいく場合は、Jimpのようなものをオプションとして使用します。これは、ノードのために作られたが、私はbrowserでの使用のためにそれをインストールし、そしてそのようにそれを使用した。

Jimp.read('image.jpg').then((image) => { 
    if (image.bitmap.data.length > MAX_IMAGE_SIZE) { 
    image.quality(80); // some value of 'quality' 
    } 
    // do something else with the image 
}); 

あなたがJPGの右の質があなたのアプリケーションのために右であるかを把握するためにいくつかのあいを行うことができ、かつそれに従って調整してください。

私がこれを使用していたとき、私は画像を多く処理したonDrop関数を一緒に投げました - 私はこのコードがスーパークリーンまたはスーパー効率であることを保証しません - それは使い捨てのプロトタイプから来ました -

handleFileDrop(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 

     var file = e.dataTransfer.files[0]; 

     var reader = new FileReader(); 
     reader.onload = (function(inputFile) { 
     return function(e) { 
      var imageBlob = new Blob([e.target.result], {type: inputFile.type}); 
      var src = URL.createObjectURL(imageBlob) 
      Jimp.read(src, (err, image) => { 
       // do stuff here 
      }); 
     })(file); 

     reader.readAsArrayBuffer(file); 
} 
関連する問題