使用html2canvas生成图片时禁用输入框与选择框错位问题

算力阿峰

2026-8-7

解决html2canvas生成图片时禁用输入控件的错位问题

问题描述

使用html2canvas 1.3.4生成页面截图时，带有.ukc-input-disabled类的禁用input、select控件出现明显错位，但页面正常显示无异常。

页面正常显示效果：
页面显示效果

问题原因

自定义CSS中给非复选框的禁用控件设置了padding: 0 !important，移除了UIKit原生输入控件的默认内边距，导致html2canvas渲染时无法正确计算inline-block布局下的垂直对齐。
html2canvas旧版本（1.3.4）对表单控件的渲染存在兼容性缺陷，尤其是自定义样式的禁用状态控件。

解决方案

方案1：调整CSS修正布局对齐

修改.ukc-input-disabled:not([type="checkbox"])的样式，保留少量内边距并强制垂直居中，避免布局偏移：

.ukc-input-disabled {
    cursor: default;
    pointer-events: none;
}
.ukc-input-disabled:not([type="checkbox"]) {
    border: 0 none !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 4px 0 !important; /* 保留少量内边距匹配label高度 */
    vertical-align: middle; /* 强制垂直居中对齐 */
}
.ukc-input-disabled.uk-checkbox {
    background-color: #f8f8f8 !important;
}
.ukc-input-disabled.uk-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

方案2：升级html2canvas并优化配置

将html2canvas升级到最新稳定版（如1.4.1），同时添加渲染配置提升兼容性：

<!-- 替换旧版本脚本 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script type="text/javascript">
jQuery(function () {
    html2canvas(document.getElementById('theform'), {
        scale: window.devicePixelRatio, // 适配高清屏幕
        useCORS: true,
        allowTaint: false
    }).then(function (canvas) {
        var img = jQuery('<img>');
        img.attr("src", canvas.toDataURL('image/png'));
        jQuery('body').append(img);
    });
});
</script>

方案3：临时替换控件为静态文本（彻底解决渲染问题）

如果禁用控件不需要交互，截图前将其替换为静态span标签，避免html2canvas渲染表单控件的兼容性问题：

jQuery(function () {
    // 暂存需要替换的控件
    var tempReplace = [];
    
    // 替换禁用的input和select
    $('.ukc-input-disabled:not([type="checkbox"])').each(function() {
        var $origin = $(this);
        // 获取控件显示文本
        var displayText = $origin.is('select') ? $origin.find('option:selected').text() : $origin.val();
        // 创建样式匹配的span
        var $staticSpan = $('<span>')
            .text(displayText)
            .addClass($origin.attr('class'))
            .css({
                display: 'inline-block',
                verticalAlign: 'middle',
                border: 'none',
                background: 'transparent'
            });
        
        $origin.hide().after($staticSpan);
        tempReplace.push({origin: $origin, replace: $staticSpan});
    });

    // 生成截图
    html2canvas(document.getElementById('theform')).then(function (canvas) {
        var img = jQuery('<img>');
        img.attr("src", canvas.toDataURL('image/png'));
        jQuery('body').append(img);
        
        // 恢复原始控件
        tempReplace.forEach(function(item) {
            item.replace.remove();
            item.origin.show();
        });
    });
});

原始代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.19/dist/css/uikit.min.css" />
    <style type="text/css">
        .ukc-input-disabled {
            cursor: default;
            pointer-events: none;
        }
        .ukc-input-disabled:not([type="checkbox"]) {
            border: 0 none !important;
            background-color: transparent !important;
            background-image: none !important;
            padding: 0 !important;
        }
        .ukc-input-disabled.uk-checkbox {
            background-color: #f8f8f8 !important;
        }
        .ukc-input-disabled.uk-checkbox:checked {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.4/html2canvas.min.js"></script>
    <script type="text/javascript">
        jQuery(function () {
            html2canvas(document.getElementById('theform'), {}).then(function (canvas) {
                var img = jQuery('<img>');
                img.attr("src", canvas.toDataURL('image/png'));
                jQuery('body').append(img); //todo
            });

        });
    </script>
</head>
<body>
<form id="theform">
    <div class="uk-display-inline-block uk-text-nowrap uk-margin uk-margin-left@s uk-margin-right">
        <label class="uk-text-bold" for="rga_type_select"><span>Type</span>:</label>
        <select name="rga_type" id="rga_type_select" class="uk-select uk-width-small ukc-border ukc-input-disabled">
            <option value="C">Credit</option>
            <option value="E" selected>Rent payment</option>
        </select>
    </div>
    <div class="uk-display-inline-block uk-text-nowrap uk-margin uk-margin-left uk-margin-right">
        <label for="rga_cpo_textinput" class="uk-text-bold">CPO:</label>
        <input name="rga_cpo" id="rga_cpo_textinput" class="uk-input uk-width-small ukc-border ukc-input-disabled" value="test123">
    </div>
    <div class="uk-display-inline-block uk-text-nowrap uk-margin uk-margin-left uk-margin-right">
        <label class="uk-text-bold" for="rga_reason_select"><span>Reason</span>:</label>
        <select name="rga_reason" id="rga_reason_select" class="uk-select uk-width-auto ukc-border ukc-input-disabled">
            <option value="B">Lorem Ipsum</option>
            <option value="C" selected>Hello there</option>
        </select>
    </div>
    <div class="uk-display-inline-block uk-text-nowrap uk-margin uk-margin-left uk-margin-right">
        <label class="uk-text-bold" for="rga_decline_qty_checkbox">Return declined quantity</label>
        <input type="checkbox" name="rga_decline_qty" id="rga_decline_qty_checkbox" class="uk-checkbox ukc-input-disabled">
    </div>
    <div class="uk-margin-top">
        <button type="submit" class="uk-button uk-button-primary" style="display: none;">Select Items</button>
    </div>
</form>
</body>
</html>

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

使用html2canvas生成图片时禁用输入框与选择框错位问题

问题描述 #

问题原因 #

解决方案 #

方案1：调整CSS修正布局对齐 #

方案2：升级html2canvas并优化配置 #

方案3：临时替换控件为静态文本（彻底解决渲染问题） #

原始代码 #