Erweiterungen

This commit is contained in:
2026-02-13 13:27:22 +01:00
parent f5179344d9
commit 0d8b455031
3 changed files with 63 additions and 9 deletions

Binary file not shown.

View File

@@ -167,10 +167,29 @@ window.initProfileInvoiceGenerator = function() {
ctx.stroke();
} else if (el.type === 'image') {
if (el.imageData) {
// Draw the uploaded image
// Draw the uploaded image with aspect ratio preserved
var img = new Image();
img.onload = function() {
ctx.drawImage(img, x, y, w, h);
// Calculate dimensions to maintain aspect ratio (object-fit: contain)
var imgAspect = img.width / img.height;
var boxAspect = w / h;
var drawW, drawH, drawX, drawY;
if (imgAspect > boxAspect) {
// Image is wider than box - fit to width
drawW = w;
drawH = w / imgAspect;
drawX = x;
drawY = y + (h - drawH) / 2; // Center vertically
} else {
// Image is taller than box - fit to height
drawW = h * imgAspect;
drawH = h;
drawX = x + (w - drawW) / 2; // Center horizontally
drawY = y;
}
ctx.drawImage(img, drawX, drawY, drawW, drawH);
// Redraw selection if this element is selected
if (selectedElement && selectedElement.id === el.id) {
drawSelection(el);
@@ -716,11 +735,38 @@ window.initProfileInvoiceGenerator = function() {
window.updateProfileElementImage = function(id, imageData) {
var el = elements.find(function(e) { return e.id === id; });
if (el) {
if (!el) return;
// Load image to get dimensions
var img = new Image();
img.onload = function() {
var MAX_WIDTH = 1090;
var width = img.width;
var height = img.height;
// Only resize if image is larger than MAX_WIDTH
if (width > MAX_WIDTH) {
height = Math.round(height * (MAX_WIDTH / width));
width = MAX_WIDTH;
// Create canvas to resize image
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
// Get resized image data (maintain original format if possible)
var resizedDataUrl = canvas.toDataURL('image/jpeg', 0.9);
el.imageData = resizedDataUrl;
} else {
el.imageData = imageData;
}
el.text = 'Bild';
draw();
}
};
img.src = imageData;
};
window.deleteProfileElement = function(id) {

View File

@@ -264,7 +264,8 @@ public class CustomerInvoiceService {
htmlBuilder.append(".element { position: absolute; box-sizing: border-box; overflow: hidden; }");
htmlBuilder.append(".text { white-space: nowrap; overflow: visible; }");
htmlBuilder.append(".line { border-top: 1px solid #333; }");
htmlBuilder.append(".image { max-width: 100%; max-height: 100%; }");
htmlBuilder.append(".image { overflow: hidden; }");
htmlBuilder.append(".image img { width: 100%; height: 100%; object-fit: contain; display: block; }");
htmlBuilder.append("</style>");
htmlBuilder.append("</head><body>");
@@ -313,11 +314,18 @@ public class CustomerInvoiceService {
if ("line".equals(type)) {
htmlBuilder.append("<hr style='margin:0;border:none;border-top:1px solid #333;height:0;width:100%;'/>");
} else if ("image".equals(type)) {
if (element.has("imageData")) {
if (element.has("imageData") && !element.get("imageData").asText().isEmpty()) {
String imageData = element.get("imageData").asText();
htmlBuilder.append("<img src='").append(imageData).append("' style='max-width:100%;max-height:100%;' />");
// Ensure proper data URL format
if (!imageData.startsWith("data:")) {
imageData = "data:image/png;base64," + imageData;
}
// Use object-fit:contain to preserve aspect ratio
htmlBuilder.append("<div style='width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;'>");
htmlBuilder.append("<img src=\"").append(imageData.replace("\"", "%22")).append("\" style='max-width:100%;max-height:100%;object-fit:contain;' alt='Bild' />");
htmlBuilder.append("</div>");
} else {
htmlBuilder.append("[Bild]");
htmlBuilder.append("<div style='width:100%;height:100%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:10pt;color:#666;'>[Bild]</div>");
}
} else {
// Wrap text in a span to prevent flexbox issues