如何给图片添加文字？及实现Instagram分享至WhatsApp自动加用户名

Hey there! Let's tackle your two questions step by step—they're both super practical for app development and image handling.

Adding text to images varies depending on the platform you're working with. Here are common implementations for different scenarios:

1. 前端网页（HTML/CSS/JavaScript） #

Use the Canvas API to draw text on top of an image:

// Get canvas element and context
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');

// Load image
const img = new Image();
img.src = 'your-image-url.jpg';
img.onload = () => {
  // Set canvas size to match image
  canvas.width = img.width;
  canvas.height = img.height;
  
  // Draw the image first
  ctx.drawImage(img, 0, 0);
  
  // Configure text style
  ctx.font = '24px Arial';
  ctx.fillStyle = 'white';
  ctx.textAlign = 'center';
  
  // Draw text at the bottom center
  ctx.fillText('Your Text Here', canvas.width / 2, canvas.height - 20);
  
  // Get the final image (optional)
  const finalImage = canvas.toDataURL('image/jpeg');
};

2. Android 原生开发 #

Use Bitmap and Canvas to modify the image:

fun addTextToImage(originalBitmap: Bitmap, text: String): Bitmap {
    val mutableBitmap = originalBitmap.copy(Bitmap.Config.ARGB_8888, true)
    val canvas = Canvas(mutableBitmap)
    
    // Configure paint for text
    val paint = Paint().apply {
        color = Color.WHITE
        textSize = 60f
        typeface = Typeface.DEFAULT_BOLD
        textAlign = Paint.Align.CENTER
    }
    
    // Draw text at bottom center
    val xPos = canvas.width / 2f
    val yPos = canvas.height - 50f
    canvas.drawText(text, xPos, yPos, paint)
    
    return mutableBitmap
}

3. iOS 原生开发 #

Use Core Graphics to overlay text on an image:

func addTextToImage(image: UIImage, text: String) -> UIImage? {
    let imageSize = image.size
    let textFont = UIFont.boldSystemFont(ofSize: 24)
    
    // Create graphics context
    UIGraphicsBeginImageContextWithOptions(imageSize, false, image.scale)
    image.draw(in: CGRect(x: 0, y: 0, width: imageSize.width, height: imageSize.height))
    
    // Configure text attributes
    let textAttributes = [
        NSAttributedString.Key.font: textFont,
        NSAttributedString.Key.foregroundColor: UIColor.white
    ]
    
    // Calculate text position (bottom center)
    let textSize = text.size(withAttributes: textAttributes)
    let xPos = (imageSize.width - textSize.width) / 2
    let yPos = imageSize.height - textSize.height - 20
    
    text.draw(at: CGPoint(x: xPos, y: yPos), withAttributes: textAttributes)
    
    // Get the final image
    let finalImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return finalImage
}

4. Python 脚本（离线处理） #

Use the Pillow library to add text:

from PIL import Image, ImageDraw, ImageFont

# Open image
image = Image.open('your-image.jpg')
draw = ImageDraw.Draw(image)

# Configure font (use a local font file or default)
font = ImageFont.truetype('arial.ttf', 24)

# Draw text at bottom center
text = 'Your Text Here'
text_width, text_height = draw.textsize(text, font=font)
x = (image.width - text_width) // 2
y = image.height - text_height - 20

draw.text((x, y), text, font=font, fill='white')

# Save the modified image
image.save('image-with-text.jpg')

The Instagram feature you're referring to works by dynamically generating a watermarked version of the post image (with the username) before sharing it to WhatsApp. Here's how to replicate this flow:

Core Steps #

1. Retrieve User Information
   Fetch the current user's username (or any text you want to add) from your app's authentication system or user profile data.

2. Add Username Watermark to the Image
   Use one of the image-text overlay methods above (depending on your platform) to add the username to the image. Instagram typically places the username in the bottom-left or bottom-right corner, often with a semi-transparent background or a bold, high-contrast color to ensure readability.

3. Initiate WhatsApp Share
   Pass the watermarked image (and optional caption text) to WhatsApp's sharing interface. Here's how to do it on mobile platforms:

Android Implementation

fun shareToWhatsApp(watermarkedImage: Bitmap, username: String) {
    // Save the bitmap to a temporary file
    val tempFile = File(context.externalCacheDir, "shared_image.jpg")
    val outputStream = FileOutputStream(tempFile)
    watermarkedImage.compress(Bitmap.CompressFormat.JPEG, 90, outputStream)
    outputStream.close()
    
    // Create intent for WhatsApp share
    val intent = Intent(Intent.ACTION_SEND).apply {
        type = "image/jpeg"
        putExtra(Intent.EXTRA_STREAM, Uri.fromFile(tempFile))
        putExtra(Intent.EXTRA_TEXT, "Check out this post from @$username!")
        setPackage("com.whatsapp") // Direct to WhatsApp
    }
    
    context.startActivity(Intent.createChooser(intent, "Share via WhatsApp"))
}

iOS Implementation

func shareToWhatsApp(watermarkedImage: UIImage, username: String) {
    let activityItems: [Any] = [watermarkedImage, "Check out this post from @\(username)!"]
    let activityVC = UIActivityViewController(activityItems: activityItems, applicationActivities: nil)
    
    // Filter to only show WhatsApp
    activityVC.excludedActivityTypes = [
        UIActivity.ActivityType.postToFacebook,
        UIActivity.ActivityType.postToTwitter
    ]
    
    present(activityVC, animated: true)
}

Key Notes #

• Performance: For large images, resize them before adding text to avoid memory issues (OOM crashes on mobile).
• User Experience: Match Instagram's subtle watermark style (e.g., light text with a shadow, or a semi-transparent background) to keep the image clean.
• Permissions: Ensure your app has the necessary storage permissions to save temporary images (for Android) or access photo library (for iOS).

内容的提问来源于stack exchange，提问作者Murshid C K