Add Text to a Picture

[#1]

@lwx228  asked How do add text to a cell that has an image loaded?  This idea is pretty simple: put the picture in a frame box, use a graphic script to decorate, take a new picture. The details to get a nice round-trip image are a bit more complicated. The frame needs to be sized and scaled, and the picture positioned, and the final image cropped.

// open the original
original = New Image(
	"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Oroblanco_%28sweetie%29_fruits.jpg/320px-Oroblanco_%28sweetie%29_fruits.jpg"
);
{xSize, ySize} = original << size;
// use a frame to do the drawing, make the original fit the frame exactly
gb = Graph Box(
	<<backgroundcolor( "orange" ), // to see errors better
	FrameSize( xSize + 1, ySize + 1 ), // the +1 is required, 4 times
	X Scale( 0, xSize + 1 ),
	Y Scale( 0, ySize + 1 ), 
	// apparently x and y are different. this is correct in 17EA.
	<<Add Image( image( original ), bounds( top( 0 ), Left( 1 ), bottom( ySize ), Right( xSize + 1 ) ) ), 
	// draw something on top of the image
	Text( Center Justified, {xSize / 2, 10}, "https://en.wikipedia.org/wiki/Oroblanco" );
	Pen Color( "blue" );
	Pen Size( 3 );
	Circle( {1 * xsize / 4, ysize / 2}, 10, 20, 30, 40, 50 );
	Circle( {3 * xsize / 4, ysize / 2}, 10, 20, 30, 40, 50 );
);
// capture an updated image
updated = gb[framebox( 1 )] << getpicture;
// crop added border. "updated" is the final image.
updated << crop( Left( 1 ), top( 1 ), Right( xSize + 1 ), bottom( ySize + 1 ) );
// the remainder is just to verify the image...
originalMatrix = original << getpixels;
newMatrix = updated << getpixels;
diff = (originalMatrix - newMatrix != 0);
New Window( "bitmaps",
	V List Box(
		gb,
		Spacer Box( size( 1, 10 ) ),
		Button Box( "picture credit: Ivar Leidus, Creative Commons Attribution-Share Alike 4.0 International",
			Web( "https://en.wikipedia.org/wiki/File:Oroblanco_(sweetie)_fruits.jpg" ),
			<<underlinestyle
		),
		Spacer Box( size( 1, 10 ) ),
		H List Box(
			Spacer Box( size( 2, 2 ) ),
			V List Box( Text Box( "original" ), original ),
			Spacer Box( size( 2, 2 ) ),
			V List Box( Text Box( "updated" ), updated ),
			Spacer Box( size( 2, 2 ) ),
			V List Box( Text Box( "diff" ), New Image( diff ) ),
			Spacer Box( size( 2, 2 ) ),
		)
	)
);

The results, below, shows the image filling the frame box with the decorations, and three images below. The left image is the original, the center is modified, and the right is the difference. The difference is mostly black, no change, which is good. The text in the difference is fuzzy because the anti-aliasing made subtle changes at the edge of the text.

Circles and text added on top of fruit picture.

Picture from Crop a JPG Image explaining how crop works.

View more...

The zero-based pixel indexes are on the hairlines between the pixels.