2

ブラウザでアップロードした画像のサイズを変更したいと思います。キャンバスを使用して、アップロードされた画像をキャンバスに描画し、サイズを変更して、toDataURL メソッドの結果を使用しています。

単純化されたコード (アップロード部分なし) は次のようになります。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d', { alpha: false} );
// img src contains data url of uploaded image
ctx.drawImage(img, 0, 0, imgWidth, imgHeight); 
var dataUrl = canvas.toDataURL('image/png');

問題は、dataUrl にアルファ チャネルが含まれていることですが、コンテキストはアルファを false に設定して作成されています。

アルファチャンネルなしでデータ URL を取得することは可能ですか?

そうでない場合は、Javascript 画像ライブラリの 1 つを使用することを検討しましたが、それらのほとんどは canvas に依存しています。

また、キャンバス内のデータを使用して画像をエンコードすることもできましたが、それはしたくありません:)

4

1 に答える 1

5

alpha:falseは WebGL でのみ使用されます。2D コンテキストの作成時には無視されます。

ただし、不要なアルファが削除された jpg 形式でキャンバスをエクスポートできます。

// export a full-quality jpg dataUrl

canvas.toDataURL("image/jpeg", 1.0);
于 2015-01-14T16:40:29.243 に答える