Question

我正在尝试在我的网站上编写一个小的图像代理脚本，因为imgur在我当前的网络上被阻止，并且希望能够从Stack Overflow中看到图像。

我的个人网站上有以下代码：

$image = $_GET['url'];
$imageData = base64_encode(file_get_contents($image));
echo '<img src="data:image/jpeg;base64,'.$imageData.'">';

这应该获取图像的URL，让我的服务器下载该图像，然后将其单独显示在页面上。

例如，这很有用，如果我尝试代理我的Stack Overflow帐户个人资料图片，则可以使用this link，如您所见，在页面上显示图片非常好。即使在受阻的网络上，我也可以看到此图像。

现在，我创建了一个用户脚本，该脚本会自动横切已加载页面上的所有图像和链接，并使用代理版本切换其源/参考链接。

这是对我不起作用的部分，如果提供代理链接，则图像不会显示在元素中。

这是我的用户脚本：

    function runProxier() {
        $('img').each(function() {
            var image = $(this);
            if(!image.data('image_proxier_converted')) {
                image.attr('src', getProxyLink(image.attr('src')));
                image.attr('data-image_proxier_converted', 1);
            }
        });
        $('a').each(function() {
            var link = $(this);
            if(!link.data('image_proxier_converted')) {
                link.attr('href', getProxyLink(link.attr('href')));
                link.attr('data-image_proxier_converted', 1);
            }
        });
    }

    function getProxyLink(givenLink) {
        if (givenLink) {
            if (replace_from.some(function(v) {
                    return givenLink.indexOf(v) >= 0;
                })) {
                return proxy_link + encodeURI(givenLink);
            } else {
                return givenLink;
            }
        }
    }

在我的示例个人资料图片上运行时，链接已正确转换。

<img src="//grumpycrouton.com/other/image_proxy/?url=https://i.stack.imgur.com/YkRwP.png?s=48&amp;g=1" alt="" width="24" height="24" class="-avatar js-avatar-me" data-image_proxier_converted="1">

但是图像没有显示，但在我的菜单栏中仍然空白。

为什么我的图片没有显示？

Answer 1

我可以通过在服务器上使用以下代码来解决此问题：

<?php

    if(!isset($_GET['url'])) {
        die('No image given');
    }

    header('Content-Type: image/jpeg');
    readfile($_GET['url']);

?>

header()呼叫告诉客户端它应该提供图像，readfile()将下载（但不存储在我的服务器上）并显示图像。

我还注意到我的URL编码不正确，无法发送到服务器，所以我这样修改了用户脚本：

    function getProxyLink(givenLink) {
        if (givenLink) {
            if (replace_from.some(function(v) {
                    return givenLink.indexOf(v) >= 0;
                })) {
                var new_link = proxy_link + encodeURIComponent(givenLink);
                console.log(new_link);
                return new_link;
            } else {
                return givenLink;
            }
        }
    }

使链接页面上的图像显示在图像源中

1 个答案: