更改 Image() 对象尺寸(宽度和高度)
Change Image() object dimensions (width and height)
我正在尝试调整图像的尺寸,同时保持其纵横比。这似乎是一项非常简单的任务,但我无法在任何地方找到相关的答案……(与 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;
}
};
这是在绘制到 canvas 之前按比例调整图像的大小,如下所示:context.drawImage(img,0,0,canvas.width,canvas.height);
。但是看起来我无法直接更改 Image()
尺寸,所以如何完毕?谢谢。
编辑: 我没有正确地使用交叉乘法求解图像 proportions。 @markE 提供了一种获得正确比例的简洁方法。下面是我的新(工作)实现:
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);
图像尺寸在构造函数中设置
new Image(width, height)
// for proportionally consistent resizing use new Image(width, "auto")
或
the context.drawImage()
参数如下:
context.drawImage(image source, x-coordinate of upper left portion of image,
y-coordinate of upper left portion of image,image width,image height);
只需用前两个数字坐标定位图像,然后用后两个(宽度,高度)手动调整大小
//ex.
var x = 0;
var y = 0;
var img = new Image (200, "auto");
img.src = "xxx.png";
context.drawImage(img,x,y,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/Whosebug/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>
我正在尝试调整图像的尺寸,同时保持其纵横比。这似乎是一项非常简单的任务,但我无法在任何地方找到相关的答案……(与 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;
}
};
这是在绘制到 canvas 之前按比例调整图像的大小,如下所示:context.drawImage(img,0,0,canvas.width,canvas.height);
。但是看起来我无法直接更改 Image()
尺寸,所以如何完毕?谢谢。
编辑: 我没有正确地使用交叉乘法求解图像 proportions。 @markE 提供了一种获得正确比例的简洁方法。下面是我的新(工作)实现:
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);
图像尺寸在构造函数中设置
new Image(width, height)
// for proportionally consistent resizing use new Image(width, "auto")
或
the context.drawImage()
参数如下:
context.drawImage(image source, x-coordinate of upper left portion of image,
y-coordinate of upper left portion of image,image width,image height);
只需用前两个数字坐标定位图像,然后用后两个(宽度,高度)手动调整大小
//ex.
var x = 0;
var y = 0;
var img = new Image (200, "auto");
img.src = "xxx.png";
context.drawImage(img,x,y,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/Whosebug/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>