要用JS解決跨域問題,才可以設定下載檔案名稱
<img src="https://api.qrserver.com/v1/create-qr-code/?size=500x500&qzone=4&data=12312" alt="" id="qr-code" style="display:none" />
<button type="button" onclick="downloadQRCode()">下載QR Code</button>
<script>
function downloadQRCode() {
const qrCodeImage = document.getElementById("qr-code");
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const img = document.createElement("img");
//當圖像加載完成時,onload事件將被觸發
img.onload = () => {
//使用canvas元素來繪製QR code
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
const url = canvas.toDataURL(); //將圖像轉換為DataURL格式
const a = document.createElement("a"); //創立新的a元素並設定其屬性
a.href = url;
a.download = "可設定不同名稱.png";
a.click(); //模擬click事件, 將會下載圖片至本機中
};
img.crossOrigin = "anonymous"; //防止跨域請求被阻止
img.src = qrCodeImage.src;
}
</script>
參考網址:
https://medium.com/@pan913063/%E8%A7%A3%E6%B1%BAhtml-a-href-download-%E7%84%A1%E6%B3%95%E7%9B%B4%E6%8E%A5%E4%B8%8B%E8%BC%89%E6%AA%94%E6%A1%88%E8%87%B3%E6%9C%AC%E6%A9%9F%E5%95%8F%E9%A1%8C-c4a433528b4c
本來想說用<a download="圖片檔名.jpg">
結果跨網域不行
只能用JS下載了
更新:
參考 @純真 大大的方法,換一下思路
<a href="" id="button" download="可設定不同名稱.png">
<canvas id="qr-code"></canvas>
</a>
<script>
var canvas = document.getElementById("qr-code");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
document.getElementById("button").href = canvas.toDataURL();
};
img.src = 'https://api.qrserver.com/v1/create-qr-code/?size=500x500&qzone=4&data=12312';
img.crossOrigin = "anonymous"
</script>
請問您的環境是
如果是 Windows 可以使用 Powershell
的 Invoke-WebRequest
並指定 -OutFile
參數改變檔案名稱
如果是 Unix-like 的系統的話 curl 和 wget 都能在下載時
選擇指定不同的檔案名稱