Javascript 动态调整画布以适应图像

我的代码将在画布中打开一个本地图像。这是一个响应页面，因此画布会根据窗口大小动态调整大小。我需要能够获得正在加载的图像的尺寸，获得画布的当前大小，并按比例调整图像大小以适应画布。我试图用HTML5、CSS3、JQuery和Javascript来编写这些，但不知道怎么做。这是我到目前为止的代码

CSS

#main{ display:block; width:99%; border: 5px solid #0C0; }`

JAVASCRIPT

<script> //Loads the local file
 $(function() {
$('#file-input').change(function(e) {
    var file = e.target.files[0],
        imageType = /image.*/;

    if (!file.type.match(imageType))
        return;

    var reader = new FileReader();
    reader.onload = fileOnload;
    reader.readAsDataURL(file);});

function fileOnload(e) {
    var $img = $('<img>', { src: e.target.result });
    var canvas = $('#canvas')[0];
    var context = canvas.getContext('2d');

    $img.load(function() {
        context.drawImage(this, 0, 0);
    });
}
});
</script>

<script type="text/javascript"> //Resizes the canvas
$(document).ready( function(){

    //Get the canvas & context
    var c = $('#canvas');
    var ct = c.get(0).getContext('2d');
    var container = $(c).parent();

    //Run function when browser  resize
    $(window).resize( canvas );

    function canvas(){
        c.attr('width', $(container).width() ); //max width
        c.attr('height', $(container).height() ); //max height

        //Redraw & reposition content
        var x = c.width();
        var y = c.height();             

        ct.fillStyle = "#FFFFFF"; //white
        ct.fillRect( 0, 0, x, y); //fill the canvas
    }

    //Initial call
    canvas();
});

//加载本地文件
$（函数（）{
$（“#文件输入”）.change（函数（e）{
var file=e.target.files[0]，
imageType=/image.*/；
如果（！file.type.match（imageType））
回来
var reader=new FileReader（）；
reader.onload=文件onload；
reader.readAsDataURL（文件）；}）；
函数fileOnload（e）{
变量$img=$（'
//调整画布的大小
$（文档）.ready（函数（）{
//获取画布和上下文（&C）
变量c=$（'画布'）；
var ct=c.get（0.getContext（'2d'）；
var container=$（c.parent（）；
//当浏览器调整大小时运行函数
$（窗口）。调整大小（画布）；
函数画布（）{
c、 attr（'width'，$（container.width（））；//最大宽度
c、 attr（'height'，$（container.height（））；//最大高度
//重新绘制和重新定位内容
var x=c.宽度（）；
变量y=c.高度（）；
ct.fillStyle=“#FFFFFF”//白色
ct.fillRect（0，0，x，y）；//填充画布
}
//初始呼叫
画布（）；
});

HTML

<input id="file-input" type="file" /> //Loads the image

<div id="main" role="main"> //The canvas
                <canvas id="canvas"></canvas>
            </div>

//加载图像
//画布

对你有用吗？如果可以的话，我会给出一个答案，只需调整窗口的宽度就可以了。柔，这是可行的，但我并不想让访问者调整窗口大小以使其图像适合窗口。有没有办法在不先调整大小的情况下使图像适合窗口？是的，对不起，我没有注意到这是因为我使用的是较小的图像，.Rou，我尝试了你在MAC和Windows以及3种不同浏览器上发布的第二个脚本。在你调整浏览器大小之前，它们都不会完全显示较大的图像。难道没有办法让它显示整个图像而不必先调整浏览器的大小吗？很抱歉，你不得不尝试所有这些，我只是t输入了错误的函数，错误地认为我已经修复了它，。很抱歉给您带来了问题：）