在 HTML 表格中显示旋转图像时意外垂直缩放答案

【问题标题】：Unintended vertical scaling when displaying rotated image in HTML table在 HTML 表格中显示旋转图像时意外垂直缩放
【发布时间】：2016-07-18 18:40:02
【问题描述】：

我的代码可以创建一个 -90 度旋转文本的 PNG 文件并将其显示在 HTML 表格中。当文件本身显示为图像查看器时，测试看起来符合预期。我在 Chrome 和 MS Paint 中都观察到了这一点。

Snippet of rotated text in image viewer, no scaling

但在 HTML 表格中显示时存在非比例缩放。我在 Chrome 和 IE 中都观察到了这一点。

Snippet of rotated text in HTML table showing disproportional scaling

这是 HTML：

<html>
<head>
<style> td {border-width: 1; border-style: solid; margin-bottom:-1;margin-right:-1; padding: 0px 3px;
    font-family:CorpOs; font-size:20;} img {margin: 0px;}
</style>
</head>
<body>
<table cellspacing=0>
    <tr>
        <td align=center>-</td>
        <td align=center>-</td>
        <td align=right>2.0</td>
        <td align=right>1.0</td>
        <td align=right>2.0</td>
        <td align=right>1.0</td>
        <td align=center>-</td>
        <td align=center>-</td>
        <td align=right>2.0</td>
        <td align=right>1.0</td>
        <td>EA</td>
        <td>23-13141-207</td>
        <td>PLUG-2CAV,MP150,PAC12047662,BK</td>
        <td align=right>1</td>
    </tr>
    <tr>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td width=105>UOM</td>
        <td width=144>ITEM NUMBER</td>
        <td width=240>PART DESCRIPTION</td>
        <td>REF</td>
    </tr>
    <tr>
        <td align=right>-009</td>
        <td align=right>-008</td>
        <td align=right>-007</td>
        <td align=right>-006</td>
        <td align=right>-005</td>
        <td align=right>-004</td>
        <td align=right>-003</td>
        <td align=right>-002</td>
        <td align=right>-001</td>
        <td align=right>-000</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_009_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_008_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_007_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_006_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_005_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_004_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_003_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_002_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_001_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_000_A.png" height=314 width=49>
        </td>
        <td colspan=4></td>
    </tr>
</table>
</body>
</html>

这是用于生成图像的代码：

    Font smallFont = new Font("Corpos", Font.PLAIN, 16);
    Font contentFont = new Font("Corpos", Font.PLAIN, 36);

    BufferedImage image = new BufferedImage(IMAGE_WIDTH, IMAGE_HEIGHT, BufferedImage.TYPE_INT_ARGB);
    Graphics2D g2 = image.createGraphics();
    g2.setColor(Color.black);
    g2.setRenderingHints(new RenderingHints(ImmutableMap.of(
        RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR,
        RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON
    )));
    g2.drawLine(IMAGE_WIDTH/2, 0, IMAGE_WIDTH/2, IMAGE_HEIGHT);

    AffineTransform labelTransform = new AffineTransform();
    labelTransform.quadrantRotate(-1);
    labelTransform.translate(80, 0);

    AffineTransform partNumberTransform = new AffineTransform();
    partNumberTransform.quadrantRotate(-1);
    partNumberTransform.translate(350, 0);

    AffineTransform descriptionTransform = new AffineTransform();
    descriptionTransform.quadrantRotate(-1);
    descriptionTransform.translate(200, 0);

    g2.setTransform(labelTransform);
    g2.setFont(smallFont);
    g2.drawString("ITEM NUMBER:", -IMAGE_HEIGHT, 12);

    g2.setTransform(partNumberTransform);
    g2.setFont(contentFont);
    g2.drawString(partNumber, -IMAGE_HEIGHT, 38);

    g2.setTransform(labelTransform);
    g2.setFont(smallFont);
    g2.drawString("DESCRIPTION:", -IMAGE_HEIGHT, 64);

    g2.setTransform(descriptionTransform);
    g2.setFont(contentFont);
    g2.drawString(format("%s%s", StringUtils.repeat(" ", (30 - itemDesc.length()) / 2), itemDesc), -IMAGE_HEIGHT, 90);

【问题讨论】：

代码中IMAGE_HEIGHT 的值是多少？它与您的 HTML 在每个 <img> 元素的 height 属性中指定的值相同吗？如果两个高度值不同，那么 HTML 会按要求缩放您的图像才有意义。

标签： java graphics awt html-table affinetransform

【解决方案1】：

没关系。我想到了。我有一个比图像宽度更宽的 img 宽度属性。所以我猜 HTML 会缩放它以适应它。删除了属性，缩放消失了。但是感谢 Stackoverflow！如果我没有根据指南仔细地提出问题，我就不会得到答案。

【讨论】：