こんにちは。体調も仕事も趣味のＰＧもイマイチな１週間でした。とりあえず、最近は週１でブログを更新する事を目標にしているので、何とかあげよう。。さて、気を取り直して、失敗レシピはコチラです（笑）
手順
- 画像をアップロードしてサーバーで加工してダウンロードできるAPIを用意
- APIを公開(私はHeroku)
- Chromeで右クリックメニューを選択したら画像アップして加工後の画像を表示する
どんなAPIでも良いのですが、ちょうど仕事で斜めのドキュメントが移った写真がアップされて、めっちゃ見にくかったので、補正するAPIにしました。APIも完成していないのですがそれは置いておいて、やりたい事が伝わるように。 こんな斜めのレシートを↓ 
右クリックしたらメニューを出して↓ 
補正して表示します↓ 
ちょっと、、向きだけだけど。今日のテーマはChrome拡張機能作成という事で。
画像をダウンロードする
chrome.contextMenus.createでコンテキストメニューに追加して、downloadImageUrlで今の画像のURLをblobでダウンロードします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| chrome.contextMenus.create({
"title" : "画像の書類を台形補正",
"type" : "normal",
"contexts" : ["image"],
"onclick":function(info){
downloadImageUrl(info.srcUrl);
}
});
function downloadImageUrl(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.response);
getCorrectImage(xhr.response);
}
};
xhr.send();
}
|
画像をアップして加工画像をダウンロード
先ほどダウンロードした画像データをアップロードした後にダウンロードします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| function getCorrectImage(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'Your APIURL', true);
xhr.responseType = 'blob';
var formData = new FormData() ;
formData.append( "file", blobOrFile, "image.png" );
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.response);
var blob = xhr.response;
if(blob.type.match('image/*')) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(evt) {
var data_url = reader.result;
console.log(data_url);
openImageWindow(data_url);
}
} else {
alert('Error. Not image file.');
console.log('Error. Not image file.');
}
}
};
xhr.send(formData);
}
|
画像のサイズを知るために最初に「img.onload」して「chrome.windows.create」をしています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| function openImageWindow(data_url) {
var img = new Image();
img.src = data_url;
img.onload = function() {
var createData,
popupBorder = {width:16, height:38};
createData = {
url:data_url,
type:'popup',
width:img.naturalWidth + popupBorder.width,
height:img.naturalHeight + popupBorder.height,
incognito:chrome.extension.inIncognitoContext
};
if (createData.height > screen.availHeight) {
createData.height = screen.availHeight;
createData.width = Math.round(popupBorder.width + (screen.availHeight - popupBorder.height) * img.naturalWidth / img.naturalHeight);
}
if (createData.width > screen.availWidth) {
createData.width = screen.availWidth;
createData.height = Math.round(popupBorder.height + (screen.availWidth - popupBorder.width) * img.naturalHeight / img.naturalWidth);
}
createData.top = Math.round(screen.availHeight / 2 - createData.height / 2);
createData.left = Math.round(screen.availWidth / 2 - createData.width / 2);
createData.url = 'data:text/html,' +
encodeURIComponent(
`CorrectImage`
);
chrome.windows.create(createData, function (window) {
chrome.tabs.executeScript(window.tabs[0].id, {file:'viewWindow.js'}, result => {
const lastErr = chrome.runtime.lastError;
if (lastErr) console.log('tab: ' + window.tabs[0].id + ' lastError: ' + JSON.stringify(lastErr));
});
});
}
}
|
終わりに
Chrome拡張機能を初めて作ったので、いちいち悩みました。そして今もこれがベストなのか疑問です。ただ画像加工をAPI処理にするとこんな感じでChrome拡張機能としても使えるようになるな、と思いました。
