使用Fabric.js实现图片上传缩放及下载，上传后画布不显示图片求助

问题排查与解决方向 #

• 缩放逻辑冲突：连续调用scaleToWidth()和scaleToHeight()会强制拉伸图片，甚至可能导致最终缩放比例异常（比如第二次缩放会覆盖第一次的结果），应该改用保持比例的缩放方式。
• Canvas显示尺寸未同步：Fabric初始化时设置的内部尺寸（width/height）需要和canvas元素的CSS显示尺寸匹配，否则图片可能处于可视区域外。
• 回调执行验证：可以在fabric.Image.fromURL的回调内添加日志，确认图片是否成功加载（比如console.log(img)），排查是否是图片加载环节的隐性问题。

修正后的完整代码（含下载功能） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fabric.js 图片缩放与下载</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/650/index.min.js"></script>
<style>
    #canvas-container {
        border: 1px solid #ccc;
        display: inline-block;
        margin: 10px 0;
    }
    /* 确保canvas显示尺寸与Fabric内部尺寸一致 */
    #fabric-canvas {
        width: 1050px;
        height: 1050px;
    }
    button {
        margin: 0 10px 0 0;
        padding: 6px 12px;
        cursor: pointer;
    }
</style>
</head>
<body>
<input type="file" id="file-input" accept="image/*" />
<button id="download-btn" disabled>下载缩放后的图片</button>
<div id="canvas-container">
    <canvas id="fabric-canvas"></canvas>
</div>

<script>
    // 初始化Fabric画布
    const canvas = new fabric.Canvas('fabric-canvas', {
        width: 1050,  // 105mm @ 100LPCM = 10px/mm
        height: 1050,
    });
    const downloadBtn = document.getElementById('download-btn');

    // 图片上传处理
    document.getElementById('file-input').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (!file || !file.type.startsWith('image/')) return;

        const reader = new FileReader();
        reader.onload = function(e) {
            fabric.Image.fromURL(e.target.result, function(img) {
                // 保持图片比例，缩放到画布范围内
                img.scaleToFit(1050, 1050);
                // 清空画布并添加图片
                canvas.clear();
                canvas.add(img);
                canvas.centerObject(img);
                canvas.renderAll();
                // 启用下载按钮
                downloadBtn.disabled = false;
            }, {
                crossOrigin: 'anonymous' // 处理跨域图片（如果需要）
            });
        };
        reader.readAsDataURL(file);
    });

    // 下载功能
    downloadBtn.addEventListener('click', function() {
        // 导出为PNG图片（可改为jpeg，需调整quality参数）
        const dataURL = canvas.toDataURL({
            format: 'png',
            quality: 0.9
        });
        const link = document.createElement('a');
        link.href = dataURL;
        link.download = 'resized-image.png';
        link.click();
    });
</script>
</body>
</html>

关键修改说明 #

• 修复缩放逻辑：用scaleToFit()替代连续的宽高缩放，确保图片按原比例适配画布，避免拉伸变形。
• 同步Canvas尺寸：给canvas元素添加CSS样式，保证显示尺寸与Fabric内部尺寸一致，避免图片偏移或不可见。
• 新增下载功能：添加下载按钮，点击时通过canvas.toDataURL()导出图片，创建临时链接触发浏览器下载。
• 优化用户体验：限制上传文件为图片类型，根据画布状态启用/禁用下载按钮，加入跨域处理参数提升兼容性。

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