problema almacenado en caché al copiar el elemento con la imagen de fondo y crear un archivo png a partir de él usando blob, obtener la imagen incorrecta
*) si actualizo la página y luego cambio la imagen de fondo del div y luego creo a partir de él el archivo png, funcionará...
<div class="d-flex d-flex-1-1-auto" style="background-image: url("https://fe.io/webresources/image/show/img.png?path=dashboard/1679941/bb41d1d0-6e01-4c4d-b3bb-de3724122b1d.jpg";); background-repeat: no-repeat; background-size: contain; background-position: center center; margin-left: 0px; margin-top: 0px;">Creé un nuevo contenedor div y le copié los datos.
const container = this.dom.query(SCREENSHOT_CONTAINER_SELECTOR); const clonedDashboard = dashboard.cloneNode(true) as HTMLElement; this.dom.appendChild(container, clonedDashboard);de lo que lo convierto en lienzo:
canvas = (const options: html2ImageOptions = { width: element.scrollWidth, height: element.scrollHeight, ...html2ImageOptions, }; return htmlToImage[format](element, options);)();y luego usando el lienzo y creando a partir de él un archivo png
new Promise((resolve) => extraCanvas.toBlob(resolve, 'image/png')luego el archivo de retorno de resolución (blob) y cuando llamo a
const url = URL.createObjectURL(file); console.log(url);La primera vez, veo ese png que muestra el div con la imagen correcta. después de eso (cuando no se actualiza) Y cambié la imagen de fondo para que sea otra imagen... Lo veo correctamente en la página, pero cuando abro el archivo png que se creó, veo que el png contiene un div con el imagen de fondo de la imagen anterior que se seleccionó
en HTML muestra la foto correcta. en el archivo png, muestra la primera foto seleccionada (probablemente se almacenó en caché en el archivo creado procesado, blob)
¿Cómo puedo resolverlo? Obtengo una imagen que representa el div con el fondo de la imagen anterior.
Después de una actualización, funciona bien, la nueva imagen se refleja como se esperaba en el archivo png
El problema de almacenar en caché el resultado del blob está relacionado con la cadena de consulta en la URL.
Incluso la URL de la imagen de fondo era diferente entre sí, eran diferentes después de la cadena de consulta.
la solución fue cambiar la URL antes de la cadena de consulta y luego el blob no ve estas URL como iguales y no las toma del caché
const queryString = '?'; const imageSelector = this.dom.query(this.imageWidgetSelector, widgetElement); const imageDivArr = imageSelector.getElementsByTagName('div'); if (imageDivArr.length > 0) { const backgroundImageDivURL = imageDivArr[0].style.backgroundImage; const backgroundImageDivURLParts = backgroundImageDivURL.split(queryString); const urlWithoutQueryString = `${backgroundImageDivURLParts[0]}${Date.now()}${index}`; const backgroundImageDivURLWithAdditionalInfo = `${urlWithoutQueryString}${queryString}${backgroundImageDivURLParts[1]}`; imageDivArr[0].style.backgroundImage = backgroundImageDivURLWithAdditionalInfo;Necesitas publicar más código.
¿Cómo estás cambiando la imagen sin actualizar? Y también, después de cambiar la imagen, ¿está clonando nuevamente el div y luego recreando el lienzo? O si solo cambia la imagen y nunca vuelve a clonar el div, entonces el lienzo está usando el div anterior.