求助贴-前端

想在dplayer播放器中实现弹幕不遮挡人物的功能点。
1.在vue文件中，div标签引入dplayer：
<div ref=&quot;videoRef&quot; :class=&quot;{ 'player': true, 'dplayer-comment-show': !userStore.userInfoData.token }&quot;
               id=&quot;dplay&quot;/>
2.在ts文件中，初始化dplayer对象：
//初始化播放器
        const dp = new DPlayer({
            container: videoRef.value,
            loop: true, // 循环播放
            lang: &quot;zh-cn&quot;, // 语言
            logo: &quot;&quot;,
            autoplay: false,//todo：开发阶段先关闭自动播放
            danmaku: {
                id: videoID.value.toString(),//弹幕池id，需要唯一
                api: danmakuApi,
                token: userStore.userInfoData.token,//弹幕后端验证 token
                unlimited: true,
            },
            mutex: false, // 互斥，阻止多个播放器同时播放
            video: {
                quality: quality,
                defaultQuality: 0,
                url: &quot;不填&quot;, 
                pic: videoInfo.videoInfo.cover,
            },
        });
        dp.video.crossOrigin='anonymous'  //解决canvas跨域错误
3.加载tf开源人物分割模型：
const model=bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation
        const segmenterConfig:MediaPipeSelfieSegmentationMediaPipeModelConfig={
            runtime: 'mediapipe', // or 'tfjs'
            solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation',
            modelType: 'general'
        }
        const segmenter=await bodySegmentation.createSegmenter(model,segmenterConfig)
4.检测每一帧，绘制出二进制mask文件：
dp.on(&quot;timeupdate&quot;,async ()=>{
            //初始化canvas，设置width和height
            const canvas=document.createElement('canvas')
            canvas.width=dp.video.videoWidth
            canvas.height=dp.video.videoHeight

            
            //1.绘制视频帧到canvas画布
            const ctx=canvas.getContext('2d')
            ctx.drawImage(dp.video,0,0,canvas.width,canvas.height)
            const imageData=ctx.getImageData(0,0,canvas.width,canvas.height)
            //2.人物分割
            const segmentation =await segmenter.segmentPeople(imageData)
            //3.生成二进制掩码
            const foregroundColor = { r: 0, g: 0, b: 0, a: 0 }
            const backgroundColor = { r: 0, g: 0, b: 0, a: 255 }
            const mask=await toBinaryMask(segmentation,foregroundColor,backgroundColor)
            //4.清除画布并绘制掩码
            ctx.clearRect(0,0,canvas.width,canvas.height)
            ctx.drawImage(await segmentation[0].mask.toCanvasImageSource(),0,0,canvas.width,canvas.height)
            //5.设置混合模式
            ctx.globalCompositeOperation=&quot;source-out&quot;;
            //6.反向填充黑色
            ctx.fillRect(0,0,canvas.width,canvas.height)
            //7.保存mask图片
            const dataUrl=canvas.toDataURL('image/png',0)
            //8.可以选择下载这些png图片
            const link=document.createElement('a')
            link.href=dataUrl
            link.download='mask_image.png'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
}）
不知道如何选中dplayer.danmaku的弹幕对象，然后对弹幕进行蒙版处理，求指点！
附一张处理得到的mask图片：