當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

网络图片转换为文件类型（File）

發(fā)布時(shí)間：2023/12/3 综合教程 32 生活家

生活随笔收集整理的這篇文章主要介紹了网络图片转换为文件类型（File）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

以下的圖片轉(zhuǎn)文件如果涉及跨域的問題，需要服務(wù)端支持圖片跨域（常見的就是用了OSS存儲圖片的，需要在控制臺開啟允許跨域請求）
如果oss控制臺已經(jīng)開了允許跨域依然是偶爾出現(xiàn)報(bào)錯(cuò)的話，可以在圖片后面帶一個(gè)隨機(jī)數(shù)/時(shí)間戳即可解決，譬如：'http://xxxx.jpg?t'=+new Date().getTime()

一、普通圖片連接轉(zhuǎn)化為文件實(shí)現(xiàn)

這邊用一張 gif 圖來實(shí)現(xiàn)

1、圖片鏈接轉(zhuǎn)base64

利用canvas轉(zhuǎn)換
限制：只能轉(zhuǎn)化為普通的jpg/png圖片。無法轉(zhuǎn)化gif圖

const imgToBase64 = (url,cb) => {var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d'),img = new Image;img.crossOrigin = 'Anonymous';img.onload = function () {canvas.height = img.height;canvas.width = img.width;ctx.drawImage(img, 0, 0);var dataURL = canvas.toDataURL('image/png');cb && cb(dataURL);canvas = null;};img.src = url;
}// 執(zhí)行
imgToBase64('https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif',base =>{console.log(base) // 轉(zhuǎn)換后的base64圖片編碼
})

利用ajax轉(zhuǎn)換

限制: 1、依賴JQ 2、XMLHttpRequest Level 2才支持設(shè)置響應(yīng)數(shù)據(jù)類型為blob格式 3、圖片可能會設(shè)計(jì)跨域問題
優(yōu)點(diǎn)：可以轉(zhuǎn)換gif等任意圖片類型

 $.ajax('https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif', {xhrFields: {responseType: 'blob' // 指定響應(yīng)數(shù)據(jù)類型為blob格式}}).then(blob => {let reader = new FileReader();reader.onloadend = function () {console.log(reader.result); // 轉(zhuǎn)換后的base64圖片編碼};reader.readAsDataURL(blob);}).catch(console.error);

利用fetch轉(zhuǎn)換

限制：圖片可能會存在跨域請求問題
優(yōu)點(diǎn)：異步交互新星
與ajax請求類似

fetch('https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif').then(respone => respone.blob())    // 將響應(yīng)體轉(zhuǎn)換成blob格式數(shù)據(jù).then(blob => {let reader = new FileReader(); reader.onloadend = function(){console.log(reader.result);   // 轉(zhuǎn)換后的base64圖片編碼};reader.readAsDataURL(blob);}).catch(console.error);

2、base64轉(zhuǎn)化為文件類型

通過上面的方法已經(jīng)得到了想要的圖片的base64類型
接下來就是需要把 base64 再次轉(zhuǎn)化為文件。用于提交等操作

const base64toFile = (base, filename) => {const arr = base.split(',');const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]);const n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}//轉(zhuǎn)換成file對象return new File([u8arr], filename, { type: mime });
}

完整的轉(zhuǎn)化代碼（以ajax請求轉(zhuǎn)化為例）：
案例中使用了 promise 進(jìn)行再次封裝了一下。讓代碼看起來更加清晰，需要一定的es6基礎(chǔ)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><script>/*** @ ajax 請求獲取base64格式* @param {String}    url 需要請求的圖片的連接* @return {Promise}  promise對象*/const getBase = (url) => {return new Promise((resolve, reject) => {$.ajax(url, {xhrFields: {responseType: 'blob', // 指定響應(yīng)數(shù)據(jù)類型為blob格式},}).then(blob => {let reader = new FileReader();reader.onloadend = function () {resolve(reader.result)};reader.readAsDataURL(blob);}).catch(error => {reject(error)});})}/*** @ base64轉(zhuǎn)化為對應(yīng)的文件* @param {String}  base  base64字符 * @param {String}  name  文件名稱* @return: {file} 返回的文件*/const base64toFile = (base, filename) => {const arr = base.split(',');const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]);const n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}//轉(zhuǎn)換成file對象return new File([u8arr], filename, { type: mime });}/*** @ 圖片轉(zhuǎn)化為文件類型* @param {String} url  請求圖片的地址 * @param {String} name 轉(zhuǎn)換后的文件名稱* @return: {file}*/const imgUrlToFile = async (url, name = 'file') => {let fileObj = {};await getBase(url).then(base => {fileObj = base64toFile(base, name);})return fileObj;}imgUrlToFile('https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif','gif文件').then(fileObj => {console.log(fileObj); // 打印出來的file類型})</script>
</body>
</html>

打印結(jié)果：

網(wǎng)絡(luò)圖片轉(zhuǎn) base64 和轉(zhuǎn)化為文件類型，大功告成！

參考文章：

https://blog.csdn.net/Jioho_chen/article/details/88537389

總結(jié)

以上是生活随笔為你收集整理的网络图片转换为文件类型（File）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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