khondokar/opal-ios-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply multiply blend mode to remove white product background in canvas

Browse Source
This commit is contained in:
Amirul Islam Redwan71
2026-09-01 09:19:40 +06:00
parent e6429dc37c
commit 31ab617740
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+11 -7
View File
@@ -496,19 +496,20 @@ async function render3DCommercialPoster(canvas, productImg, title, price) {
strokeOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
// 4. Hero Product Scaling & Placement
const targetH = 550;
const targetW = 540;
const srcW = productImg.width;
const srcH = productImg.height;
const targetH = 500;
const targetW = 520;
const srcW = productImg.width || 500;
const srcH = productImg.height || 500;
const scale = Math.min(targetW / srcW, targetH / srcH);
const destW = srcW * scale;
const destH = srcH * scale;
const destLeft = (w - destW) / 2;
const destTop = topTierY - destH + 18;
// 4.1 Glossy Mirror Product Reflection
// 4.1 Glossy Mirror Product Reflection (Multiply blended)
ctx.save();
ctx.globalAlpha = 0.20;
ctx.globalCompositeOperation = 'multiply';
ctx.globalAlpha = 0.25;
ctx.translate(0, (topTierY + 6) * 2);
ctx.scale(1, -1);
ctx.drawImage(productImg, destLeft, topTierY + 6, destW, destH * 0.35);
@@ -521,8 +522,11 @@ async function render3DCommercialPoster(canvas, productImg, title, price) {
ctx.fillStyle = contactShadow;
drawOval(ctx, stageCx, topTierY + 2, destW * 0.38, 12);
// Draw Hero Product
// Draw Hero Product with Multiply Blend Mode (removes white background completely)
ctx.save();
ctx.globalCompositeOperation = 'multiply';
ctx.drawImage(productImg, destLeft, destTop, destW, destH);
ctx.restore();
// 5. Value Trust Badges
drawPillBadge(ctx, 40, 240, '🇰🇷 100% Original Korea', true);