0
153
VistasLas imágenes de blob no aparecen en la interfaz de usuario, aunque puedo verlas en la consola
Estoy tratando de crear varias imágenes de blob y mostrarlas para una interfaz de usuario de línea de tiempo de video. Para crear las imágenes, tomo capturas de pantalla del video durante ciertos períodos de tiempo y creo elementos img, luego agrego img.src como URL de imágenes de blob. El problema es que las imágenes de blob no aparecen en la interfaz de usuario, aunque puedo verlas en la consola . ¿Algunas ideas?
Fragmento de código de la creación de imágenes de 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 */ );Fragmento de código de la creación de imágenes:
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; El registro de la consola desde la línea console.log(img) :
elementos html img reales:
Cuando actualizo manualmente la fuente como se muestra a continuación, funciona, pero no entiendo por qué no obtiene la fuente por sí mismo. Cualquier idea sera apreciada.
3 Respuestas
Responde la pregunta0
Intente registrar un detector de eventos onload en el elemento de image y luego maneje todo el código que depende de esa imagen en el detector de eventos, así:
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; image.addEventListener('load', (event) => { // perform some magic here eg append to DOM or draw the image to canvas } }0
Gracias por los aportes, las respuestas no funcionaron pero me ayudaron en el proceso. Resolví el problema hoy y quería compartirlo aquí.
- Debería haber mencionado antes que las imágenes creadas se envían a
vis.js - Cuando experimenté más, vi que vis.js no agrega los objetos creados, pero cambia el HTML interno de la línea de tiempo. (Es posible que vis.js no admita imágenes de blob como src de la etiqueta img)
- Entonces, decidí darle una oportunidad a agregar el elemento. Para ello, creé un nuevo elemento div y añadí las imágenes creadas a ese div.
- También agregué un nivel de promesa adicional al proceso de creación de imágenes de blob, ya que faltaban algunos archivos.
Fragmento de código del nivel de promesa recién agregado:
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' }) }Fragmento de código de la nueva función:
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;Funcionó mágicamente.
0
Debe utilizar una sola imagen en lugar de varias imágenes.
Simplemente concatene todas las imágenes juntas:
let imgEle1 = document.querySelectorAll(".image")[0]; let imgEle2 = document.querySelectorAll(".image")[1]; let resEle = document.querySelector(".result"); var context = resEle.getContext("2d"); let BtnEle = document.querySelector(".Btn"); BtnEle.addEventListener("click", () => { resEle.width = imgEle1.width; resEle.height = imgEle1.height; context.globalAlpha = 1.0; context.drawImage(imgEle1, 0, 0); context.globalAlpha = 0.5; context.drawImage(imgEle2, 0, 0); });