Javascript Blob 图像不会显示在 UI 中，尽管我可以在控制台上看到它们

发布于07月31日

我试图创建多个斑点图像，并显示他们的视频时间线用户界面.为了创建图像，我在一定的时间范围内截取视频的屏幕截图，创建img元素，然后添加img.src作为BLOB图像的URL.问题是blob images does not show up at UI, although I can see them on console个.有什么主意吗？

创建BLOB图像的代码片段:

// draw the video frame to canvas
const ctx = canvas.getContext("2d");
ctx.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
ctx.canvas.toBlob(
    blob => {
        resolve(blob);
    },
    "image/jpeg",
    0.75 /* quality */
);

创建图像的代码片段:

let img = '';
for (let i = 0; i < count / 3; i++) {
    const cover = await GetVideoCover(item.video_url, i);
    var url = URL.createObjectURL(cover);
    var image = new Image();
    image.src = url;
    img += "<img src='"+image.src+"'>";
    console.log(img)
}
return img;

控制台日志(log)从console.log(img)行开始:

实际的html img元素:

当我手动更新源代码时，如下所示，它可以工作，但我不明白为什么它不能自己获取源代码.任何 idea 都将不胜感激.

const blobToImage = (itemVideoURL,captureSecond) => { return new Promise(async (resolve,reject)=> { let cover = await GetVideoCover(itemVideoURL,captureSecond); const url = URL.createObjectURL(cover) let img = new Image() img.onload = () => { URL.revokeObjectURL(url) resolve(img) } img.src = url img.height = '75' }) }

let divElement = document.createElement('div'); for (let i = 0; i < count * 3; i++) { let newImage = await blobToImage(item.video_url,i+1) divElement.appendChild(newImage) } return divElement;

Javascript Blob 图像不会显示在 UI 中，尽管我可以在控制台上看到它们

推荐答案

Javascript相关问答推荐

将数据从strapi提取到next.js，但响应延迟API URL

GrapeJS -如何保存和加载自定义页面

我开始使用/url？q=使用Cheerio

了解Node.js中的EventEums和浏览器中的addEventEums之间的关系

格式值未保存在redux持久切片中

从mat—country—select获取整个Country数组

如何用显示网格平滑地将元素从一个地方移动到另一个地方？

colored颜色检测JS，平均图像 colored颜色检测JS

实现JS代码更改CSS元素

JSDoc创建并从另一个文件导入类型

如何将react—flanet map添加到remixjs应用程序

我怎么才能得到Kotlin的密文？

在使用HighChats时如何避免Datatables重新初始化错误？

Vaadin定制组件-保持对javascrip变量的访问

触发异步函数后不能显示数据

如何使用画布在另一个内部绘制一个较小但相同的形状，同时保持恒定的边界厚度？

用于测试其方法和构造函数的导出/导入类

如何阻止外部脚本进入顶层导航

如果查询为空，则MongoDB将所有文档与$in匹配

使用Java脚本筛选数组中最接近值最小的所有项