直接將下面函數(shù)復(fù)制到 項(xiàng)目中，傳入要保存的 url, 以及要設(shè)置的文件名字，即可。

// 現(xiàn)在 html中 定義一個(gè)容器,如 <div id="qrcode"></div>downloadByAxios(url, name) { // 圖片地址 ，文件名document.getElementById('qrcode').innerHTML = ''; // 先給這個(gè)dom元素清空內(nèi)容，防止污染canvas// 下載圖片地址和圖片名const image = new Image();// 解決跨域 Canvas 污染問題image.setAttribute('crossOrigin', 'anonymous');image.onload = function () {const canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext('2d');context.drawImage(image, 0, 0, image.width, image.height);const url = canvas.toDataURL('image/png'); // 得到圖片的base64編碼數(shù)據(jù)const a = document.createElement('a'); // 生成一個(gè)a元素const event = new MouseEvent('click'); // 創(chuàng)建一個(gè)單擊事件a.download = name || 'photo'; // 設(shè)置圖片名稱a.href = url; // 將生成的URL設(shè)置為a.href屬性a.dispatchEvent(event); // 觸發(fā)a的單擊事件};image.src = url;},

總結(jié)

以上是生活随笔為你收集整理的js vue将后台返回的url图片地址以图片形式保存到本地的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。