JavaScriptを使用してウェブサイトから画像クライアント側をハードドライブにダウンロードする

Question

現在、自動化されたプロセスで画像をダウンロードするには、JavaScriptやChrome拡張機能に統合できるものを使用してディレクトリ内の特定のフォルダにダウンロードしようとしています。別のプログラムによって処理されます。

対象：添付した画像にイメージタグのハイライト部分がありますが、これまでダウンロードしようとしていましたが、テストとしてローカルストレージにダウンロードする方法しか見つかりませんでした。

これは私が現在ターゲットとすることができるかどうかを確認するためのテストに使用しているコードです。

// Get a reference to the image element 
var captchaImg = document.getElementById("captchaImg"); 

// Take action when the image has loaded 
captchaImg.addEventListener("load", function() { 
var imgCanvas = document.createElement("canvas"), 
    imgContext = imgCanvas.getContext("2d"); 

// Make sure canvas is as big as the picture 
imgCanvas.width = captchaImg.width; 
imgCanvas.height = captchaImg.height; 

// Draw image into canvas element 
imgContext.drawImage(captchaImg, 0, 0, captchaImg.width, captchaImg.height); 

// Get canvas contents as a data URL 
var imgAsDataURL = imgCanvas.toDataURL("image/png"); 

// Save image into localStorage 
try { 
    localStorage.setItem("captchaImg", imgAsDataURL); 
} 
catch (e) { 
    console.log("Storage failed: " + e); 
} 
}, false); 

Chromeの拡張機能のための私の計画は、私は許可が画像をダウンロードして処理するために使用される最終スクリプトから必要とされている、そのようなものを知っていれば、あまりにもマニフェストとすべての残りの部分を書きです。

目標：

ハードドライブに画像をダウンロード

ダウンロードはクロムから実行されるコード

を自動化された特定のフォルダに

を画像をダウンロード内線番号

Answer 1

canvasを使用する必要はありません。回避策は、chrome.downloads APIを使用してください。

手順は次のとおりです。

1. は、画像のアドレスを取得するためにchrome.tabs.executeScriptを呼び出し、Background page/Event pageでmanifest.json

2. に提出permissionsためdownloadsとhost permissionsを宣言します。

   このメソッドは、デフォルトでカレントウィンドウのアクティブなタブで実行されます。このメソッドは、スクリプトを実行するタブのIDを明示的に設定できます。

3. イメージアドレスを取得したら、chrome.downloads.downloadに電話してイメージをダウンロードしてください。

サンプル実装：

chrome.tabs.executeScript(null, { code: 'document.getElementsByTagName("img")[0].src' }, function (results) { 
    var address = results[0]; 
    console.log(address); 
    chrome.downloads.download({ 
     url: address, 
     filename: 'YOUR/FILE/PATH/HERE', 
    }); 
});