Download effect?

[ngekoding]

When we click the download button, it will make the dialog card scaling down and back to normal. Is this deliberate?

Quotes.Download.Animation.mov

[nyancodeid]

unfortunately yes, we need to do that because we need to normalize our css before we turn it into a image

[ngekoding]

I haven't use that library, so there is no way to download without that animation?

[ngekoding]

I try to use this lib https://www.npmjs.com/package/html-to-image, and it solve this issue & this one #144

[x] no need to rescaling
[x] use filter to remove download button

// element.classList.remove(...classLists);
// saveIcon?.classList.add("invisible");

htmlToImage.toBlob(element, {
  width: element.offsetWidth * 1.5,
  height: element.offsetHeight * 1.5,
  style: {
    transformOrigin: 'top left',
    width: element.offsetWidth + 'px',
    height: element.offsetHeight + 'px',
  },
  filter: (node) => !node.classList?.contains('button-save')
}).then(blob => {
  saveAs(blob, `quotes-nyandev-id-${Date.now()}.png`);
});

Sorry I can't make a complete code right now for PR. Maybe you can try it!

I was try to use the same configuration with current lib (dom-to-image-improved), but it still blurry.

[nyancodeid]

I try to use this lib https://www.npmjs.com/package/html-to-image, and it solve this issue & this one #144

[x] no need to rescaling [x] use filter to remove download button

// element.classList.remove(...classLists);
// saveIcon?.classList.add("invisible");

htmlToImage.toBlob(element, {
  width: element.offsetWidth * 1.5,
  height: element.offsetHeight * 1.5,
  style: {
    transformOrigin: 'top left',
    width: element.offsetWidth + 'px',
    height: element.offsetHeight + 'px',
  },
  filter: (node) => !node.classList?.contains('button-save')
}).then(blob => {
  saveAs(blob, `quotes-nyandev-id-${Date.now()}.png`);
});

Sorry I can't make a complete code right now for PR. Maybe you can try it!

Cool, i just realize that html-to-image is fork version from the original dom-to-image and have been written into Typescript. I think we can use that.

I was try to use the same configuration with current lib (dom-to-image-improved), but it still blurry.

And i believe that blurry effect still exist in both library.

[ngekoding]

Here is the different.

• dom-to-image-improved (current result)

• html-to-image (with configuration above)

[nyancodeid]

Awesome @ngekoding , the result is better than the current one. The resolution is also better. Nice one!