canvas被下载时怎么设置保存成的图片的名字？

Question

上面是在网页上的一个canvas，如下所示。

鼠标右击可以保存，但保存时的名字默认显示的是如下
我怎么可以控制名称里的“下载”显示成我想叫他显示的？

Answer 1

无法直接定义canvas的右键保存名，但是可以通过js脚本下载，重命名

// 获取 Canvas 对象
var canvas = document.getElementById('myCanvas');

// 创建链接元素
var link = document.createElement('a');

// 将 Canvas 转换成 data URL
var dataURL = canvas.toDataURL('image/png');

// 设置链接的下载属性
link.download = 'my_custom_filename.png';
link.href = dataURL;

// 模拟点击链接进行下载
link.click();

Answer 2

本来想着试试浏览器是否直接支持，但是试了几个相关的都不行。

那么我说几个替代方案

1. 存服务端，然后 img 渲染走下载。
2. 不存服务，想走 img 渲染下载。通过 sw 拦截。（不确定可以不可以）
3. 走 a 标签的 download 属性。可以通过拦截右键，然后触发 a 标签的下载

<canvas 
    src="abc.jpg"
    alt="https://www.lilnong.top" 
    title="https://www.lilnong.top" 
    download="https://www.lilnong.top" 
    id="canvas"></canvas>
<img 
    id="img" 
    alt="alt"
    title="title"
    download="download"
    name="name"
>

---------------------------

<a id="alink" download="alink.png" target="_blank">
    alink
</a>

<script>
    ctx = canvas.getContext('2d');
    ctx.fillText('https://www.lilnong.top', 50, 50);

    alink.href = img.src = canvas.toDataURL()
</script>

测试代码