如何实现点击图片后触发tsparticles纸屑飘落效果？

问题代码的核心错误 #

• 初始化时未指定粒子渲染容器，tsparticles没有目标载体来渲染效果
• 点击事件中调用预设的方式错误，confettiFalling并非直接通过容器ID调用的函数

修正后的完整代码 #

JavaScript部分 #

const polaroidTop = document.getElementById('polaroid-top');

(async () => {
    // 初始化tsParticles，绑定指定容器并加载预设
    const particlesEngine = await tsParticles.load({
        id: "tsparticles",
        options: {
            preset: "confettiFalling"
        }
    });

    // 绑定点击事件，触发纸屑效果
    polaroidTop.addEventListener("click", () => {
        // 重置效果并播放，确保每次点击都生成新的纸屑
        particlesEngine.refresh();
        particlesEngine.play();
    });
})();

必要的HTML结构 #

需要在页面中添加粒子容器（用于承载纸屑效果）：

<!-- 全屏覆盖的粒子容器，避免遮挡图片点击 -->
<div id="tsparticles" style="position: fixed; inset: 0; pointer-events: none;"></div>
<img id="polaroid-top" src="你的图片地址" alt="目标图片">

关键说明 #

• 粒子容器必须设置id="tsparticles"，与JS中的初始化配置对应
• 容器样式设置pointer-events: none，防止粒子层遮挡图片的点击事件
• 点击时调用refresh()重置粒子状态，再用play()触发播放，保证每次点击都能正常启动纸屑效果

内容的提问来源于stack exchange，提问作者user32468419