Javascript 使用特定名称制作Firefox和Chrome下载图像

给定<代码>https://www.example.com/image-list：

...
<a href="/image/1337">
  <img src="//static.example.com/thumbnails/86fb269d190d2c85f6e0468ceca42a20.png"/>
</a>
<a href="//static.example.com/full/86fb269d190d2c85f6e0468ceca42a20.png"
   download="1337 - Hello world!.png">
  Download
</a>
...

。。。
...

这是一个用户脚本环境，因此我无法访问服务器配置。因此：

我不能让服务器接受像

https://static.example.com/full/86fb269d190d2c85f6e0468ceca42a20 -1337年的今天，世界你好！。png

我无法配置跨源资源共享

www.example.com

和

static.example.com

通过设计用CORS墙隔开

当用户单击“下载”链接时，如何使用建议的文件名“1337-Hello world！.png”使Firefox和Chrome显示“另存文件为”对话框？

经过一些失败和谷歌搜索，我发现了这些问题：

Firefox完全忽略了某些图像MIME类型上存在的

download

属性

Firefox完全忽略了跨站点链接中存在的

download

属性

Chrome完全忽略了跨站点链接的

下载
属性的值

所有这些观点对我来说都没有任何意义，看起来都像是“让我们对功能设置随机的非感官限制”，但我必须接受它们，因为这是我的环境

有没有办法解决这个问题

---

背景：我正在为使用MD5哈希作为文件名的图像板编写一个用户脚本。我想使用用户友好的名称更容易保存。任何能让我更接近这一点的东西都会有帮助

我想我可以通过使用blob的对象url和带有被黑客攻击的CORS头的本地代理绕过这些限制，但是这种设置显然是不合理的。通过画布保存也可以（在这种情况下，图像也受CORS“保护”吗？），但如果JPEG文件不好，则会强制进行双重有损压缩或有损到无损转换。

尝试以下操作：

首先将外部映像获取到服务器

从服务器返回获取的映像

使用

下载
名称和
动态创建一个锚。单击（）
虽然上面只是一个很短的提示列表。。。尝试一下：

在
www.example.com
上放置带有以下内容的
fetch image.php
：

<?php
$url = $_GET["url"];                     // the image URL
$info = getimagesize($url);              // get image data
header("Content-type: ". $info['mime']); // act as image with right MIME type
readfile($url);                          // read binary image data
die();

这是：

function fetchImageAndDownload (e) {
    e.preventDefault(); // Prevent browser's default download stuff...

    const url = this.getAttribute("href");       // Anchor href 
    const downloadName = this.download;          // Anchor download name

    const img = document.createElement("img");   // Create in-memory image
    img.addEventListener("load", () => {
        const a = document.createElement("a");   // Create in-memory anchor
        a.href = img.src;                        // href toward your server-image
        a.download = downloadName;               // :)
        a.click();                               // Trigger click (download)
    });
    img.src = 'fetch-image.php?url='+ url;       // Request image from your server

}

[...document.querySelectorAll("[download]")].forEach( el => 
    el.addEventListener("click", fetchImageAndDownload)
);

您最终应该会看到下载的图像

1337年的今天，世界你好！。巴布亚新几内亚

而不是像这样的情况

注意：我不确定同步请求对
fetch image.php的影响-确保测试，测试。
您可以尝试这样做


