请问下载的图片在不需要人为设置的情况下如何重命名?

Question

比如说,我利用a标签的download属性下载了一张图片，然后图片的名字是thumbnail_160.jpg，var a = $("<a>").attr("href", "http://oss-cn-shanghai.aliyuncs.com/j3ddev/contents/2a547c60-01e6-492c-b9c7-8e2cd72715b8/thumbnail_160.jpg").attr("download", ".jpg").appendTo("body");a[0].click();这个链接是某条数据的一个属性值，这时候我想下载的图片名字与这条数据某属性值一样,且不需要我人为设置输入，有什么办法吗？

Answer 1

如果使用a标签的download属性来下载文件，要达到你想要的效果，那么首先你要把属性值取出来。然后就是下载时的命名问题。

<a href="xxx.jpg" download="myname.jpg">下载</a>

如果你下载时要使用指定的名字，其实像你这样的和我上面示例中的情况其实都是不行的，文件还是按原来的名字保存，因为文件原本就有名字。

那么何时会生效呢？如果href链接的文件没有文件名（如blob对象，或base64编码的图片），由于其自身没有名字，所以浏览器会使用download属性的值作为文件名。

所以你需要把图片转换一下。你可以用new image()来加载这个图片，之后使用canvas绘制，最后使用canvas.toDataURL()或canvas.toBlob()来转换。

把图片转换后的结果放到a标签的href里，要使用的名字放到download属性里，就可以了。