fix: washed out blur placeholder

vercel · Jul 12, 2023 · 7f83601 · 7f83601
1 parent ecfd2f4
commit 7f83601
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/packages/next/shared/lib/image-blur-svg.ts b/packages/next/shared/lib/image-blur-svg.ts
@@ -14,14 +14,13 @@ export function getImageBlurSvg({
   blurHeight?: number
   blurDataURL: string
 }): string {
-  const std = blurWidth && blurHeight ? '1' : '20'
   const svgWidth = blurWidth || widthInt
   const svgHeight = blurHeight || heightInt
-  const feComponentTransfer = blurDataURL.startsWith('data:image/jpeg')
-    ? `%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%`
-    : ''
+
   if (svgWidth && svgHeight) {
-    return `%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 ${svgWidth} ${svgHeight}'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E${feComponentTransfer}%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='${blurDataURL}'/%3E%3C/svg%3E`
+    const std = blurWidth && blurHeight ? 1 : 20
+    const smoothenMask = 15
+    return `%3csvg viewBox='0 0 ${svgWidth} ${svgHeight}' xmlns='http://www.w3.org/2000/svg' width='${svgWidth}' height='${svgHeight}'%3e%3cfilter id='b' color-interpolation-filters='sRGB'%3e%3cfeMorphology in='SourceAlpha' operator='dilate' radius='${smoothenMask}' result='dilate'%3e%3c/feMorphology%3e%3cfeGaussianBlur in='dilate' stdDeviation='${smoothenMask}' result='mask'%3e%3c/feGaussianBlur%3e%3cfeGaussianBlur in='SourceGraphic' stdDeviation='${std}' result='blur'%3e%3c/feGaussianBlur%3e%3cfeComponentTransfer in='blur' result='solid'%3e%3cfeFuncA type='table' tableValues='1 1'%3e%3c/feFuncA%3e%3c/feComponentTransfer%3e%3cfeComposite in2='mask' in='solid' operator='in' result='comp'%3e%3c/feComposite%3e%3cfeMerge%3e%3cfeMergeNode in='SourceGraphic'/%3e%3cfeMergeNode in='comp'/%3e%3c/feMerge%3e%3c/filter%3e%3cimage style='filter: url(%23b);' x='0' y='0' width='100%25' height='100%25' preserveAspectRatio='none' href='${blurDataURL}'%3e%3c/image%3e%3c/svg%3e`
   }
   return `%3Csvg xmlns='http%3A//www.w3.org/2000/svg'%3E%3Cimage style='filter:blur(20px)' x='0' y='0' height='100%25' width='100%25' href='${blurDataURL}'/%3E%3C/svg%3E`
 }