var downloadHandler=function（）{
var url=this.dataset.url；
var name=this.dataset.name；
//通过这种方式，您可以自动将任何支持的图像类型转换为其他图像类型，即目标图像格式
var mime=this.dataset.type | |“image/jpg”；
var image=新图像（）；
//我们需要图像和画布将url转换为blob。
//由于交叉原点模式，图像比通过XHR请求接收blob更好
image.crossOrigin=“匿名”；
image.onload=函数（oEvent）{
//在画布上绘制图像
var canvas=document.createElement（'canvas'）；
canvas.width=this.naturalWidth；
canvas.height=this.naturalHeight；
canvas.getContext（'2d'）.drawImage（this，0，0，canvas.width，canvas.height）；
//从画布获取图像作为blob
var binStr=atob（canvas.toDataURL（mime.split（'，'）[1]），
len=箱子长度，
arr=新的UINT8阵列（len）；
对于（变量i=0；i


下载
我可以使用另存为输入字段重命名base64图像

我认为最好的办法是创建自己的“另存为”框。当用户单击“下载”时，显示“文件名：{input field}”和保存按钮。让保存按钮更改文件名，然后调用下载功能


函数save2（）{
var gh="数据：图片/png；base64，IVborw0kgoaaaansuhueugaaaaaacacamaad04jh5aaaaagxrfwhrtb2z0d2fyzqbbzg9izbwfnzvjlywr5ccllpaaanqtfrffaaaapt09pt09pt09pt09pt09pt09pt09pt09pt09pt09pt09pt09evttbaab0uk5taa8flz9px29/j5+v8/f7/rfiy4aaarsbvzqdqdraaqdq/3/tezjejjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj2.GvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvKSPOLD9M+dCVSWpDuln1H2.在这方面，我们可以用一种简单的方式来做一个研究。2）在这方面的研究。2）在这方面的研究。2）在这方面，我们的研究是一个非常简单的（2）在一个关于一个研究的（2）在一个研究中，在一个研究中，在一个研究中，在一个研究中，在一个研究中，在一个研究中，他们在一点上，在一点上，在一点上，在一点上，在一点上，在一点，在一点上，在一点上，在一点，在一点上，或者在一点上，或者在一点上，在一点上，或者在一个关于一个关于一个关于某一个研究，或者或者或者或者或者或者或者或者或者或者或者或者或者在某一个关于某一个关于某一个关于某一个研究的，或者或者或者或者某某一个研究的，或者或者或者或者或者某一个研究的，或者或者或者或者osriAbr9ZktEQONCm3yAD5EEU833YWLGSA1PD5UWGAGZ4DAIW0EAEQBS/CTAZI2O8VNYYAIWP2QAHSCZYGr6xD5xTgPtWgEbZB+I0Xlj+Oajo2kCEK+GrQfG2SwWwWwWwWwW0W0W0W0W0W0W+EA1KpPBoAl2EzM7VnYZZYW7V33NEFUI15B6B6U7+AudmGKKKKK9RlizPhiIllB7W0W0W0W0W7W0W0W0W0W0W0W0W0W0W0W0W0W0W
function fetchImageAndDownload (e) {
    e.preventDefault(); // Prevent browser's default download stuff...

    const url = this.getAttribute("href");       // Anchor href 
    const downloadName = this.download;          // Anchor download name

    const img = document.createElement("img");   // Create in-memory image
    img.addEventListener("load", () => {
        const a = document.createElement("a");   // Create in-memory anchor
        a.href = img.src;                        // href toward your server-image
        a.download = downloadName;               // :)
        a.click();                               // Trigger click (download)
    });
    img.src = 'fetch-image.php?url='+ url;       // Request image from your server

}

[...document.querySelectorAll("[download]")].forEach( el => 
    el.addEventListener("click", fetchImageAndDownload)
);

chrome.downloads.onDeterminingFilename.addListener(function(item,suggest){

 suggest({filename:"downloads/"+item.filename}); // suggest only the folder

 suggest({filename:"downloads/image23.png"}); // suggest folder and filename

});

Content-Disposition: attachment; filename="filename.jpg"

<a href="/image/1337">
  <img src="//static.example.com/thumbnails/86fb269d190d2c85f6e0468ceca42a20.png"/>
</a>
<a href="//static.example.com/full/86fb269d190d2c85f6e0468ceca42a20.png?download=true" target="_blank" title="1337 - Hello world!.png">
  Download Full size
</a>