0

問題の説明方法がよくわからないので、例を挙げて説明します。

  • 幅と高さが600x400のキャンバスセットアップがあるとします。

  • これで、画像（任意のサイズでも、通常は600x400より大きい）を選択して、キャンバスに描画できます。

  • 次に、元の画像（この場合は1000x500ピクセル）を400x200ピクセルにトリミングする必要があります。

縮小された画像をキャンバスに表示しながら、元のサイズの画像をトリミングしていることを確認するには、どうすればよいですか？

私は、完全にクライアント側のソリューションを検討していることが望ましいです。

4

1 に答える 1

2

ライブデモ

その実際には非常に簡単です。必要なのは、必要なサイズのキャンバスに画像を描画し、toDataUrl()後でそれを呼び出して、結果の画像データを取得することです。元の画像のコンテンツをトリミングされた領域に描画している限り、画像自体を別のキャンバスに描画しても、出力にはまったく影響しません。

var canvas = document.getElementsByTagName("canvas")[0],
    context = canvas.getContext("2d"),
    img = document.getElementsByTagName("img")[0];

canvas.width = 600;
canvas.height = 400;

context.drawImage(img, 0,0,600,400);

var croppedCanvas = document.getElementById("tempCanvas"),
    croppedCtx = croppedCanvas.getContext("2d");

croppedCanvas.width = 400;
croppedCanvas.height = 200;

croppedCtx.drawImage(img, 0, 0);
于 2012-11-15T18:58:40.853 に答える