视频截图、截图下载、图片base64转blob、blob转file文件流

工作中做视频相关的内容，实时视频播放、历史视频播放，视频为推拉流方式，遇到的一些处理方式，记录了一下，或许不完善，不定期更新完善
直接先上代码了，后期整理

let screenMagnify = function () {
                // debugger
                let player = playerInstance
                let root = player.root
                let screenShotOptions = {}

                let encoderOptions = 0.92 // 质量

                let type = screenShotOptions.type === undefined ? 'image/png' : screenShotOptions.type
                let format = screenShotOptions.format === undefined ? '.png' : screenShotOptions.format

                let canvas = document.createElement('canvas')
                let canvasCtx = canvas.getContext('2d')
                let img = new Image()
                canvas.width = player.video.videoWidth || 600
                canvas.height = player.video.videoHeight || 337.5

                let saveScreenShot = function (data, filename) {
                    let saveLink = document.createElement('a')
                    saveLink.href = data
                    saveLink.download = filename
                    let event = document.createEvent('MouseEvents')
                    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
                    saveLink.dispatchEvent(event)
                }

                function onScreenShotBtnClick (save = true) {
                    canvas.width = player.video.videoWidth || 600
                    canvas.height = player.video.videoHeight || 337.5
                    img.onload = (function () {
                        canvasCtx.drawImage(player.video, 0, 0, canvas.width, canvas.height)
                        img.setAttribute('crossOrigin', 'anonymous')

                        // 注释部分为 截图转base64，然后下载
                        // img.src = canvas.toDataURL(type, encoderOptions).replace(type, 'image/octet-stream')
                        // let screenShotImg = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream')
                        // player.emit('screenShot', screenShotImg)
                        // save && saveScreenShot(screenShotImg, '截图' + format)

                        // 图片base64转blob、blob转file文件流
                        img.src = canvas.toDataURL(type, encoderOptions)
                        // let baseSrc = img.src.replace('data:image/octet-stream;base64,', '')
                        var arr = img.src.split(','),
                            mime = arr[0].match(/:(.*?);/)[1],
                            bstr = atob(arr[1]),
                            n = bstr.length,
                            u8arr = new Uint8Array(n)
                        while (n--) {
                            u8arr[n] = bstr.charCodeAt(n)
                        }
                        let files =  new File([u8arr], '截图', { type: mime });
                        _this.screenShotSave(playerInstance, files) // 接口请求
                    })()
                }
                player.on('screenShotSelfBtnClick', onScreenShotBtnClick)

                function onDestroy () {
                    player.off('screenShotSelfBtnClick', onScreenShotBtnClick)
                    player.off('destroy', onDestroy)
                }
                player.once('destroy', onDestroy)

            }
            screenMagnify()

https://blog.csdn.net/yin13037173186/article/details/83302628