来自画布 objectURL blob 图像在 Safari 中是黑色的

问题描述

我从编码的 m3u8 流中在 Angular 中创建了一个快照函数，并且在 chrome 中最初 5-10 次运行良好，但是如果我一次又一次地创建图像（超过 5-10 次） 有快照功能是内存不足的异常，可能是抓拍的图片太大了？

无论如何在 Safari 中，更重要的是在创建快照时只向我显示黑色图像而没有任何错误。

以前有人遇到过这个问题吗？

onSnapPhoto(media: HTMLVideoElement) {
    window.URL = window.URL || window.webkitURL;
    const canvas = document.createElement('canvas');
    canvas.width = media.videoWidth;
    canvas.height = media.videoHeight;
    const ctx = canvas.getContext('2d');
    if (ctx) {
      new Promise((resolve,reject) => {
        ctx.drawImage(media,0);
        const image = canvas.toDataURL('image/jpeg');
        const data = atob(image.replace(/\s+/g,'').trim().substring("data:image/jpeg;base64,".length));
        const asArray = new Uint8Array(data.length);
        for (let i = 0,len = data.length; i < len; ++i) {
          asArray[i] = data.charCodeAt(i);
        }
        resolve(new Blob([asArray.buffer],{type: 'application/octet-stream'}));
      }).then(f => {
        // This is for uploading to server
        this.images.push(new File([f],`${UUID.UUID().replaceAll('-','')}${media.src.substr(media.src.lastIndexOf('.') + 1)}.png`));
        // This is for showing images,I use this to show in image src locally
        this.localScreenPhotosUrls.push(window.URL.createObjectURL(f));
        this.listsRefresh();
      });
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）