Erweiterungen
This commit is contained in:
Binary file not shown.
@@ -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) {
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user