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.
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