一個圖片url訪問后直接下載怎樣實現(xiàn)

先看代碼

downloadIamge(imgsrc, name) {//下載圖片地址和圖片名

let image = new Image();

// 解決跨域 Canvas 污染問題

image.setAttribute("crossOrigin", "anonymous");

image.onload = function() {

let canvas = document.createElement("canvas");

canvas.width = image.width;

canvas.height = image.height;

let context = canvas.getContext("2d");

context.drawImage(image, 0, 0, image.width, image.height);

let url = canvas.toDataURL("image/png"); //得到圖片的base64編碼數(shù)據(jù)

let a = document.createElement("a"); // 生成一個a元素

let event = new MouseEvent("click"); // 創(chuàng)建一個單擊事件

a.download = name || "photo"; // 設置圖片名稱

a.href = url; // 將生成的URL設置為a.href屬性

a.dispatchEvent(event); // 觸發(fā)a的單擊事件

};

image.src = imgsrc;

},

JavaScript 下載文件

fetch('http://somehost/somefile.zip').then(res => res.blob().then(blob => {

var a = document.createElement('a');

var url = window.URL.createObjectURL(blob);

var filename = 'myfile.zip';

a.href = url;

a.download = filename;

a.click();

window.URL.revokeObjectURL(url);

}))

你可能會問，何必這么麻煩呢？直接寫成下面這樣不就好了：

嗯，對于這種寫法，我只能說，你做的太正確了！如果你要下載的是已經(jīng)存在服務器上面的靜態(tài)文件的話，那么寫成這樣是最方便的。瀏覽器會幫你處理整個下載過程，不需要你干涉。如果你用 blob 的方式來下載文件的話，會有下面這些限制的：

限制一：不同瀏覽器對 blob 對象有不同的限制

Browser

Constructs as

Filenames

Max Blob Size

Dependencies

Firefox 20+

Blob

Yes

800 MiB

None

Firefox < 20

data: URI

No

n/a

Chrome

Blob

Yes

500 MiB

None

Chrome for Android

Blob

Yes

500 MiB

None

Edge

Blob

Yes

?

None

IE 10+

Blob

Yes

600 MiB

None

Opera 15+

Blob

Yes

500 MiB

None

Opera < 15

data: URI

No

n/a

Safari 6.1+*

Blob

No

?

None

Safari < 6

data: URI

No

n/a

限制二：構建完 blob 對象后才會轉(zhuǎn)換成文件

這一點限制對小文件(幾十kb)可能沒什么影響，但對稍微大一點的文件影響就很大了。試想，用戶要下載一個 100mb 的文件，如果他點擊了下載按鈕之后沒看到下載提示的話，他肯定會繼續(xù)按，等他按了幾次之后還沒看到下載提示時，他就會抱怨我們的網(wǎng)站，然后離開了。

然而事實上下載的的確確發(fā)生了，只是要等到下載完文件之后才能構建 blob 對象，再轉(zhuǎn)化成文件。而且，用戶再觸發(fā)多幾次下載就會造成一些資源上的浪費。

因此，如果是要下載大文件的話，還是推薦直接創(chuàng)建一個 標簽拉~

寫 html 也好，寫 JavaScript 動態(tài)創(chuàng)建也好，用自己喜歡的方式去創(chuàng)建就好了。

## 為什么要用 JavaScript 下載文件

好拉，說了半天，其實我們一直說的都是：「不要用 JavaScript 下載文件拉，限制多多，又不好用，直接用 html 就好拉，簡單方便又快捷」這個論調(diào)。

事實上也確實如此，但有些時候我們確實需要通過 JavaScript 來做一些預處理。

權限校驗

有些時候，我們需要對下載做一些限制，最常見的就是權限校驗了，如檢查該用戶是否有下載的權限，是否有高速下載的權限等等。這時候，我們可以利用 JavaScript 做一些預處理。如：

fetch('http://somehost/check-permission', options).then(res => {

if (res.code === 0) {

var a = document.createElement('a');

var url = res.data.url;

var filename = 'myfile.zip';

a.href = url;

a.download = filename;

a.click();

} else {

alert('You have no permission to download the file!');

}

});

在這個例子里面，我們沒有用 blob 來構建 URL，而是通過后端服務器來計算出用戶的下載鏈接，然后再利用之前提到的動態(tài)創(chuàng)建 標簽的方式來實現(xiàn)下載，很簡單吧！

總結(jié)

以上是生活随笔為你收集整理的php 实现跨站下载图片,一个图片url访问后直接下载怎样实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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