Javascript Image对象在Canvas中无法缩放问题求助

让我来帮你一步步拆解问题并解决它：

核心问题分析 #

1. 为什么修改img.width/img.height后Canvas绘制没变化？ #

你修改的是Image元素自身的尺寸，但ctx.drawImage(img, 0, 0)默认会按照图片的原始像素尺寸绘制，不管你给img元素设置了多大的width/height。而且更关键的是：你创建的img元素并没有被添加到DOM中，它的clientWidth和clientHeight在加载完成时是0，导致你计算的wth值是NaN（0除以0），这就等于没做任何有效的缩放计算。

2. 为什么用ctx.drawImage(img, 0, 0, 300, 300 * wth)时图片加载不出来？ #

还是因为wth是NaN，300 * wth的结果也是NaN，Canvas的drawImage遇到无效的尺寸参数时会直接跳过绘制，所以图片就“消失”了。

修复方案 #

我们需要用图片的原始尺寸来计算缩放比例，并且直接通过drawImage的参数指定绘制到Canvas上的目标尺寸，同时确保Canvas的实际绘制区域和视觉显示区域一致。

修改后的完整代码 #

JavaScript代码

function preview_image(event) {
    var output = document.getElementById('output_image');
    var reader = new FileReader();
    var ctx = output.getContext('2d');
    
    reader.onload = function() {
        var img = new Image();
        img.src = reader.result;
        
        img.onload = function() {
            // 用图片的原始尺寸计算缩放比例（naturalWidth/naturalHeight是图片本身的像素尺寸）
            const targetWidth = 300;
            const scaleRatio = targetWidth / img.naturalWidth;
            const targetHeight = img.naturalHeight * scaleRatio;
            
            // 设置Canvas的实际绘制尺寸（width/height属性），避免拉伸变形
            output.width = targetWidth;
            output.height = targetHeight;
            
            // 直接指定绘制的目标尺寸，完成缩放
            ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
        }
    }
    reader.readAsDataURL(event.target.files[0]);
}

CSS代码（调整Canvas样式，确保显示与绘制一致）

body {
    width:100%;
    margin:0 auto;
    padding:0px;
    font-family:helvetica;
    background-color:#0B3861;
}
#wrapper {
    text-align:center;
    margin:0 auto;
    padding:0px;
    width:995px;
    margin: auto;
}
#output_image {
    margin: auto;
    /* 让Canvas的显示尺寸和绘制尺寸一致 */
    width: 300px;
    /* 高度自适应，避免强制固定高度导致变形 */
    height: auto;
}
.editarea{
    width: 50%;
    background: #EC6C67;
    margin: auto;
}

HTML代码（简化Canvas初始属性）

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReturNull Photo Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<input type="file" accept="image/*" onchange="preview_image(event)"><br><br>
<div class="editarea">
<canvas id="output_image"></canvas>
</div>
</div>
</body>
</html>

关键修改点说明 #

• 用naturalWidth/naturalHeight代替clientWidth/clientHeight：这两个属性是图片的原始像素尺寸，不管图片有没有被插入到DOM中，都能正确获取到，避免了0/0的NaN问题。
• 动态设置Canvas的width/height属性：Canvas的width和height属性决定了它的实际绘制分辨率，而CSS样式只是控制它在页面上的显示大小。如果两者不一致，绘制的内容会被拉伸变形，所以我们需要让它们匹配。
• 直接在drawImage中指定目标尺寸：这是Canvas缩放图片的正确方式，通过drawImage(img, x, y, targetW, targetH)直接告诉Canvas要把图片绘制到多大的区域里，不需要修改Image元素本身的尺寸。

内容的提问来源于stack exchange，提问作者kahveciderin