web-dev-qa-db-ja.com

Canvas drawImageスケーリング

キャンバスに比例して画像を拡大しようとしています。私は固定幅と高さでそれをスケーリングすることができます：

context.drawImage(imageObj, 0, 0, 100, 100)

ただし、幅のサイズを変更し、高さを比例的に変更したいだけです。次のようなもの：

context.drawImage(imageObj, 0, 0, 100, auto)

私は考えられるあらゆる場所を見てきましたが、これが可能かどうかはわかりません。

javascriptcanvashtml5-canvasresizedrawimage
52
selanac82
context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width)
88
Gaurav

@TechMazeのソリューションは非常に優れています。

以下は、image.onloadイベントの正確性と導入後のコードです。 image.onloadは、あらゆる種類の歪みを避けるために非常に重要です。

function draw_canvas_image() {

var canvas = document.getElementById("image-holder-canvas");
var context = canvas.getContext("2d");
var imageObj = document.getElementById("myImageToDisplayOnCanvas");

imageObj.onload = function() {
  var imgWidth = imageObj.naturalWidth;
  var screenWidth  = canvas.width;
  var scaleX = 1;
  if (imgWidth > screenWidth)
      scaleX = screenWidth/imgWidth;
  var imgHeight = imageObj.naturalHeight;
  var screenHeight = canvas.height;
  var scaleY = 1;
  if (imgHeight > screenHeight)
      scaleY = screenHeight/imgHeight;
  var scale = scaleY;
  if(scaleX < scaleY)
      scale = scaleX;
  if(scale < 1){
      imgHeight = imgHeight*scale;
      imgWidth = imgWidth*scale;          
  }

  canvas.height = imgHeight;
  canvas.width = imgWidth;

  context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);
}
}
5
Mashhood

また、画面サイズごとに画像を適切にスケーリングしたい場合は、次の計算を実行できます。JQUERYを使用していない場合は、適切な同等のオプションで$（window）.widthを置き換えます。

var imgWidth = imageObj.naturalWidth;
var screenWidth  = $(window).width() - 20; 
var scaleX = 1;
if (imageWdith > screenWdith)
    scaleX = screenWidth/imgWidth;
var imgHeight = imageObj.naturalHeight;
var screenHeight = $(window).height() - canvas.offsetTop-10;
var scaleY = 1;
if (imgHeight > screenHeight)
    scaleY = screenHeight/imgHeight;
var scale = scaleY;
if(scaleX < scaleY)
    scale = scaleX;
if(scale < 1){
    imgHeight = imgHeight*scale;
    imgWidth = imgWidth*scale;          
}
canvas.height = imgHeight;
canvas.width = imgWidth;
ctx.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);
2
TechMaze