使用html2canvas保存含阿拉伯文本的div时居中对齐字符拆分问题

问题原因 #

你使用的是html2canvas 0.4.1旧版本，它对从右到左（RTL）的阿拉伯文本居中对齐支持存在缺陷。阿拉伯文属于需要上下文连写的脚本，旧版本处理居中对齐时，未正确识别字符连写规则，导致生成的图像中字符被拆分开；而页面渲染时浏览器排版引擎能正常处理，所以页面显示无异常。

解决方案 #

1. 升级html2canvas到最新稳定版

新版本对RTL文本和复杂脚本的排版支持有大幅改进，可直接解决这类字符拆分问题。替换原引入的脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

升级后无需修改其他代码，重新测试即可。

2. 临时修复方案（无法升级版本时）

如果不能升级版本，可通过克隆元素并调整样式绕过bug：

• 克隆目标输入框，将克隆元素的text-align设为right，同时通过margin手动调整到居中位置
• 对克隆元素生成canvas，完成后移除克隆元素

修改后的脚本示例：

$(function() {
    $("#myButton").click(function() {
        // 克隆目标元素
        const $clone = $("#charA").clone();
        // 调整克隆元素样式：右对齐+手动居中
        $clone.css({
            "text-align": "right",
            "margin-left": "auto",
            "margin-right": "auto",
            "position": "absolute",
            "left": "0",
            "right": "0"
        }).appendTo("#canvasSaveder");
        
        html2canvas($("#canvasSaveder"), {
            onrendered: function(canvas) {
                // 移除克隆元素
                $clone.remove();
                var imgsrc = canvas.toDataURL("image/png");
                $("#newimg").attr('src', imgsrc);
                $("#img").show();
                var dataURL = canvas.toDataURL();
                $.ajax({
                    type: "POST",
                    url: "save_printed_id.php",
                    data: {
                        imgBase64: dataURL
                    }
                }).done(function(o) {
                    console.log('saved');
                });
            }
        });
    });
});

3. 样式调整优化

确保目标元素设置direction: rtl，帮助html2canvas正确识别文本方向：

<input id="charA" type="text" name="aname" style="text-align: center; direction: rtl;"
value="انا احبک"
class="arx resizeME nameA">

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