diff --git a/js/script.js b/js/script.js index a4198b0..b67cc00 100644 --- a/js/script.js +++ b/js/script.js @@ -2479,15 +2479,25 @@ ctx.globalAlpha = overlayEl.style.opacity || 1; + // 获取旋转角度 + const overlayTransform = overlayEl.style.transform || ''; + const rotateMatch = overlayTransform.match(/rotate\(([-\d.]+)deg\)/); + const rotateDeg = rotateMatch ? parseFloat(rotateMatch[1]) : 0; + + // 获取镜像状态 + const imgTransform = imgEl.style.transform || ''; + const isMirroredH = imgTransform.includes('scaleX(-1)'); + const isMirroredV = imgTransform.includes('scaleY(-1)'); + // 直接使用已加载的图片元素,避免重新加载导致质量下降 if (imgEl.complete && imgEl.naturalWidth > 0) { - ctx.drawImage(imgEl, left, top, width, height); + drawImageWithTransform(ctx, imgEl, left, top, width, height, rotateDeg, isMirroredH, isMirroredV); ctx.globalAlpha = 1; checkComplete(); } else { // 如果图片未加载完成,等待加载 imgEl.onload = () => { - ctx.drawImage(imgEl, left, top, width, height); + drawImageWithTransform(ctx, imgEl, left, top, width, height, rotateDeg, isMirroredH, isMirroredV); ctx.globalAlpha = 1; checkComplete(); }; @@ -2500,6 +2510,31 @@ }); } + // 绘制带旋转和镜像变换的图片 + function drawImageWithTransform(ctx, img, x, y, width, height, rotateDeg, isMirroredH, isMirroredV) { + ctx.save(); + + // 移动到图片中心点 + const centerX = x + width / 2; + const centerY = y + height / 2; + ctx.translate(centerX, centerY); + + // 应用旋转 + if (rotateDeg !== 0) { + ctx.rotate(rotateDeg * Math.PI / 180); + } + + // 应用镜像 + let scaleX = isMirroredH ? -1 : 1; + let scaleY = isMirroredV ? -1 : 1; + ctx.scale(scaleX, scaleY); + + // 绘制图片(从中心点偏移一半宽高) + ctx.drawImage(img, -width / 2, -height / 2, width, height); + + ctx.restore(); + } + // 在画布上绘制文字 function drawTextOnCanvas(ctx, inputElement) { const deleteBtn = inputElement.querySelector('.text-delete-btn');