Question

我的代码创建了一个-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);

Answer 1

没关系。我想到了。我有一个比图像宽度宽的img width属性。所以我想HTML会缩放它以适应。删除了属性，缩放消失了。但感谢Stackoverflow！如果我没有按照指导原则仔细地解决问题，我就不会得到答案。

在HTML表格中显示旋转图像时出现意外的垂直缩放

1 个答案: