Snapshot

MUEDSA,Development

logo

Flutter (opens in a new tab)实现了一个可以直观简单快捷地构建图片的工具

之前像 taffy-pvp-card-sw (opens in a new tab) 这样直接使用Canvas的方式,会让后期维护和修改变的十分困难, 所以急需一个可以结构化构建图像的工具

Demo: https://snapshot.muedsa.com (opens in a new tab)

POST /snapshot 生成图片
Parameters

dom like text as row request body, example:

<Snapshot background="#FFFFFFFF" type="png">
    <Column>
        <Row>
            <Container color="#FF0000" width="200" height="200" />
            <Container color="#FFFFFF" width="200" height="200">
                <Text color="#0000FF" fontSize="20">哈哈 233<![CDATA[ken_test <a></a> 233 哈哈]]>哈🤣🤣🤣
                </Text>
            </Container>
        </Row>
        <Row>
            <Image width="200" height="200" url="https://samples-files.com/samples/Images/png/480-360-sample.png"
                fit="COVER" />
            <Container color="#FFFF00" width="200" height="200" />
        </Row>
    </Column>
</Snapshot>
Responses

Image ByteArray data, reponse header Content-Type: image/png, image/jpeg, image/webp

Example:

response

Sample: Container

File("sample_container.png").writeBytes(
    SnapshotPNG {
        Container(
            width = 200f,
            height = 200f,
            color = Color.RED
        )
    }
)

Sample: Container

Sample: Layout

File("sample_layout.png").writeBytes(
    SnapshotPNG {
        Column {
            Row {
                Container(
                    width = 200f,
                    height = 200f,
                    color = Color.RED
                )
                Container(
                    width = 200f,
                    height = 200f,
                    color = Color.GREEN
                )
            }
            Row {
                Container(
                    width = 200f,
                    height = 200f,
                    color = Color.BLUE
                )
                Container(
                    width = 200f,
                    height = 200f,
                    color = Color.YELLOW
                )
            }
        }
    }
)

Sample: Layout

Sample: Image & Text

File("sample_image_and_text.png").writeBytes(
    SnapshotPNG {
        Stack {
            CachedNetworkImage(
                url = "https://samples-files.com/samples/Images/jpg/1280-720-sample.jpg",
                width = 400f,
                height = 400f,
            )
            SimpleText("Hello World!", color = Color.RED, fontSize = 40f)
        }
    }
)

Sample: Image & Text

Sample: Parse DOM-LIKE TEXT

val text = """
<Snapshot background="#FFFFFFFF" type="png">
    <Column>
        <Row>
            <Container color="#FF0000" width="200" height="200"/>
            <Container color="#FFFFFF" width="200" height="200">
                <Text color="#0000FF" fontSize="20">哈哈 233<![CDATA[ken_test <a></a> 233 哈哈]]>哈🤣🤣🤣</Text>
            </Container>
        </Row>
        <Row>
            <Image width="200" height="200" url="https://samples-files.com/samples/Images/jpg/480-360-sample.jpg"/>
            <Container color="#FFFF00" width="200" height="200"/>
        </Row>
    </Column>
</Snapshot>
""".trimIndent()
File("sample_parse_dom_like.png").writeBytes(Parser().parse(StringReader(text)).snapshot())

Sample: Parse DOM-LIKE TEXT

© MUEDSA BLOG.RSS