1
Ich habe Code, der eine PNG-Datei mit um 90 Grad gedrehtem Text erstellt und in einer HTML-Tabelle anzeigt. Der Test sieht wie erwartet aus, wenn die Datei selbst als Bildbetrachter angezeigt wird. Das habe ich sowohl in Chrome als auch in MS Paint beobachtet.Unbeabsichtigte vertikale Skalierung beim Anzeigen von gedrehten Bildern in HTML-Tabelle
Snippet of rotated text in image viewer, no scaling
Aber es ist nicht proportionale Skalierung, wenn es in einer HTML-Tabelle angezeigt wird. Ich habe das sowohl in Chrome als auch in IE beobachtet. Hier
Snippet of rotated text in HTML table showing disproportional scaling
ist die 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>Hier ist der Code verwendet, um das Bild zu erzeugen:
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);
Was ist der Wert von 'IMAGE_HEIGHT' in Ihrem Code? Ist es dasselbe wie der Wert, den Ihr HTML im 'height' Attribut jedes'![]()
' Elements angibt? Wenn die beiden Höhenwerte unterschiedlich sind, würde es nur Sinn machen, dass das HTML Ihr Bild wie gewünscht skaliert. –
VGR