javascript - 如何使用标签下载大尺寸图像

Question

我正在尝试连接到数据库并从那里查看图片。尽管显示了所有图片，但无法下载它们。要下载，我使用标签。

这是我的代码。

while($row = mysqli_fetch_array($result))  
                    {  
                         echo '  
                              <tr>  
                                   <td align="center"> 
                                        <a href="data:image/jpeg;base64,'.base64_encode($row['Pilt'] ).'" download>
                                            <img src="data:image/jpeg;base64,'.base64_encode($row['Pilt'] ).'" width=400 class="img-thumnail" />
                                        </a>
                                   </td>  
                              </tr>  
                         ';  
                    }

这是我获取图片的数据库的一小部分。 /image/cERJb.jpg 。所以我注意到只下载了一张照片，其大小为 150.4KiB。

我希望通过单击图像(任何大小)来下载它。现在，当我单击图像时出现这样的错误 /image/6ZC5K.jpg而我希望看到这样的东西 /image/cX2cv.jpg 。我将非常感谢任何帮助。

Answer 1

我建议您停止打印大量大图像，这样它们将被硬编码在 HTML 代码中，并一次全部下载到浏览器的缓存中，下载 2 次(3 次，包括点击)。这会浪费 RAM 和带宽。您遇到的网络错误可能是由于链接中的 href 尺寸异常大造成的(在您的浏览器中甚至可能看起来有点像恶意软件)。

相反，您希望首先在 PHP 脚本上动态提供这些图像(通过将 header 设置为 'Content-Type: image/png' 并打印从数据库获取的图像内容)并提供脚本的直接 URL。

此示例的工作方式与屏幕截图中所述相同，我指出您应该在何处替换 SQL 查询以获取图像:

while(for all your rows)  
{  
echo '  
  <tr>  
    <td align="center"> 
      <a href="image.php?id=' . $id . '" download>
        <img src="image.php?link=' . $id . '" width=400 class="img-thumnail" />
      </a>
  </td>  
</tr>';
}

并且 image.php 看起来类似于:

<?php
$id = htmlspecialchars($_GET['id']);
header('Content-Type: image/png');
$content = store the image contents from the BD here ($row['Pilt'] in your code);
echo $content;

请注意，image.php 动态提供图像，并且我应该用 id 来标识每个图像(也许是您的行 id？如果 id 尚未公开，您也可以考虑更安全的标识符) 。这是 PHP 中的常见安全做法，因此您不会向攻击者提供绝对文件路径或其他信息。