1
-90度の回転したテキストのPNGファイルを作成し、HTMLテーブルに表示するコードがあります。ファイルがそれ自体でイメージビューアで表示されるとき、テストは期待どおりになります。私はこれをChromeとMS Paintの両方で観察しました。HTMLテーブルに回転イメージを表示するときの意図しない垂直方向のスケーリング
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が '![]()
'要素の 'height'属性で指定する値と同じですか？ 2つの高さの値が異なる場合、要求されたとおりにHTMLが画像の拡大縮小を行うことは意味をなさないでしょう。 –
VGR