web-dev-qa-db-ja.com

アップロードする前にクライアント側で画像を圧縮する

JPG、GIF、PNGファイルを可能な限り圧縮する無料のスクリプトを知っている人はいますか？

javascriptjqueryjquery-plugins
36
xtremist

canvasを使用して画像のサイズを変更し、dataURIを使用してエクスポートできる場合があります。ただし、圧縮についてはわかりません。

これを見てください： HTML5キャンバスの画像のサイズ変更

17
typeof

この問題を解決するために、JICと呼ばれるjavascriptライブラリを開発しました。クライアント側でjpgとpngをJavaScriptで100％圧縮でき、外部ライブラリは不要です。

ここでデモを試すことができます： http://makeitsolutions.com/labs/jic そしてここでソースを入手してください： https://github.com/brunobar79/JIC

55
brunobar79

ここで実験について読みました： http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html

理論的には、キャンバスを使用して、アップロードする前にクライアント上の画像のサイズを変更できます。プロトタイプの例は最近のブラウザでのみ機能するようですが、興味深いアイデアです...

ただし、キャンバスを使用して画像を圧縮するかどうかはわかりませんが、確かにサイズを変更できます。

6
David Hellsing

クライアント側の画像圧縮を実行するライブラリを探している場合は、これを確認できます： compress.js 。これは基本的に、複数の画像を純粋にJavaScriptで圧縮し、base64文字列に変換するのに役立ちます。必要に応じて、MB単位で最大サイズを設定したり、優先画質を設定したりできます。

6
alextanhongpin

私はパーティーに遅れましたが、この解決策は非常にうまくいきました。 このライブラリ に基づいて、関数lik thisを使用できます-画像、品質、最大幅、および出力形式（jepg、png）を設定します。

function compress(source_img_obj, quality, maxWidth, output_format){
    var mime_type = "image/jpeg";
    if(typeof output_format !== "undefined" && output_format=="png"){
        mime_type = "image/png";
    }

    maxWidth = maxWidth || 1000;
    var natW = source_img_obj.naturalWidth;
    var natH = source_img_obj.naturalHeight;
    var ratio = natH / natW;
    if (natW > maxWidth) {
        natW = maxWidth;
        natH = ratio * maxWidth;
    }

    var cvs = document.createElement('canvas');
    cvs.width = natW;
    cvs.height = natH;

    var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, natW, natH);
    var newImageData = cvs.toDataURL(mime_type, quality/100);
    var result_image_obj = new Image();
    result_image_obj.src = newImageData;
    return result_image_obj;
}
6
user1791914