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); strokeOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
// 4. Hero Product Scaling & Placement // 4. Hero Product Scaling & Placement
const targetH = 550; const targetH = 500;
const targetW = 540; const targetW = 520;
const srcW = productImg.width; const srcW = productImg.width || 500;
const srcH = productImg.height; const srcH = productImg.height || 500;
const scale = Math.min(targetW / srcW, targetH / srcH); const scale = Math.min(targetW / srcW, targetH / srcH);
const destW = srcW * scale; const destW = srcW * scale;
const destH = srcH * scale; const destH = srcH * scale;
const destLeft = (w - destW) / 2; const destLeft = (w - destW) / 2;
const destTop = topTierY - destH + 18; const destTop = topTierY - destH + 18;
// 4.1 Glossy Mirror Product Reflection // 4.1 Glossy Mirror Product Reflection (Multiply blended)
ctx.save(); ctx.save();
ctx.globalAlpha = 0.20; ctx.globalCompositeOperation = 'multiply';
ctx.globalAlpha = 0.25;
ctx.translate(0, (topTierY + 6) * 2); ctx.translate(0, (topTierY + 6) * 2);
ctx.scale(1, -1); ctx.scale(1, -1);
ctx.drawImage(productImg, destLeft, topTierY + 6, destW, destH * 0.35); ctx.drawImage(productImg, destLeft, topTierY + 6, destW, destH * 0.35);
@@ -521,8 +522,11 @@ async function render3DCommercialPoster(canvas, productImg, title, price) {
ctx.fillStyle = contactShadow; ctx.fillStyle = contactShadow;
drawOval(ctx, stageCx, topTierY + 2, destW * 0.38, 12); 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.drawImage(productImg, destLeft, destTop, destW, destH);
ctx.restore();
// 5. Value Trust Badges // 5. Value Trust Badges
drawPillBadge(ctx, 40, 240, '🇰🇷 100% Original Korea', true); drawPillBadge(ctx, 40, 240, '🇰🇷 100% Original Korea', true);
index.html
+1 -1
View File
@@ -306,7 +306,7 @@
<!-- Hidden container for generating QR code SVG/Canvas --> <!-- Hidden container for generating QR code SVG/Canvas -->
<div id="qrcodeHidden" style="display:none;"></div> <div id="qrcodeHidden" style="display:none;"></div>
<script src="app.js?v=3"></script> <script src="app.js?v=4"></script>
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {