更改Image（）对象尺寸（宽度和高度） [英] Change Image() object dimensions (width and height)

问题描述

我正在尝试调整图片尺寸，同时保留图片的长宽比。这看起来像一个非常简单的任务，但我找不到一个rellevent答案任何地方。（与JavaScript的 Image（）对象）。我可能错过了很明显的东西。下面是我想实现的：

  var img = new window.Image（）; 
 img.src = imageDataUrl; 
 img.onload = function（）{
 if（img.width> 200）{
 img.width = 200; 
 img.height =（img.height * img.width）/img.width; 
} 
 if（img.height> 200）{
 img.height = 200; 
 img.width =（img.width * img.height）/img.height; 
} 
}; 
  

这是为了按比例调整图像大小，然后绘制到画布上，如下所示： context.drawImage（img，0,0，canvas.width，canvas.height）; 。无论如何，我不能直接改变 Image（）尺寸，那么如何做呢？感谢。

编辑：我没有正确解决图片比例。 @markE提供了一个获得正确比率的整洁方法。下面是我的新工作实现：

  var scale = Math.min（（200 / img.width）， /img.height））; 
 img.width = img.width * scale; 
 img.height = img.height * scale; 
 clearCanvas（）; // clear canvas 
 context.drawImage（img，0,0，img.width，img.height）; 
  

解决方案

按比例缩放图片的方法如下：

  function scalePreserveAspectRatio（imgW，imgH，maxW，maxH）{
 return（Math.min（（maxW / imgW）， maxH / imgH）））; 
} 
  

用法：

  var canvas = document.getElementById（canvas）; var ctx = canvas.getContext（2d）; var img = new Image（）; img.onload = start; img.src = https://dl.dropboxusercontent.com/u/139992952/stackoverflow/balloon.png\";function start（）{canvas.width = 100; canvas.height = 100; var w = img.width; var h = img.height; // resize img以适合画布//您可以选择请求img以适合任何指定的宽度/高度var sizer = scalePreserveAspectRatio（w，h，canvas.width，canvas.height）; ctx.drawImage（img，0,0，w，h，0,0，w * sizer，h * sizer）;} function scalePreserveAspectRatio（imgW，imgH，maxW，maxH）{return（Math.min（（maxW / imgW ），（maxH / imgH）））;}  

 {background-color：ivory; } canvas {border：1px solid red;}  

  h4>原始气球图片已调整大小以适合100x100的画布< / h4>< canvas id =canvaswidth = 100 height = 100>< / canvas>   

I am attempting to resize an image's dimensions, whilst retaining it's aspect ratio. This seems like a very simple task, but I cannot find a rellevent answer anywhere.. (relating to JavaScript's Image() object). I'm probably missing something very obvious. Below is what I am trying to achieve:

var img = new window.Image();
img.src = imageDataUrl;
img.onload = function(){
    if (img.width > 200){
        img.width = 200;
        img.height = (img.height*img.width)/img.width;
    }
    if (img.height > 200){
        img.height = 200;
        img.width = (img.width*img.height)/img.height;
    }
};

This is to proportionally resize an image before being drawn onto a canvas like so: context.drawImage(img,0,0,canvas.width,canvas.height);.However it would appear I cannot directly change Image()dimensions, so how is it done? Thanks.

Edit: I haven't correctly solved the image proportions using cross-multiplication. @markE provides a neat method of obtaining the correct ratio. Below is my new (working) implementation:

var scale = Math.min((200/img.width),(200/img.height));
img.width = img.width*scale;
img.height = img.height*scale;
clearCanvas(); //clear canvas
context.drawImage(img,0,0,img.width,img.height);

解决方案

Here's how to scale your image proportionally:

function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
    return(Math.min((maxW/imgW),(maxH/imgH)));
}

Usage:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/balloon.png";
function start(){

  canvas.width=100;
  canvas.height=100;

  var w=img.width;
  var h=img.height;

  // resize img to fit in the canvas 
  // You can alternately request img to fit into any specified width/height
  var sizer=scalePreserveAspectRatio(w,h,canvas.width,canvas.height);

  ctx.drawImage(img,0,0,w,h,0,0,w*sizer,h*sizer);

}

function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
  return(Math.min((maxW/imgW),(maxH/imgH)));
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<h4>Original Balloon image resized to fit in 100x100 canvas</h4>
<canvas id="canvas" width=100 height=100></canvas>

这篇关于更改Image（）对象尺寸（宽度和高度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！