@visactor/vrender-animate/es/custom/disappear/gaussian-blur.js

This module provides a graph-based animation system for VRender.

import { vglobal } from "@visactor/vrender-core";

import { AStageAnimate } from "../custom-animate";

export class GaussianBlur extends AStageAnimate {
    constructor(from, to, duration, easing, params) {
        var _a, _b;
        super(from, to, duration, easing, params), this.blurConfig = {
            blurRadius: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.blurRadius) || 8,
            useOptimizedBlur: void 0 === (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.useOptimizedBlur) || params.options.useOptimizedBlur
        };
    }
    applyCSSBlur(canvas, radius) {
        const c = vglobal.createCanvas({
            width: canvas.width,
            height: canvas.height,
            dpr: vglobal.devicePixelRatio
        }), ctx = c.getContext("2d");
        return ctx ? (ctx.filter = `blur(${radius}px)`, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", 
        c) : canvas;
    }
    applyDownsampleBlur(imageData, radius) {
        const {width: width, height: height} = imageData, downsample = Math.max(1, Math.floor(radius / 2)), smallWidth = Math.floor(width / downsample), smallHeight = Math.floor(height / downsample), tempCanvas = vglobal.createCanvas({
            width: smallWidth,
            height: smallHeight,
            dpr: 1
        }), tempCtx = tempCanvas.getContext("2d");
        if (!tempCtx) return imageData;
        const originalCanvas = vglobal.createCanvas({
            width: width,
            height: height,
            dpr: 1
        }), originalCtx = originalCanvas.getContext("2d");
        return originalCtx ? (originalCtx.putImageData(imageData, 0, 0), tempCtx.drawImage(originalCanvas, 0, 0, smallWidth, smallHeight), 
        tempCtx.filter = `blur(${radius / downsample}px)`, tempCtx.drawImage(tempCanvas, 0, 0), 
        tempCtx.filter = "none", originalCtx.clearRect(0, 0, width, height), originalCtx.drawImage(tempCanvas, 0, 0, width, height), 
        originalCtx.getImageData(0, 0, width, height)) : imageData;
    }
    afterStageRender(stage, canvas) {
        if (this.blurConfig.blurRadius <= 0) return canvas;
        let result;
        if (this.blurConfig.useOptimizedBlur) result = this.applyCSSBlur(canvas, this.blurConfig.blurRadius); else {
            const c = vglobal.createCanvas({
                width: canvas.width,
                height: canvas.height,
                dpr: vglobal.devicePixelRatio
            }), ctx = c.getContext("2d");
            if (!ctx) return !1;
            ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(canvas, 0, 0);
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height), blurredImageData = this.applyDownsampleBlur(imageData, this.blurConfig.blurRadius);
            ctx.putImageData(blurredImageData, 0, 0), result = c;
        }
        const ctx = result.getContext("2d");
        return ctx && (ctx.globalCompositeOperation = "overlay", ctx.fillStyle = "rgba(255, 255, 255, 0.1)", 
        ctx.fillRect(0, 0, result.width, result.height), ctx.globalCompositeOperation = "source-over"), 
        result;
    }
}
//# sourceMappingURL=gaussian-blur.js.map