Question

我正在尝试修改特定图片，因为网站显示的分辨率低于原始文件，并且还替换了该图片的链接href - 将某些内容附加到该链接的末尾以使其可下载

特别是网站，当你右键单击/保存（文件另存为content.jpg）时，没有正确地将有关图像的信息发送到浏览器，但它们有一个下载链接，可以正确地将文件名发送到浏览器（它只是将&dl=1追加到URL的末尾）

我找到了一些示例代码，并对其进行了修改以执行我需要的img src更改，但是在链接href上有问题。

页面上有许多类型的链接，因此需要更换特定的URL：

遍布整个页面的可点击链接（请勿触摸）：
  example.com/view/UNIQUEID

Image Src（低分辨率）：example.com/subdir/ 预览？page = UNIQUEID

Image Src（Original Res）：example.com/subdir/ 内容？page = UNIQUEID

我只希望将图像源从content/preview更改为content/content以在浏览器中显示完整分辨率图像，还添加一个href链接（这可以从img src复制为相同的链接，但也会在不影响任何其他链接的情况下附加内容。）

这是我到目前为止用于替换特定img src的内容：

image = document.getElementsByTagName("img");
for (i = 0; i < image.length; i++) if (image[i].parentNode.href) {

    //Remove onclick attribute, cancelling their own Image Viewer
    image[i].parentNode.removeAttribute('onclick'); 

    //Replace regular sized preview image, with the full sized image
    image[i].src = image[i].src.replace('example.com/subdir/preview?page=','example.com/subdir/content?page=');

    image[i].parentNode.removeAttribute('width');
    image[i].parentNode.removeAttribute('height');  
}

现在我发现添加了

image[i].parentNode.href = image[i].src + '&dl=1';

在我当前脚本的最后工作。但它会影响每一张图像，所以它会破坏很多其他的东西。

任何建议只需将＆amp; dl = 1附加到现在替换的'subdir / content？page = UNIQUEID'href链接的末尾？

TLDR：
期待改变：

<a href="http://example.com/subdir/content?page=12345" onclick="imageviewer.open(); return false;">
  <img src="http://example.com/subdir/preview?page=12345&filename=this+is+the+filename.jpg">
</a>

成：

<a href="http://example.com/subdir/content?page=12345&dl=1">
  <img src="http://example.com/subdir/content?page=12345&filename=this+is+the+filename.jpg">
</a>

Answer 1

此问题几乎与以下内容重复：How to relink/delink image URLs to point to the full image?

诀窍是使用querySelectorAll() （或jQuery）来微调处理哪些图片。

另外，我建议不要更改图像源（保持页面快速并节省带宽），而只是重写链接。重写链接后，您可以右键单击以保存您感兴趣的图片的更大版本。或者，您可以使用the excellent DownThemAll extension按链接批量下载图片。

在您的情况下，这样的代码应该有效：

＆＃13;

var thumbImgs   = document.querySelectorAll ("a > img[src*='subdir/preview?']");

for (var J = thumbImgs.length-1;  J >= 0;  --J) {
    var img     = thumbImgs[J];
    var link    = img.parentNode;

    var lnkTarg = link.href + "&dl=1";
    link.href   = lnkTarg;
    link.removeAttribute ('onclick'); 

    //-- Not recommnded to change thumbnail...
    //var imgTarg = img.src.replace (/\/preview/, "/content");
    //img.src     = imgTarg;
}

＆＃13;

<a href="http://example.com/subdir/content?page=12345" onclick="alert('I shouldn\'t fire on click!'); return false;">
    <img alt="Target img 1" src="http://example.com/subdir/preview?page=12345&filename=filename_1.jpg">
</a><br>
<a href="http://example.com/subdir/content?page=aaa" onclick="alert('I shouldn\'t fire on click!'); return false;">
    <img alt="Target img 2" src="http://example.com/subdir/preview?page=aaa&filename=filename_2.jpg">
</a><br>
<a href="http://example.com/some/random/link" onclick="alert('I should still fire on click!'); return false;">
    alt="Img shouldn't be altered" <img src="http://example.com/some/random/image.jpg">
</a>

＆＃13;

Greasemonkey脚本重写和附加到特定的URL？

1 个答案: