0

i wanna make dom to image for posting the image on instagram story. so i use dom-to-image library and file saver.

domtoimage
        .toBlob(card, {
          width: card.clientWidth * scale,
          height: card.clientHeight * scale,
          style: {
            transform: "scale(" + scale + ")",
            transformOrigin: "top left",
          },
          filter: (node: any) => node.tagName !== "BUTTON",
          bgcolor: "transparent",
        })
        .then((blob) => {
          saveAs(blob, "card.png");
        });
    }
const Card = styled.div`
  width: 289px;
  height: 430px;
  border-radius: 15px;
  background-color: transparent;
`;

i apply border-radius css on Card and background: transparent also. i think it is because border-radius style. i use bgcolor options for transparent but when i post it on instagram. it looks like under image.

posting instagram

there are some black background on each corner i wonder how i can erase that black corner. please let me know if you know the solution.

i tried wrap the container using another div box. and also put background option every div box and dom to image option expecting erasing black corner. but it doesn't work

0 Answers0