c3ceeb03ab
This PR updates the `next/future/image` component so that CSS `filter` is never needed. Previously, we used SVG to blur for prod and CSS to blur for dev, but now we use SVG for both. This required a shared function `getImageBlurSvg()` used between both client and server because `next dev` doesn't create Data URIs and instead defers blur generation until request time. So we also need to defer svg generation to request time (on the server) during next dev. This is the first step to removing `<noscript>` completely (see #39736).
24 lines
986 B
TypeScript
24 lines
986 B
TypeScript
/**
|
|
* A shared function, used on both client and server, to generate a SVG blur placeholder.
|
|
*/
|
|
export function getImageBlurSvg({
|
|
widthInt,
|
|
heightInt,
|
|
blurWidth,
|
|
blurHeight,
|
|
blurDataURL,
|
|
}: {
|
|
widthInt?: number
|
|
heightInt?: number
|
|
blurWidth?: number
|
|
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%`
|
|
: ''
|
|
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 filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='${blurDataURL}'/%3E%3C/svg%3E`
|
|
}
|