44

キャンバス要素をjpgにエンコードするときに品質係数を設定したいと思います。

var data = myCanvas.toDataURL( "image/jpeg" );

それは私に質の高い選択肢を与えません。使用できる代替ライブラリはありますか？

関連：さまざまなブラウザで使用されるデフォルトの品質設定は何ですか？

4

2 に答える 2

81

関数の 2 番目の引数は品質です。範囲は 0.0 から 1.0 です

canvas.toDataURL(type,quality);

ここに拡張情報があります

そして、一度変換してしまえば画質はわからないと思います。このフィードでわかるように、コンソールに値を出力するときに得られる唯一の情報は、タイプとイメージ コード自体です。

これは、ブラウザで使用される品質のデフォルト値を知るために作成したコードのスニペットです。

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

    var url = c.toDataURL('image/jpeg');
    var v = 0
    for(var i = 0; i < 100; i++ ){

        v += 0.01;
        x = parseFloat((v).toFixed(2))
        var test = c.toDataURL('image/jpeg', x);

        if(test == url){
            console.log('The default value is: ' + x);
        }
    }

基本的に画像自体の変更はbase64文字列に反映されると思っていました。したがって、コードはtoDataURL()メソッドで可能なすべての値を試し、結果の文字列をデフォルトの文字列と比較します。そしてそれはうまくいくようです。クロムの場合、0.92 になります。

これは、フィドルでの実際の例です。

于 2013-01-17T16:28:15.827 に答える
5

非常にシンプルで人間が読める方法であるFabric.jsを使用すると、次のようになります。

canvas.toDataURL({
   format: 'jpeg',
   quality: 0.8
});

これにより、他のオプションを使用して、画像をトリミングすることもできます。

canvas.toDataURL({
    format: 'png',
    left: 300,
    top: 250,
    width: 200,
    height: 150
})

jsFiddle: http://jsfiddle.net/7f9bqs00/30/

于 2015-05-29T16:20:08.897 に答える