Image Translator

What Is Image Translator?

The Image Translator is a powerful browser-based tool that combines optical character recognition (OCR) with multilingual translation capabilities. As implemented in the code, it processes images entirely client-side using Tesseract.js for text extraction and MyMemory translation API for language conversion. The tool supports 20 languages including English, Chinese, Japanese, Korean, and major European languages.

How To Use Image Translator

1. Upload Your Image

   • Click the upload area or drag/drop an image file (up to 5MB)
   • Supported formats: JPG, PNG (validated by file type checking)

2. Set Language Options

   • Source language: Choose from 20 options or use auto-detection
   • Target language: Select from available translation outputs
   • Output format: Original, JPG, or PNG (via format-options buttons)

3. Process & Download

   • Click "Translate & Download" to:
     1. Extract text (visible in preview panel)
     2. Translate using selected languages
     3. Generate new image with translated text appended
   • Download button appears automatically post-processing

FAQs

1. What image formats does this tool support?
The tool strictly supports JPG and PNG formats as coded in the handleFile function's validation logic. The system checks both file extensions (.jpg, .jpeg, .png) and MIME types ("image/"). Maximum file size is 5MB (5,242,880 bytes) as defined by the MAX_SIZE constant. Unsupported files trigger immediate client-side validation errors without server interaction.

2. How accurate is the text extraction?
Accuracy depends on the Tesseract.js OCR engine and selected language pack. The code implements automatic fallback detection - trying Chinese first, then English when auto-detect is selected. For best results, use clear images with standard fonts. The progress tracking system (recognizing text status) shows real-time extraction percentages during processing.

3. Which translation API does this use?
The implementation uses MyMemory Translation API through the mockTranslate function, with automatic language detection based on character sets (Chinese, Japanese, Korean, or default English). The API call format is https://api.mymemory.translated.net/get?q=[text]&langpair=[source]|[target]. No alternative APIs are currently integrated.

4. Is there any image quality loss?
Output quality depends on your selected format. The canvas rendering in drawTextOnImage preserves original dimensions while adding translated text. JPG outputs use 0.9 quality setting (see toBlob parameters), while PNG maintains lossless compression. Original format option keeps the source image's encoding.

5. How does the auto language detection work?
When "Auto Detect" is selected, the system first attempts Chinese OCR (checking for CJK characters via Unicode ranges), then falls back to English if no text is found. This matches the conditional logic in the tesseractLang assignment block. For precise results, manual language selection is recommended as noted in the UI hint.

6. Can I edit the extracted text before translation?
The current implementation doesn't include text editing features. Extracted text displays in the #textResultContent div (styled with monospace font) and can be copied via the clipboard API, but all modifications would require external editors before reprocessing.