Picture to String and vice versa

PaulS

Problem

I want to store pictures in a database and storing it as a string.
Therefor it is required that a picture can be converted to a string and also can be converted from a string back to the picture.

Maybe that SVG support is a way to go since SVG is vector based and scalable without losing picture quality.

Proposed Solution

Add the possibility for the conversion from picture to a string and from a string to a picture.

Example Workflow

Alternatives Considered

Who Would This Help?

Bodevinaat

You have to serialize the picture via a binary stream. BinaryStream has ReadString and WriteString methods.

Var PictureFile As FileSystemItem = New FileSystemItem("C:/Users/sande/Pictures/Screenshots/Monalisa.png")


Var stream As New BinaryStream(PictureFile)
Var PictureString As String = stream.ReadString(stream.Length)
TextArea1.Text = PictureString

#You don't really need the PictureString string object here, just for clarification.

[edit] I noticed that this is very slow... >5 secs for a 720 kb file

Garry

Thanks for the suggestion, Paul. This has now been implemented for the next release: https://feedback.objo.dev/feature/741

Pictures can be converted to and from raw binary data using MemoryBlock:

Var photo As New Picture("photo.png")

Var pngBytes As MemoryBlock = photo.ToPNG()
Var restored As Picture = Picture.FromBytes(pngBytes)

JPEG is also supported:

Var jpegBytes As MemoryBlock = photo.ToJPEG(85)

For databases, a MemoryBlock can now be bound directly to a prepared-statement parameter and retrieved using BytesValue:

Var insert As PreparedStatement = db.Prepare(
    "INSERT INTO photos (image) VALUES (?)"
)
insert.Bind(0, photo.ToPNG())
insert.ExecuteSQL()

Var rows As RecordSet = db.SelectSQL("SELECT image FROM photos")
If rows.MoveToNextRow() Then
    Var storedBytes As MemoryBlock = rows.Column("image").BytesValue
    Var storedPhoto As Picture = Picture.FromBytes(storedBytes)
End If
rows.Close()

Using a database BLOB is the recommended approach. If the destination specifically requires a string, Base64 can be used:

Var text As String = photo.ToPNG().ToBase64()

Var restored As Picture = Picture.FromBytes(
    MemoryBlock.FromBase64(text)
)

A small warning about the BinaryStream.ReadString() workaround: it decodes the file as UTF-8 text, so it cannot safely preserve arbitrary PNG or JPEG bytes. It may corrupt the image and is likely related to the poor performance observed.

SVG conversion isn’t necessary here either. SVG is useful when the original image is vector artwork, but it isn’t a lossless representation of an ordinary bitmap photograph.

Bodevinaat

Garry This is a great enhancement, very useful.

Garry A small warning about the BinaryStream.ReadString() workaround: it decodes the file as UTF-8 text, so it cannot safely preserve arbitrary PNG or JPEG bytes. It may corrupt the image and is likely related to the poor performance observed.

I already noticed this by converting the string back to picture. The file was invalid.

PaulS

I have a lot of SVG icons. Icons in PNG or JPG format can become blurry when the size of the picture is small due to the pixelation.
With SVG even small icons look much better.
SVG is in xml format and much easier to work with.

For me SVG support in Objo is a nice to have request.

Garry

I agree that SVG is especially useful for icons, so first-class SVG support has now been implemented for the next release: https://feedback.objo.dev/feature/762

SVG pictures can be loaded from files:

Var icon As New Picture("icons/settings.svg")

From project assets:

Var icon As Picture = Picture.FromAsset("Icons/Settings")

Or directly from an SVG string:

Var icon As Picture = Picture.FromSVG(svgText)

Picture.FromBytes() also recognises SVG data.

SVG pictures remain vector-backed while being displayed or drawn, so they stay crisp at different sizes and on HiDPI displays. A single SVG project asset therefore replaces the need for @2x and @3x variants. Studio can also import and preview SVG assets.

The new read-only IsVector property indicates whether a picture still has its vector backing. Operations that require individual pixels such as Pixel, SetPixel, or accessing Graphics rasterise it.

Since SVG is already XML text, the best way to preserve an SVG in a database is to store its original markup in a text column and recreate the picture with Picture.FromSVG() when required. Picture deliberately does not convert bitmap pictures into SVG or return the original SVG markup.

SVGs are loaded as secure static artwork: scripts are not executed, DTDs are rejected, and external files or network resources are not loaded.

When I push the next release, the documentation will be at: https://docs.objo.dev/desktop/picture

PaulS

You are amazing Garry. I'm flabbergasted that you implemented SVG support with the speed of light.
Objo is becoming a wonderful and well-equipped development tool and for me it's a great joy working with Objo.