javascript - 图片另存为没有后缀名的问题

Question

例如有这么一个图片http://wx.hdmoping.com/Showqrcode/ad90b，在浏览器上另存为时，就会默认以ad90b来命名，没有后缀名，导致存下来的图片打不开。

如何让<img src="http://wx.hdmoping.com/Showqrcode/ad90b">在用户另存为时加上后缀？

Answer 1

如樓上講的，用右鍵另存是作不到這個的，
< a > 在 HTML5 有個 download 属性
照理講

<a id="link" download="test.jpg" href="http://wx.hdmoping.com/Showqrcode/ad90b"> 
    <img src="http://wx.hdmoping.com/Showqrcode/ad90b" />
</a>

就可以了, 不過你伺服器的圖片有指定 HTTP header Content-Disposition ，他優先權較高
所以下面用 cavas 將網址轉成 base64 來避開它

<a id="link" download="test.jpg" href="#"> 
    <canvas id="myCanvas"></canvas>
</a>

function convertImageToBase64(image_url) {
    var img = new Image();
    img.onload = function(){
        if (img.src.indexOf("data:image")<0){
          var canvas = document.getElementById("myCanvas");
          canvas.width = img.width;
          canvas.height = img.height;
          canvas.getContext("2d").drawImage(img, 0, 0);
          img.src = canvas.toDataURL('image/png');
          document.getElementById("link").href = img.src;
        }
    };
    // 跨域
    img.crossOrigin = "Anonymous";
    img.src = image_url;
}
convertImageToBase64('https://static.orderplus.com.tw/img/portraits/15.jpg');

示例: https://jsfiddle.net/cwen0708/gcw9cjLq/

Answer 2

在浏览器中直接点击右键进行另存是做不到你这个需求的。因为浏览器另存图片的时候是直接根据这个图片url的最后一部分来命名的。
所以 http://wx.hdmoping.com/Showqrcode/ad90b 这个图片另存时名称为 ad90b。

解决方案是提供一个下载按钮，让server指定文件名。

Answer 3

在电脑设置里面显示后缀