Q&A
コードの一部がコードブロックから出ています。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。また、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
###前提・実現したいこと
参照から自分の持つ画像を表示するプログラムと
urlを入力すると、英文と画像を表示するプログラムと英文を入力すると、日本語訳が表示させるプログラムの、３つあり、これを１つにまとめたい。
エラーメッセージ
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html1;charset=UTF-8"> <title>Translation</title> <link rel="stylesheet" href="tarnslation.css" type="text/css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script> <script type="text/javascript" src="translation.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <h1>translation</h1> <h3>画像の英語を日本語に翻訳する</h3> <form> <input type="file" id="compare"> <input type="submit" value="search" id="search"> </form> </div> <div class="preview"/> <script type="text/javascript"> function processImage() { var subscriptionKey = "382285d6c9c74bb59398aa98ef2afdc8"; // NOTE: Free trial subscription keys are generated in the westcentralus region, so if you are using var uriBase = "https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/ocr"; var params = { "language": "unk", "detectOrientation ": "true", }; var sourceImageUrl = document.getElementById("inputImage").value; document.querySelector("#sourceImage").src = sourceImageUrl; $.ajax({ url: uriBase + "?" + $.param(params), beforeSend: function(jqXHR){ jqXHR.setRequestHeader("Content-Type","application/json"); jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey); }, type: "POST", data: '{"url": ' + '"' + sourceImageUrl + '"}', } .done(function(data) { //ここから変更を加えた点になります var want=data.regions[0].lines; console.log(want); var regionslength=data.regions.length; var lineslength=data.regions[0].lines.length; console.log(regionslength); console.log(lineslength); var message=new Array(lineslength).fill(""); for(var j=0;j<regionslength;j++){ for(var i=0;i<lineslength;i++){ var textlength=want[i].words.length; for(var k=0;k<textlength;k++){ message[j]=message[j]+want[i].words[k].text; message[j]=message[j]+" "; } } } $("#responseTextArea").val(message[0]); }) .fail(function(jqXHR, textStatus, errorThrown) { // Display error message. var errorString = (errorThrown === "") ? "Error. " : errorThrown + " (" + jqXHR.status + "): "; errorString += (jqXHR.responseText === "") ? "" : (jQuery.parseJSON(jqXHR.responseText).message) ? jQuery.parseJSON(jqXHR.responseText).message : jQuery.parseJSON(jqXHR.responseText).error.message; alert(errorString); }); }; </script> <br> <br> 画像URLを入力し<strong>Read image</strong>を押してください<br> <input type="text" name="inputImage" id="inputImage" value="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Atomist_quote_from_Democritus.png/338px-Atomist_quote_from_Democritus.png" /> <button onclick="processImage()">Read image</button> <br> <br> <div id="wrapper" style="width:1020px; display:table;"> <div id="jsonOutput" style="width:600px; display:table-cell;"> 読取結果:<br> <textarea id="responseTextArea" class="UIInput" style="width:580px; height:400px;"></textarea> </div> <div id="imageDiv" style="width:420px; display:table-cell;"> Source image: <br><br> <img id="sourceImage" width="400" /> </div> </div> /*日本語訳*/ <form name="read"> <p></p> <textarea cols="30" rows="5" name="translate"> </textarea> </form> <p> <input type="button" value="translate!" onclick="Translate()"> </p> <script> function Translate(){ var English = document.read.translate.value; //翻訳したい英語を代入する関数 /*var = JsonData{ "data": { "translations": [ { "translatedText": "こんにちは", "detectedSourceLanguage": "en" } ] } };*/ var xhr= new XMLHttpRequest(); console.log(xhr); function XMLHttpRequestCreate(){ try{ return new XMLHttpRequest(); }catch(e){} try{ return new ActiveXObject('MSXML2.XMLHTTP.6.0'); }catch(e){} try{ return new ActiveXObject('MSXML2.XMLHTTP.3.0'); }catch(e){} try{ return new ActiveXObject('MSXML2.XMLHTTP'); }catch(e){} return null; } // // XMLHttpRequest オブジェクトを作成 // ------------------------------------------------------------ var xhr = XMLHttpRequestCreate(); // ------------------------------------------------------------ // XHR 通信の状態が変化するたびに実行されるイベント // ------------------------------------------------------------ xhr.onreadystatechange = function (){ switch(xhr.readyState){ // ------------------------------------------------------------ // レスポンスボディを受信中（繰り返し実行される） // ------------------------------------------------------------ case 3: console.log("受信中 :" + xhr.responseText.length + " characters"); break; // ------------------------------------------------------------ // XHR 通信が完了した（成功失敗に関わらず） // ------------------------------------------------------------ case 4: // ------------------------------------------------------------ // リクエスト成功 // ------------------------------------------------------------ if((200 <= xhr.status && xhr.status < 300) || (xhr.status == 304)){ var lines = xhr.response; console.log(lines); var Jwant=JSON.parse(lines) var want = Jwant.data.translations[0].translatedText; //transratedTextから抜き出した文字列を格納する変数 document.write(want); // ------------------------------------------------------------ // リクエスト失敗 // ------------------------------------------------------------ }else{ //console.log("リクエスト失敗"); } break; } }; // ------------------------------------------------------------ // 「GET メソッド」「接続先 URL」を指定 // ------------------------------- xhr.open("GET" , "https://www.googleapis.com/language/translate/v2?key=AIzaSyBns9P4fN33VLKAWAZNmk0qsM_m6cxZTUc&target=ja&q=" + English); // ------------------------------------------------------------ // XHR 通信を開始する // ------------------------------------------------------------ xhr.send(null); } </script> </body> </html>
###試したこと
###補足情報(言語/FW/ツール等のバージョンなど
参照から画像を表示する部分ができていて、
英文を読み取るプログラムは画像のurl出ないと表示ができない。(自分の持つ写真からは読み取れない)部分が欠点で、
参照から画像を表示すると同時に、英文を読み取れるようにしたいです。
ありがとうございます！
teratailではマルチポストは非推奨です。https://teratail.com/help#posted-otherservice ヘルプの記載通り、全てのマルチポスト先と相互リンクして下さい。 http://qiita.com/t_yuk23/items/be7f1642dadd821cb803 また、Qiitaは情報共有の場であり、質問する場ではないと思います。他にもマルチポスト先があるようでしたら、同様に対処して下さい。
あなたの回答
tips
プレビュー
