generate an image of 1920 x1080 size

[yogeshbansal]

I have to show the image in browser 600x 400 and on a button click when a user downloads it, I have to generate an image of 1920 x1080 size using this library?

[MSCAU]

In the past I have quickly appended a full size (1920 x 1080) image below the fold (ie. below the visible area of the screen) using something like this:

var img = new Image();
img.src = dataUrl;
var temp = document.body.appendChild(img);
domtoimage.toBlob(temp)
    .then(function (blob) {
        window.saveAs(blob, 'full_size.png');
});
temp.remove();

It all happens in less than 1 second so hopefully the user isn't fully aware.

[yogeshbansal]

@MSCAU thanks for a quick reply, I forgot to mention that, I have some overlay text on the image on the left and right sides. for example

I am currently doing like this domtoimage .toJpeg(document.getElementById('screen'), {background: 'white', quality: 0.95}) .then(function (dataUrl) { var link = document.createElement('a'); link.download = 'my-image-name.jpeg'; link.href = dataUrl; link.click(); }); here 'Screen' is a div container with image and text as child elements. I have kept the size of the container 600x300(in browser), but during download, I want to change image size from 600x300 to 1920x1080 .

[MSCAU]

@yogeshbansal I suggest you create a Codepen page with all this and we can then see where the problem lies.

[Overbord]

@yogeshbansal Did you solve this? I'm looking to do exactly the same thing.