cached issue when copy element with background image and create png file from it using blob, get the wrong image
- I have a div element with a background image:
- I created a new png file from that div
- I changed the image in the div (different URL), In the HTML all looks good
- Convert again this div to a png file
- Getting the first background image in the png file
*) 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
from when copy element with background image and create png file from it using blob, get wrong image
No comments:
Post a Comment