Javascript 如何绘制图像或剪辑图像以适合我的控制大小

我有两个JavaScript页面。第一个具有图像控件，第二个具有将回调作为图像返回的函数

第1页：

 //Calls the function from page 2 and the callback image is set as the source of the control.

previewImage(current, function(img) {
    jQuery(".mapItem").attr("src",img.src);
});

第2页：

//The functions callback returns an image which we use in page 1 (above)

var canvas = document.createElement('canvas');
context = canvas.getContext('2d');

context.drawImage(this.m_Images[i],0,0,canvas.width,canvas.height);
var t = new Image();
t.src = canvas.toDataURL();
callback(t);

问题是：

第1页（.mapItem）中的我的控件的高度和宽度为75.2px（固定） 然而，来自回调的图像每次都会有不同的大小，例如一天可以是200px*300px，一天可以是150px*200px等等

如何剪辑回调的图像？我希望将图像（t）设置为零（0）作为x和y起点，然后在.mapItem控件的高度和宽度所在的位置剪裁图像

我需要这个比例。因此，我不能只添加以下代码：

context.drawImage（this.m_Images[i]，0,0,72.5,72.5）
我该怎么办

提前感谢：）
我试图模拟您的环境，所以这里您有一个可能的解决方案

loadImage
就像您在第2页中的图像加载器一样

加载回调调用
previewImage（）
方法
此方法接收
img
提取
width
并
height
使用
aspectRatioFit（）
方法计算纵横比
最后，将图像绘制到第1页中的
mapItem
元素中
注意：

这只是一个基于您描述的模拟，请尝试将其改编为您的真实项目。如果您有问题或需要更新我的解决方案。请让我知道

更新：

如果要裁剪图像，只需在CSS样式中添加
最小宽度
和
高度
：

#mapItem {
    display: block;
    overflow: hidden;
    height: 75px;
    width: 75px;
}

#mapItem canvas {
    display: block;     // Otherwise it keeps some space around baseline
    min-width: 100%;    // Scale up to fill container width
    min-height: 100%;   // Scale up to fill container height
    -ms-interpolation-mode: bicubic; // Scaled images look a bit better in IE now
}

这将裁剪您从第1页收到的图像


函数loadImage（）{
var preview=document.getElementById（'source_image'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
reader.addEventListener（'load'，函数（e）{
preview.src=e.target.result；
preview.onload=函数（）{
预览图像（本）；
};
}，假）；
如果（文件）{
reader.readAsDataURL（文件）；
}
};
功能预览图像（img）{
主控台对数（img.宽度+''+img.高度）；
变量maxSize={
宽度：75，
身高：75
};
var croppedImage=document.getElementById（'mapItem'）；
var canvas=document.createElement（'canvas'）；
var-ctx；
//var newSize=aspectRatioFit（img.width、img.height、maxSize.width、maxSize.height）；
canvas.width=img.width；
canvas.height=img.height；
croppedImage.appendChild（画布）；
ctx=canvas.getContext（'2d'）；
ctx.drawImage（img，0，0，canvas.width，canvas.height）；
}
函数aspectRatioFit（srcWidth、srcHeight、maxWidth、maxHeight）{
变量比率=数学最小值（maxWidth/srcWidth，maxHeight/srcHeight）；
返回{
宽度：srcWidth*比值，
高度：SRC高度*比率
};
}
。清除{
垫底：20%；
}
#mapItem{
显示：块；
溢出：隐藏；
高度：75px；
宽度：75px；
}
#mapItem画布{
display:block；/*否则它会在基线周围保留一些空间*/
最小宽度：100%；/*放大至填充容器宽度*/
最小高度：100%；/*按比例放大以填充容器高度*/
-ms插值模式：双三次；/*缩放图像在IE中看起来更好*/
}


第2页中的图像
第1页中的图像
谢谢，这很有效。但是，我的context.fillRect（0，0，canvas.width，canvas.height）；添加此功能后不再工作。@sarah333如果您能向我展示您的代码，我将提供解决方案。如果这是您原始问题的答案，请标记为已回答以结束问题。如果你有积分问题，我也会帮助你。在我标记它之前，不管高度是大于宽度还是宽度大于高度，这个计算都有效吗？肖像画和风景画@TeocciYes，
aspectRatioFit（）
方法负责根据原始图像和目标计算图像的尺寸。因此，请您解释一下aspectRatioFit的具体功能。让我知道我们在同一页上。多谢各位@Teocci添加一个新的解决方案请查看