UIimageview加文本叠加保存为新图像？

Question

I know there are more than enough resources on how have a text box overlay on a portion of an image view. However, is there any way to save the image + overlaid text as a new image upon upload?

1. User chooses photo and image view populates with image
2. User enters text on top of the image view
3. User hits "upload" button, and image+text is rendered as a new image that incorporates text on top of it before saving to back-end database.

Is this possible? How?

Answer 1

You can do this using Core Graphics/Quartz 2D. I'm not too experienced with Core Graphics myself, but check out the documentation here that describes loading a graphic context with an image, which you can then save out to a file after modifying, or just drawing an image from scratch and saving it out:

Link 1: Drawing/Printing for iOS

Link 2: Quartz 2D Programming Guide

Quick example of drawing text from the Quartz 2D Programming Guide under the "Text" section:

void MyDrawText (CGContextRef myContext, CGRect contextRect) // 1
{
  float w, h;
  w = contextRect.size.width;
  h = contextRect.size.height;

  CGAffineTransform myTextTransform; // 2
  CGContextSelectFont (myContext, // 3
                "Helvetica-Bold",
                 h/10,
                 kCGEncodingMacRoman);
  CGContextSetCharacterSpacing (myContext, 10); // 4
  CGContextSetTextDrawingMode (myContext, kCGTextFillStroke); // 5

  CGContextSetRGBFillColor (myContext, 0, 1, 0, .5); // 6
  CGContextSetRGBStrokeColor (myContext, 0, 0, 1, 1); // 7
  myTextTransform =  CGAffineTransformMakeRotation  (MyRadians (45)); // 8
  CGContextSetTextMatrix (myContext, myTextTransform); // 9
  CGContextShowTextAtPoint (myContext, 40, 0, "Quartz 2D", 9); // 10
}

Here's what the code does:

1. Takes as parameters a graphics context and a rectangle to draw to.
2. Declares storage for the affine transform.
3. Sets the font to Helvetica and the font size to the height of the page rectangle divided by 10. The font size is in text space units. In this example, the text is drawn to a resizable window. When the user resizes the window, the text resizes as well. The encoding is set to kCGEncodingMacRoman, but the only other choice is kCGEncodingFontSpecific.
4. Sets the character spacing to 10 text space units. You call this function only if you want to add the additional space to the advance between the origin of one glyph and the origin of the next glyph.
5. Sets the text drawing mode to fill and stroke.
6. Sets the fill color to green with an alpha value of .5 for a partially transparent fill. Note that this is not a text-specific attribute. The fill color applies to the graphics state.
7. Sets the stroke color to opaque blue. This is another attribute that is not text specific.
8. Creates an affine transform that performs a 45 degree rotation. The MyRadians routine is an application-defined convenience function for computing degrees from radians. You either need to supply your own routine to convert degrees to radians, or you need to substitute this call with a value that specifies radians. Otherwise, this code example will not compile.
9. Sets the text matrix to the transform created in the last step.
10. Draws the text, passing the x and y coordinates in text space to start the drawing at (40,0), an array of characters to draw, and a value that specifies the length of the text array. In this case, you pass a C-style string and the value 9 to specify the number of characters.