web-dev-qa-db-ja.com

キャンバスに画像を描画する-実際よりも大きい

キャンバス上の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/

javascripthtmlcanvasdrawimage
16
latata

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

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

キャンバスのビジュアルサイズを設定していますが、ピクセル数は設定していません-）。その結果、ブラウザはキャンバスのピクセルを拡大しています。

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

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

widthおよびheightパラメーターは、キャンバスのピクセル数を制御します。 CSSスタイルがない場合、キャンバスのデフォルトの視覚サイズもこのサイズになり、画面ピクセルごとに1つのキャンバスピクセルになります（Webブラウザーをズームしていない場合）。

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

が32x32（正確に合計1024ピクセル）であるJPGがあるが、CSSを介して表示されるように指定した場合はどうなるかを考えてください なので width:800px; height:16px。同じことがHTMLCanvasにも当てはまります。

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

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

CSSでキャンバスの実際の寸法とは異なるサイズを指定する場合は、表示のために必要に応じてブラウザで拡大および縮小する必要があります。ここでこの例を見ることができます： http://jsfiddle.net/9bheb/5/

38
Phrogz

実例： 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);
2
Alex W

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; in cssで修正できます）。

Etvoilà！

0
flgk