cached issue when copy element with background image and create png file from it using blob, get the wrong image
*) if I will refresh the page and then I will change the background image of the div and then I create from it the png file, It will work...
<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;">
I have created a new container div and copied the data to it
const container = this.dom.query(SCREENSHOT_CONTAINER_SELECTOR);
const clonedDashboard = dashboard.cloneNode(true) as HTMLElement;
this.dom.appendChild(container, clonedDashboard);
than I convert it to canvas:
canvas = (const options: html2ImageOptions = {
width: element.scrollWidth,
height: element.scrollHeight,
...html2ImageOptions,
};
return htmlToImage[format](element, options);)();
and then using the canvas and creating from it png file
new Promise((resolve) => extraCanvas.toBlob(resolve, 'image/png')
then the resolve return file (blob) and when I call to
const url = URL.createObjectURL(file);
console.log(url);
The first time, I see that png which displays the div with the correct image. after that (when no refresh is done) And I changed the background image to be another image... I see it correctly on the page, but when I open the png file that was created I see that the png contain a div with the background image of the previous image that was selected
in HTML it displays the correct photo. in the png file, it displays the first selected photo (it probably cached in the file created processed, blob)
how can I solve it? I get a picture that represents the div with the previous image background.
After a refresh it works ok, the new image is reflected as expected in the png file
The issue of caching the blob result is related to the query string in the URL.
Even the background image URL was different from each other they were different after the query string.
the solution was to change the URL before the query string and then the blob doesn't see these URL as equal and doesn't take it from the cache
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;
You need to post more code.
How are you changing the image without refreshing? And also, after changing the image are you cloning again the div and then recreating the canvas?? Or if you are only switching the image and never cloning again the div, then the canvas is using the old div.