在用户脚本中使用 XMLHttpRequest 下载图像 [英] Downloading an image using XMLHttpRequest in a userscript
问题描述
首先，SO 上有一个 问题，标题相同，但这不是我要找的它也没有完整的答案.
First of all there is a question with the same title here on SO but its not what I'm looking for and it doesn't have a complete answer either.
所以这是我的问题.假设我有这个指向图像的 URL.
So here's my question. Say I have this URL which directs to an image.
https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg
一旦我把这个参数 ?dl=1 放在 URL 的末尾，它就可以下载了.
Once I put this parameter ?dl=1 to the end of the URL, it becomes downloadable.
https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg?dl=1
我正在尝试通过用户脚本完成此任务.所以我为此使用了 XMLHttpRequest.
I'm trying to do this task through a userscript. So I used XMLHttpRequest for that.
var url = "https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg?dl=1";
var request = new XMLHttpRequest();
request.open("GET", url, false);
request.send(null);
if (request.status === 200)
{
alert(request.statusText);
}
这是一个小提琴.
但它不起作用.
推荐答案
XMLHttpRequest 将无法跨域工作，但由于这是一个 userscript Chrome 现在支持 GM_xmlhttpRequest() 仅在用户脚本中.
XMLHttpRequest will not work cross-domain, but since this is a userscript Chrome now supports GM_xmlhttpRequest() in userscripts only.
这样的事情应该可以工作，注意它是异步的:
Something like this should work, note that it is asynchronous:
GM_xmlhttpRequest ( {
method: 'GET',
url: 'https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg?dl=1',
onload: function (responseDetails) {
alert(responseDetails.statusText);
}
} );
至于获取和使用实际图像数据，这是一个很大的难题.
As for getting and using the actual image data, that is a major pain to work out.
您可以在 Firefox 中使用新的
.responseType = "blob";功能，但 Chrome 尚不支持.
在 Chrome 或 Firefox 中，仅针对同一域，您可以使用新的 XHR2 像这样:
在 jsBin 上查看它的实际效果.
In Chrome or Firefox, for the same domain only, you can use the new XHR2 like so:
See it in action at jsBin.
BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var url = "http://jsbin.com/images/gear.png";
var request = new XMLHttpRequest();
request.open ("GET", url, false);
request.responseType = "arraybuffer";
request.send (null);
if (request.status === 200) {
var bb = new BlobBuilder ();
bb.append (request.response); // Note: not request.responseText
var blob = bb.getBlob ('image/png');
var reader = new FileReader ();
reader.onload = function (zFR_Event) {
$("body").prepend ('<p>New image: <img src="' + zFR_Event.target.result + '"></p>')
};
reader.readAsDataURL (blob);
}
因此，对于 GM 脚本或用户脚本应用程序，我们必须使用自定义 base64 编码方案，例如 "Javascript Hacks:使用 XHR 加载二进制数据".
脚本代码变成这样:
var imgUrl = "http://jsbin.com/images/gear.png";
GM_xmlhttpRequest ( {
method: 'GET',
url: imgUrl,
onload: function (respDetails) {
var binResp = customBase64Encode (respDetails.responseText);
/*-- Here, we just demo that we have a valid base64 encoding
by inserting the image into the page.
We could just as easily AJAX-off the data instead.
*/
var zImgPara = document.createElement ('p');
var zTargetNode = document.querySelector ("body *"); //1st child
zImgPara.innerHTML = 'Image: <img src="data:image/png;base64,'
+ binResp + '">';
zTargetNode.parentNode.insertBefore (zImgPara, zTargetNode);
},
overrideMimeType: 'text/plain; charset=x-user-defined'
} );
function customBase64Encode (inputStr) {
var
bbLen = 3,
enCharLen = 4,
inpLen = inputStr.length,
inx = 0,
jnx,
keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
+ "0123456789+/=",
output = "",
paddingBytes = 0;
var
bytebuffer = new Array (bbLen),
encodedCharIndexes = new Array (enCharLen);
while (inx < inpLen) {
for (jnx = 0; jnx < bbLen; ++jnx) {
/*--- Throw away high-order byte, as documented at:
https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data
*/
if (inx < inpLen)
bytebuffer[jnx] = inputStr.charCodeAt (inx++) & 0xff;
else
bytebuffer[jnx] = 0;
}
/*--- Get each encoded character, 6 bits at a time.
index 0: first 6 bits
index 1: second 6 bits
(2 least significant bits from inputStr byte 1
+ 4 most significant bits from byte 2)
index 2: third 6 bits
(4 least significant bits from inputStr byte 2
+ 2 most significant bits from byte 3)
index 3: forth 6 bits (6 least significant bits from inputStr byte 3)
*/
encodedCharIndexes[0] = bytebuffer[0] >> 2;
encodedCharIndexes[1] = ( (bytebuffer[0] & 0x3) << 4) | (bytebuffer[1] >> 4);
encodedCharIndexes[2] = ( (bytebuffer[1] & 0x0f) << 2) | (bytebuffer[2] >> 6);
encodedCharIndexes[3] = bytebuffer[2] & 0x3f;
//--- Determine whether padding happened, and adjust accordingly.
paddingBytes = inx - (inpLen - 1);
switch (paddingBytes) {
case 1:
// Set last character to padding char
encodedCharIndexes[3] = 64;
break;
case 2:
// Set last 2 characters to padding char
encodedCharIndexes[3] = 64;
encodedCharIndexes[2] = 64;
break;
default:
break; // No padding - proceed
}
/*--- Now grab each appropriate character out of our keystring,
based on our index array and append it to the output string.
*/
for (jnx = 0; jnx < enCharLen; ++jnx)
output += keyStr.charAt ( encodedCharIndexes[jnx] );
}
return output;
}
这篇关于在用户脚本中使用 XMLHttpRequest 下载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
