Javascript JS画布全面调整大小

我正在尝试在各个方向调整画布的大小

我尝试使用JS，但它与我从Photoshop CC画布大小功能获得的输出不匹配

原始图像（600 x 439）：

使用JS代码（580 x 430）调整大小：

使用Photoshop CC调整大小（图像->画布大小）（580 x 430）：

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var x=0；
var y=0；
var宽度=580；
var高度=430；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，x，y，宽度，高度）；
};
imageObj.src=https://i.imgur.com/rXURSWC.jpg';
您可以通过在图像加载时重新定义画布的宽度和高度来实现这一点


var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var x=0；
var y=0；
var imageObj=新图像（）；
imageObj.onload=函数（）{
canvas.width=this.width；
canvas.height=this.height；
上下文。drawImage（imageObj，x，y）；
};
imageObj.src=http://i.imgur.com/rXURSWC.jpg';
正文{
边际：0px；
填充：0px；
}
#我的画布{
边框：1px纯黑；
}
<代码> <代码> > P>你所要求的只是裁剪你的图像，但是把锚定在中间。

这很容易实现：

将
drawImage
的
x
和
y
参数设置为所需大小与原始大小之差，除以2


var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var requiredWidth=canvas.width=580；
var requiredHeight=canvas.height=430；
var img=新图像（）；
img.onload=函数（）{
//你所需要的就是这里
var offsetX=（所需宽度-img.naturalWidth）/2；
var offsetY=（所需高度-img.自然高度）/2；
drawImage（img、offsetX、offsetY、img.naturalWidth、img.naturalHeight）；
};
img.src=http://i.imgur.com/rXURSWC.jpg';
你的意思是，根据图像大小调整画布的大小？这就是线性插值和立方插值的区别。除非您自己编写图像渲染器，否则您无法对此做太多工作。@siam ya，您可以检查我附加的有问题的输出图像，在新选项卡中打开它们，然后在选项卡之间切换，您会注意到差异。它甚至不会改变画布的大小？我从它和它的600倍下载了图像439@user889030还不清楚。是否要将图像大小调整为
580 x 430
或将画布大小调整为
600 x 439
？实际图像大小为：：600 x 439，我正在将其大小调整为580 x 430。渲染原始图像并将大小更改回600 x 439，尽管已将画布大小设置为580 x 430