18

キャンバス上のjpgファイルから画像を描きたいです。私のコード:

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0);
  };
  imageObj.src = 'img/my_image.jpg';

問題は、キャンバス上の画像がファイルよりもはるかに大きいことです。なんで？画像を実際のサイズで描画するにはどうすればよいですか?

更新: 結果: http://jsfiddle.net/AJK2t/

4

3 に答える 3

43

これはあなたの問題です：

<canvas style="width: 700px; height: 400px;" id="konf"></canvas>

キャンバスの視覚的なサイズを設定していますが、ピクセル数は設定していません。その結果、ブラウザはキャンバスのピクセルを拡大しています。

最も簡単な修正は次のとおりです。

<canvas width="700" height="400" id="konf"></canvas>

widthおよびパラメータはheight、キャンバス内のピクセル数を制御します。CSS スタイリングを使用しない場合、キャンバスのデフォルトのビジュアル サイズもこのサイズになり、画面ピクセルごとに 1 つのキャンバス ピクセルになります (Web ブラウザーをズームしていないと仮定します)。

私の回答から関連する質問へのコピー/貼り付け:

32x32の JPG (合計ピクセル数は正確に 1024) で、CSS を介してwidth:800px; height:16px. 同じことが HTML Canvas にも当てはまります。

  • canvas 要素自体の属性widthとheight属性によって、描画できるピクセル数が決まります。canvas 要素の高さと幅を指定しない場合、仕様によると、
    「幅属性のデフォルトは 300、高さ属性のデフォルトは 150 です。」

  • widthおよびheightCSS プロパティは、要素が画面に表示されるサイズを制御します。CSS の寸法が設定されていない場合、要素の固有のサイズがレイアウトに使用されます。

キャンバスの実際のサイズとは異なるサイズを CSS で指定した場合、表示のために必要に応じてブラウザーによって引き伸ばされたり押しつぶされたりする必要があります。ここでこの例を見ることができます: http://jsfiddle.net/9bheb/5/

于 2013-04-03T18:08:26.183 に答える
3

実施例： http: //jsfiddle.net/jzF5R/

画像をスケーリングするには、必要なスケーリングされた幅と高さを提供する必要がありますctx.drawImage()。

// x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);

元の画像サイズを維持する:

ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);

キャンバスがページからはみ出さないようにします。

ctx.canvas.width = document.body.clientWidth;

画像の幅と高さを元の 70% に簡単にスケーリングできます。

ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);
于 2013-04-03T17:12:04.047 に答える
0

HTML でキャンバスの幅と高さを定義せずにキャンバス (またはその他のもの) に MJPEG ストリームを表示するには、CSS のみを使用してレスポンシブ キャンバスを取得し、ページに合わせます。

//get size from CSS
var sizeWidth = context.canvas.clientWidth;   
var sizeHeight = context.canvas.clientHeight;   
//here the solution, it replaces HTML width="" height=""
canvas.width = sizeWidth;
canvas.height = sizeHeight;
...........
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, sizeWidth, sizeHeight);

キャンバスのサイズに関係なく、画像は完全にキャンバスに含まれます (高さと幅の比率は維持されませんが、height:auto;CSS で修正できます)。

ほら！

于 2015-04-12T10:06:42.027 に答える