質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

Q&A

3回答

2172閲覧

バグなくbase64に変換させるには

mansei2010

総合スコア9

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

1グッド

1クリップ

投稿2017/01/11 01:34

画像をタブとタブの間にドラッグアンドドロップする事で画像検索を行いたいと考えています。

ですが、現在検索が行われずドロップした画像のみを出力するページとなってしまっています。

バグの内容としては、drawImageの部分で起こっており、かつbase64の文字列にimgタグで取得したデータが変換されていないというものです。

本来は、ドラッグアンドドロップを行った後に画像検索が行われるようにしたいと考えています。

どこの部分を変えることで、バグが起こることなく検索が行われるのでしょうか。

よろしくお願い致します。

json

1{ 2 "manifest_version": 2, 3 "version": "1.0.0", 4 "name": "Tab Searcher", 5 "description": "画像をタブの部分にドラッグ&ドロップするだけで画像検索の出来る拡張機能です。", 6 "permissions": [ 7 "tabs", 8 "activeTab", 9 "<all_urls>" 10 ], 11 "content_scripts" : [ 12 { 13 "matches" : [ 14 "file:///*/*", 15 "http://*/*", 16 "https://*/*" 17 ], 18 "js": [ 19 "content.js" 20 ], 21 "run_at" : "document_end" 22 } 23 ], 24 "background" : { 25 "scripts" : [ 26 "ImageSearch_test_6.js" 27 ], 28 "persistent" : false 29 }, 30 "browser_action":{ 31 "default_icon": "tabsearch.png" 32 } 33}

javascript

1function Sub(image){ 2 3 var form = document.createElement('form'); 4 form.setAttribute('method', 'post'); 5 form.setAttribute('action', 'http://images.google.com/searchbyimage/upload'); 6 form.style.display = "none"; 7 document.body.appendChild(form); 8 9 var hiddenField = document.createElement('input'); 10 hiddenField.setAttribute('type', 'hidden'); 11 hiddenField.setAttribute('name', 'image_content'); 12 hiddenField.setAttribute('value', image); 13 form.appendChild(hiddenField); 14 15 form.submit(); 16}; 17 18var imageToBase64 = function(imgElement, mimeType) { 19 var canvas = document.createElement('canvas'); 20 var ctx = canvas.getContext('2d'); 21 22 canvas.width = imgElement.width; 23 canvas.height = imgElement.height; 24 ctx.drawImage(imgElement, 0, 0); 25 26 base64String = canvas.toDataURL(mimeType); 27 28 return base64String; 29}; 30 31chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){ 32 var image = request.image; 33 34 var base64String = imageToBase64(image, 'image/jpeg'); 35 36 var SearchCode = Sub.toString().replace(/(\n|\t)/gm, ''); 37 38 var url = {'url': 'javascript:' + SearchCode + '; Sub("' + base64String + '");'}; 39 40 sendResponse(url); 41});

javascript

1(window.onload = function(){ 2 var image = document.getElementsByTagName('img')[0]; 3 4 chrome.runtime.sendMessage({"image":image},function(url){ 5 location.href = url; 6 window.stop(); 7 }); 8})();
DrqYuto👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

コメントだとフォーマットおよびシンタックスハイライトできないため回答で返答しますが、
imgのsrc属性からURL取得できると思うので、fetchとFileReader使えばいいかと。

js

1fetch(img.src).then(res => res.blob()).(blob => { 2 var fr = new FileReader(); 3 fr.onload = _ => { 4 var base64 = fr.response.split(',')[1]; 5 chrome.runtime.sendMessage({image: base64}, // 以下略 6 } 7 fr.readAsDataURL(blob); 8});

投稿2017/01/11 06:30

編集2017/01/11 06:31
turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

turbgraphics200

2017/01/11 06:33

って、書いて思ったけどわざわざbackgroundスクリプトに送信する必要なんてなかったり。
mansei2010

2017/01/11 07:04

backgroundに送る必要が無いという事では、画像検索の為のURLをcontentスクリプトでも作成することが可能なのでしょうか。
turbgraphics200

2017/01/11 07:11

ええ、fetch(またはxhr)とFormDataでできると思います。
mansei2010

2017/01/11 07:18

調べてみたのですが、FormDataオブジェクトの設定は今回作成したSub関数と同じように設定しても宜しいものですか。
mansei2010

2017/01/11 10:10

先程提示して戴いたプログラム中で、 fetch(image.src).then(res => res.blob()).(blob => { の ( の部分にSyntaxerrorが起こっていると出たのですが、解決法というのはないものでしょうか。
guest

0

sendMessageでbackgroundスクリプトにエレメントを送信しているようですが、エレメントは送信できません。
やるとすれば、contentスクリプトでbase64に変換してから、base64をbackgroundスクリプトに送信するようすればいいのではないでしょうか。

投稿2017/01/11 03:55

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mansei2010

2017/01/11 06:12

ご回答有難う御座います。 あなた様の助言からbase64に変換して送信しようと思うのですが、File APIとtoDataURLのどちらで変換する方が良いのでしょうか。
guest

0

バグの内容としては、drawImageの部分で起こっており、かつbase64の文字列にimgタグで取得したデータが変換されていないというものです。

昨日も同様の回答をしましたが、

現在検索が行われずドロップした画像のみを出力するページとなってしまっています。

これはドラッグアンドドロップの処理がうまく行われていないためと思われます。
まずドラッグアンドドロップ処理を作ってください。
もしもあるのでしたら、そのコードを記述してください。

投稿2017/01/11 02:46

namimon

総合スコア726

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mansei2010

2017/01/11 05:59

ご回答有難う御座います。 ですが、今回作成しているプログラムはブラウザのタブの部分にドラッグアンドドロップをした後の動きとなっていますので、ドラッグアンドドロップの処理を記述してもスルーされてしまいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問