Image to Translator<\/title>\n<style>\n body {\n font-family: Arial, sans-serif;\n background: #f4f4f4;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n color: #333;\n }\n .container {\n max-width: 600px;\n width: 90%;\n padding: 20px;\n background-color: #fff;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n text-align: center;\n animation: fadeIn 1s ease-in-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(-20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n h1 {\n font-size: 28px;\n margin-bottom: 20px;\n color: #009dff; \/* Heading color *\/\n }\n input[type=\"file\"] {\n display: none;\n }\n .upload-label {\n background-color: #033676; \/* Button color *\/\n color: white;\n padding: 12px 20px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 16px;\n font-weight: bold;\n transition: background-color 0.3s ease;\n margin-bottom: 20px;\n }\n .upload-label:hover {\n background-color: #022a5c; \/* Darker shade on hover *\/\n }\n #image-preview {\n margin-top: 20px;\n max-width: 100%;\n border-radius: 8px;\n display: none;\n }\n #convert-btn {\n background-color: #009dff; \/* Convert button color *\/\n color: white;\n padding: 12px 20px;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 16px;\n font-weight: bold;\n transition: background-color 0.3s ease;\n margin-top: 20px;\n display: none; \/* Hidden by default *\/\n }\n #convert-btn:hover {\n background-color: #0056b3; \/* Darker shade on hover *\/\n }\n #language-select {\n margin-top: 20px;\n padding: 10px;\n font-size: 16px;\n border-radius: 8px;\n border: 2px solid #ddd;\n width: 100%;\n max-width: 300px;\n }\n #result, #translated-text {\n margin-top: 20px;\n font-size: 18px;\n font-weight: bold;\n color: #444;\n padding: 20px;\n background-color: #f9f9f9;\n border-radius: 8px;\n border: 2px solid #ddd;\n text-align: left;\n display: none;\n }\n .loader {\n border: 5px solid #f3f3f3;\n border-top: 5px solid #009dff; \/* Loader color *\/\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 20px auto;\n display: none;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <h1>Image to Translator<\/h1>\n <label for=\"image-upload\" class=\"upload-label\">Upload Image<\/label>\n <input type=\"file\" id=\"image-upload\" accept=\"image\/*\">\n <img decoding=\"async\" id=\"image-preview\" src=\"#\" alt=\"Image Preview\">\n <select id=\"language-select\">\n <option value=\"es\">Spanish<\/option>\n <option value=\"fr\">French<\/option>\n <option value=\"de\">German<\/option>\n <option value=\"zh-CN\">Chinese<\/option>\n <option value=\"ur\">Urdu<\/option>\n <option value=\"ar\">Arabic<\/option>\n <\/select>\n <button id=\"convert-btn\">Translate Text<\/button>\n <div class=\"loader\" id=\"loader\"><\/div>\n <div id=\"result\"><\/div>\n <div id=\"translated-text\"><\/div>\n<\/div>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/tesseract.js@2.1.4\/dist\/tesseract.min.js\"><\/script>\n<script>\n const imageUpload = document.getElementById('image-upload');\n const imagePreview = document.getElementById('image-preview');\n const convertBtn = document.getElementById('convert-btn');\n const languageSelect = document.getElementById('language-select');\n const resultDiv = document.getElementById('result');\n const translatedTextDiv = document.getElementById('translated-text');\n const loader = document.getElementById('loader');\n\n let imageSrc = null;\n\n \/\/ When an image is uploaded\n imageUpload.addEventListener('change', function(event) {\n const file = event.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = function(e) {\n imageSrc = e.target.result;\n imagePreview.src = imageSrc;\n imagePreview.style.display = 'block';\n convertBtn.style.display = 'block'; \/\/ Show convert button\n resultDiv.style.display = 'none';\n translatedTextDiv.style.display = 'none';\n };\n reader.readAsDataURL(file);\n }\n });\n\n \/\/ When convert button is clicked\n convertBtn.addEventListener('click', function() {\n if (imageSrc) {\n extractTextFromImage(imageSrc);\n } else {\n alert(\"Please upload an image first.\");\n }\n });\n\n \/\/ Function to extract text from image using Tesseract.js\n async function extractTextFromImage(imageSrc) {\n loader.style.display = 'block';\n resultDiv.style.display = 'none';\n translatedTextDiv.style.display = 'none';\n\n try {\n const { data: { text } } = await Tesseract.recognize(\n imageSrc,\n 'eng', \/\/ Language (English)\n {\n logger: m => console.log(m), \/\/ Log progress\n }\n );\n resultDiv.textContent = \"Extracted Text: \" + text;\n resultDiv.style.display = 'block';\n translateText(text, languageSelect.value);\n } catch (error) {\n resultDiv.textContent = \"Error extracting text. Please try again.\";\n resultDiv.style.display = 'block';\n } finally {\n loader.style.display = 'none';\n }\n }\n\n \/\/ Function to translate text using Google Translate API\n async function translateText(text, targetLang) {\n const apiKey = 'YOUR_GOOGLE_TRANSLATE_API_KEY'; \/\/ Replace with your API key\n const url = `https:\/\/translation.googleapis.com\/language\/translate\/v2?key=${apiKey}`;\n\n try {\n const response = await fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n q: text,\n target: targetLang,\n }),\n });\n const data = await response.json();\n const translatedText = data.data.translations[0].translatedText;\n translatedTextDiv.textContent = \"Translated Text: \" + translatedText;\n translatedTextDiv.style.display = 'block';\n } catch (error) {\n translatedTextDiv.textContent = \"Error translating text. Please try again.\";\n translatedTextDiv.style.display = 'block';\n }\n }\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<img src=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/02\/2-1-1.webp\" class=\"ss-hidden-pin-image\" alt=\"\" data-pin-url=\"https:\/\/toolsblaster.com\/?p=872\" data-pin-media=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/02\/2-1-1.webp\" data-pin-description=\"Best Image to Text Translator\"\/>","protected":false},"excerpt":{"rendered":"<p>Image to Translator Image to Translator Upload Image SpanishFrenchGermanChineseUrduArabic Translate Text<\/p>\n<img src=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/02\/2-1-1.webp\" class=\"ss-hidden-pin-image\" alt=\"\" data-pin-url=\"https:\/\/toolsblaster.com\/?p=872\" data-pin-media=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/02\/2-1-1.webp\" data-pin-description=\"Best Image to Text Translator\"\/>","protected":false},"author":1,"featured_media":989,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAowgIyDCw:productID":"","_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-top-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/posts\/872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=872"}],"version-history":[{"count":2,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/posts\/872\/revisions"}],"predecessor-version":[{"id":1657,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/posts\/872\/revisions\/1657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/media\/989"}],"wp:attachment":[{"href":"https:\/\/toolsblaster.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}