前端對文件轉換處理的一些常用方法

文章目錄

    • 0，前言
    • 1，將圖片的url網絡鏈接(http://) 轉為base64格式
    • 2，將base64的圖片數據轉換為file文件
    • 3，將以base64的圖片數據轉換為Blob
    • 4，將file文件轉化為base64
    • 5，將file文件轉換為Blob
    • 6，獲取文件(圖片視頻等)的本地內存地址 可以直接訪問
    • 7，視頻截幀（截取視頻的第一幀）
    • 8，總結

本篇文章側重點是對圖片文件的處理，比如url轉file、轉base64；file轉blob類型等。

注意：不要把視頻文件轉成base64，因為base64格式本質是一串很長的字符串，如果在手機端上傳大一點的視頻文件并有轉bsee64的操作，那么就會導致頁面自動刷新、程序崩潰、甚至瀏覽器直接被系統殺掉，因為視頻的base64字符串太大會撐報內存的。

如果上傳視頻文件后，想要對視頻的回顯可以使用createObjectUrl()方法來生成臨時的內存地址來訪問。

0，前言

JavaScript 提供了一些 API 來處理文件或原始文件數據，例如：File、Blob、FileReader、ArrayBuffer、base64 等; 了解它們會對下面的一些方法更容易理解；

推薦閱讀以下博客

（知乎）：1，https://zhuanlan.zhihu.com/p/568915443
（csdn）：2，https://blog.csdn.net/mrlaochen/article/details/120209650

在這里插入圖片描述

1，將圖片的url網絡鏈接(http://) 轉為base64格式

/*** 將圖片的url網絡鏈接(http://) 轉為base64格式* @param {string}*/export function imgUrlToBase64(imgUrl) {return new Promise((resolve) => {var img = new Image();img.src = imgUrl;// 設置圖片跨域屬性img.setAttribute("crossOrigin", "anonymous");// 注意 onload是異步的行為img.onload = () => {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0);var dataURL = canvas.toDataURL("image/png");resolve(dataURL);};});
}

使用如下：

      // 網絡圖片鏈接let finalImg = "https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641";// 開始使用imgUrlToBase64(finalImg).then((res) => {console.log("res:", res);});

2，將base64的圖片數據轉換為file文件

/*** 將以base64的圖片數據轉換為File文件* @param {string}*/
export function base64ToFile(dataUrl, fileName = "myFile") {let arr = dataUrl.split(",");let mime = arr[0].match(/:(.*?);/)[1];let suffix = mime.split("/")[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], `${fileName}.${suffix}`, {type: mime});
}

使用案例：

      <input type="file" />// 原生添加點擊事件document.getElementsByTagName("input")[0].onchange = async function (e) {// 拿到的文件類型let file = e.target.files[0];console.log("file:",file);// 先轉為base64let base64 = await fileTransferBase64(file);// 將以base64的圖片url數據轉換為File文件let file2 = base64ToFile(base64)  ================注意看這行===================console.log("file2:", file2);};

3，將以base64的圖片數據轉換為Blob

/*** 將以base64的圖片數據轉換為Blob * @param urlData 用url方式表示的base64圖片數據*/function base64UrlToBlob(urlData, filename) {try {if (urlData == "" || !urlData) {return console.warn("urlData不存在");}if (!filename) {filename = "myfile";}// 以base64的圖片url數據轉換為Blobvar arr = urlData.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}let bold = new Blob([u8arr], { type: mime });return { bold, filename };} catch (error) {console.warn("base64轉換為Blob出問題了:", error);}}

使用案例：

 	  <input type="file" />// 原生添加點擊事件document.getElementsByTagName("input")[0].onchange = async function (e) {// 拿到的文件類型let file = e.target.files[0];console.log("file:", file);let base64 = await fileTransferBase64(file);// 將以base64的圖片url數據轉換為File文件let blob = base64UrlToBlob(base64);  =======注意這行=========console.log("blob:", blob);};

4，將file文件轉化為base64

  /*** 將file文件轉化為base64 使用promise* @param file 該文件的file類型*/export function fileTransferBase64(file) {try {return new Promise((resolve, reject) => {const reader = new FileReader(); //異步讀取reader.readAsDataURL(file);// 成功和失敗返回對應的信息，reader.result一個base64，可以直接使用reader.onload = (e) => {resolve(e.target.result);};// 失敗返回失敗的信息reader.onerror = (error) => {console.warn('file文件轉化為base64s失敗：', error);reject(error);};});} catch (error) {console.warn('捕獲fileTransferBase64方法的錯誤：', error);}}

使用案例：

轉file類型 涉及到異步 所以要用 promise 來封裝一下；

      <input type="file" />// 原生添加點擊事件document.getElementsByTagName("input")[0].onchange = async function (e) {// 拿到的文件類型let file = e.target.files[0];// 轉file類型 涉及到異步 所以要用 promiselet base64 = await fileTransferBase64(file)console.log("base64:",base64);};

5，將file文件轉換為Blob

  /*** 直接將file數據轉換為Blob * @param file格式*/export function fileToBlob(file) {return new Promise((resolve, reject) => {// FileReader  異步讀取文件const reader = new FileReader();// readAsDataURL: dataurl它的本質就是圖片的二進制數據， 進行base64加密后形成的一個字符串，reader.readAsDataURL(file);// 成功和失敗返回對應的信息，reader.result一個base64，可以直接使用reader.onload = (e) => {let arr = e.target.result.split(',');let mime = arr[0].match(/:(.*?);/)[1];console.log(mime);const blob = new Blob([e.target.result], { type: mime });resolve(blob);};// 失敗返回失敗的信息reader.onerror = (error) => {console.warn('file數據轉換為Blob失敗：', error);reject(error);};});}

使用案例：

轉blob類型也涉及到異步 所以要用 promise 來封裝一下；

      <input type="file" />// 原生添加點擊事件document.getElementsByTagName("input")[0].onchange = async function (e) {// 拿到的文件類型let file = e.target.files[0];// 轉file類型 涉及到異步 所以要用 promiselet blob = await fileToBlob(file);console.log("blob:", blob);};

6，獲取文件(圖片視頻等)的本地內存地址 可以直接訪問

此方法可以用來上傳文件之后的回顯。

  /*** 獲取文件(圖片視頻等)的本地內存地址 可以直接訪問* @param file  該文件的文件流*/export function createObjectURLFun(file) {let url = '';if (window.createObjectURL != undefined) {// basicurl = window.createObjectURL(file);} else if (window.URL != undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}

使用案例：

      // 原生添加點擊事件document.getElementsByTagName("input")[0].onchange = async function (e) {// 拿到的文件類型let file = e.target.files[0];let objectURL = createObjectURLFun(file)console.log("objectURL:", objectURL); //打印結果：  objectURL: blob:null/31fff142-4b83-4749-b71d-a9a4f6c16a43};

7，視頻截幀（截取視頻的第一幀）

常用上傳視頻文件后截取視頻文件的第一幀當做封面使用；

第一種：

/*** 獲取視頻的第一幀 來當做封面  * @param url 視頻的url 可以是一個由window.URL.createObjectURL返回的視頻內存臨時地址（推薦使用）*/
export function getFirstImg(url) {return new Promise(function (resolve, reject) {try {let dataURL = '';let width = '90'; // 單位是px 可以隨意更改let height = '90';let listen = 'canplay';//需要監聽的事件let video = document.createElement('video');let canvas = document.createElement('canvas');//使用嚴格模式('use strict');video.setAttribute('crossOrigin', 'anonymous'); //處理跨域video.setAttribute('src', url);video.setAttribute('width', width);video.setAttribute('height', height);video.currentTime = 1; // 第一幀video.preload = 'auto'; //metadata:抓取原數據//判斷IOS 監聽 durationchange或progress  但是在ios會出現黑屏if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {video.load();video.autoplay = true;video.muted = true; //靜音listen = 'loadeddata';}// 第二版 dataLoadvideo.addEventListener(listen, () => {console.log("我走了");canvas.width = width;canvas.height = height;canvas.getContext('2d').drawImage(video, 0, 0, width, height); //繪制canvasdataURL = canvas.toDataURL('image/jpeg'); //轉換為base64resolve(dataURL);});} catch (error) {console.log('視頻截幀的失敗報錯:', error);}});
}

第二種：

export function getFirstImg2(url) {const video = document.createElement("video");video.crossOrigin = "anonymous"; // 允許url跨域video.autoplay = true; // 自動播放video.muted = true; // 靜音video.src = url;return new Promise((resolve, reject) => {try {video.addEventListener("loadedmetadata",() => {console.log("loadedmetadata");video.currentTime = 2;const canvas = document.createElement("canvas");video.addEventListener("canplaythrough", () => {console.log("canplaythrough");canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);const firstFrame = canvas.toDataURL();// console.log(firstFrame); // 輸出第一幀畫面的Base64編碼字符串resolve(firstFrame);});},{ once: true });} catch (err) {console.error(err);reject("");}});
}

8，總結

以上的幾個方法如果使用了new Promise 說明里面存在異步操作，那么在調用的時候要使用 .then來獲取轉換后的文件。或直接使用 async await 語法進行接收resolve ()方法返回的文件；

保證代碼能夠同步運行，避免預料之外的問題；

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/42309.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/42309.shtml
英文地址，請注明出處：http://en.pswp.cn/news/42309.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

CentOS系統環境搭建（八）——CentOS7開機自動執行腳本（以MySQL為例）

CentOS系統環境搭建（八）——CentOS7開機自動執行腳本（以MySQL為例）

CentOS7開機自動執行腳本 文章目錄 CentOS7開機自動執行腳本第一步&#xff1a;新建一個腳本run.sh第二步&#xff1a;腳本添加可執行權限第三步&#xff1a;執行如下命令將/etc/rc.d/rc.local文標記為可執行文件第四步&#xff1a;打開/etc/rc.d/rc.local文件&#xff0c;在最…
閱讀更多...
利用Opencv實現人像遷移

利用Opencv實現人像遷移

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 今天來學習一下如何使用Opencv實現人像遷移&#xff0c;歡迎大家一起參與探討交流~ 本文目錄&#xff1a; 一、實驗要求二、實驗環境三、實驗原理及操作1.照片準備2.圖像增強3.實現美顏功能4.背景虛化5.圖像二值化處理6.人…
閱讀更多...
item_password-獲得淘口令真實url

item_password-獲得淘口令真實url

一、接口參數說明&#xff1a; item_password-獲得淘口令真實url &#xff0c;點擊更多API調試&#xff0c;請移步注冊API賬號點擊獲取測試key和secret 公共參數 請求地址: https://api-gw.onebound.cn/taobao/item_password 名稱類型必須描述keyString是調用key&#xff08…
閱讀更多...
tomcat源碼修改與編譯

tomcat源碼修改與編譯

1、獲取源碼 從github下載其源碼&#xff1a;https://github.com/apache/tomcat 2、選擇版本 切換到對應版本&#xff08;直接用相對應的Git tag即可&#xff09;&#xff1a; git checkout 9.0.793、修改源代碼&#xff0c;并且生成補丁 這里我們以修改去掉新版本的ws的檢…
閱讀更多...
129.【Spring 注解 IOC】

129.【Spring 注解 IOC】

Spring 注解 (一)、組件注冊1. Configuration 與 Bean 容器注冊組件(1).無注解注入方式(2).注解注入方式 2. ComponentScan 自動掃描組件和自動掃描規則(1).無注解掃描方式(2).注解掃描注入方式(3).指定掃描或不掃描的包 (過濾) 3. 自定義TypeFilter指定過濾規則 Filter(1).自定…
閱讀更多...
openCV項目開發實戰--詳細介紹如何改善夜間圖像的照明（附python和C++源碼）

openCV項目開發實戰--詳細介紹如何改善夜間圖像的照明（附python和C++源碼）

文末附完整的代碼實現下載鏈接 介紹 對于非攝影師來說，在光線不佳的條件下拍出好照片似乎很神奇。完成低光攝影需要技巧、經驗和正確的設備的結合。在弱光下拍攝的圖像缺乏色彩和獨特的邊緣。它們還遭受能見度差和深度未知的困擾。這些缺點使得此類圖像不適合個人使用或圖像處…
閱讀更多...
QT多屏顯示程序

QT多屏顯示程序

多屏顯示的原理其實很好理解&#xff0c;就拿橫向擴展來說&#xff1a; 計算機把桌面的 寬度擴展成了 w1&#xff08;屏幕1的寬度&#xff09; w2(屏幕2的寬度) 。 當一個窗口的起始橫坐標 > w1&#xff0c;則 他就被顯示在第二個屏幕上了。 drm設備可以多用戶同時打開&am…
閱讀更多...
Spring MVC 簡介

Spring MVC 簡介

目錄 1. 什么是MVC2. 什么是SpringMVC 1. 什么是MVC MVC是一種常用的軟件架構模式。可以看作是一種設計模式&#xff0c;也可以看作是一種軟件框架。經典MVC模式中&#xff0c;M是指模型&#xff0c;V是視圖&#xff0c;C則是控制器&#xff0c;使用MVC的目的是將M和V的實現代…
閱讀更多...
golang中使用chan控制協程并發簡單事例

golang中使用chan控制協程并發簡單事例

func main() {processNum : 5ch : make(chan struct{}, processNum)for true {ch <- struct{}{}go func() {defer func() {<-ch}()fmt.Println("我是協程", time.Now().UnixNano())time.Sleep(time.Second * 5)}()} } 可以看到&#xff0c;這里每5s會執行一次帶…
閱讀更多...
Linux15 消息隊列 線程

Linux15 消息隊列 線程

目錄 1、進程間通信IPC&#xff1a; 2、多線程 3、向消息隊列中寫入數據 4、從消息隊列中讀取數據 5、多線程&#xff1a; 6、將多線程的數據返回給主…
閱讀更多...
數據庫索引優化策略與性能提升實踐

數據庫索引優化策略與性能提升實踐

文章目錄 什么是數據庫索引&#xff1f;為什么需要數據庫索引優化&#xff1f;數據庫索引優化策略實踐案例&#xff1a;索引優化帶來的性能提升索引優化規則1. 前導模糊查詢不適用索引2. 使用IN優于UNION和OR3. 負向條件查詢不適用索引4. 聯合索引最左前綴原則5. 范圍條件查詢右…
閱讀更多...
c#實現策略模式

c#實現策略模式

下面是一個使用C#實現策略模式的示例代碼&#xff1a; using System;// 策略接口 public interface IStrategy {void Execute(); }// 具體策略類A public class ConcreteStrategyA : IStrategy {public void Execute(){Console.WriteLine("具體策略A的執行邏輯");} …
閱讀更多...
【Mysql】MVCC版本機制的多并發

【Mysql】MVCC版本機制的多并發

&#x1f307;個人主頁&#xff1a;平凡的小蘇 &#x1f4da;學習格言&#xff1a;命運給你一個低的起點&#xff0c;是想看你精彩的翻盤&#xff0c;而不是讓你自甘墮落&#xff0c;腳下的路雖然難走&#xff0c;但我還能走&#xff0c;比起向陽而生&#xff0c;我更想嘗試逆風…
閱讀更多...
PostgreSQL空值的判斷

PostgreSQL空值的判斷

PostgreSQL空值的判斷 空值判斷非空判斷總結 空值判斷 -- 查詢為空的 is null,sql簡寫isnull select * from employees where manager_id isnull;select * from employees where manager_id is null;非空判斷 -- 查詢不為空的 is not null;sql簡寫notnull select * from empl…
閱讀更多...
Java【數據結構】二分查找

Java【數據結構】二分查找

&#x1f31e; 題目&#xff1a; &#x1f30f;在有序數組A中&#xff0c;查找目標值target &#x1f30f;如果找到返回索引 &#x1f30f;如果找不到返回-1 算法描述解釋前提給定一個內含n個元素的有序數組A&#xff0c;滿足A0<A1<A2<<An-1,一個待查值target1設…
閱讀更多...
mysql 8.0安裝

mysql 8.0安裝

操作系統&#xff1a;22.04.1-Ubuntu apt 安裝命令 sudo apt install mysql-client-core-8.0 sudo apt install mysql-server-8.0終端輸入 mysql 可以直接免密登錄 如果此時提示需要密碼&#xff0c;則可以進入配置文件&#xff0c;設置免密登錄 sudo vim /etc/mysql/mysq…
閱讀更多...
【探索Linux】—— 強大的命令行工具 P.5（yum工具、git 命令行提交代碼）

【探索Linux】—— 強大的命令行工具 P.5（yum工具、git 命令行提交代碼）

閱讀導航 前言一、軟件包管理器 yum1.yum的概念yum的基本指令使用例子 二、git 命令行提交代碼總結溫馨提示 前言 前面我們講了C語言的基礎知識&#xff0c;也了解了一些數據結構&#xff0c;并且講了有關C的一些知識&#xff0c;也學習了一些Linux的基本操作&#xff0c;也了…
閱讀更多...
第3章 CPU微架構

第3章 CPU微架構

3.1 指令集架構 指令集ISA是軟件用來與硬件通信的詞匯集合&#xff0c;定義了軟件和硬件之間的通信協議。Intel x86、ARM v8、RISC-V是當今廣泛使用指令集架構的實例。ISA開發者通常要確保符合規范的軟件或固件能在使用該規范構建的任何處理器上執行。廣泛部署的ISA組織通常還…
閱讀更多...
20W IP網絡吸頂喇叭 POE供電吸頂喇叭

20W IP網絡吸頂喇叭 POE供電吸頂喇叭

SV-29852T 20W IP網絡吸頂喇叭產品簡介 產品用途&#xff1a; ◆室內豪華型吸頂喇叭一體化網絡音頻解碼揚聲器&#xff0c;用于廣播分區音頻解碼、聲音還原作用 ◆應用場地如火車站、地鐵、教堂、工廠、倉庫、公園停車場等&#xff1b;室內使用效果均佳。 產品特點&#xff…
閱讀更多...
vue-router中的一些 API

vue-router中的一些 API

在Vue.js的vue-router中&#xff0c;一些重要api 1、RouterHistory&#xff1a;這是 vue-router 提供的路由歷史記錄對象。它可以跟蹤當前頁面的路由歷史&#xff0c;并提供一些方法和屬性來管理導航和歷史記錄。在 vue-router 中&#xff0c;有兩種類型的路由歷史記錄對象&…
閱讀更多...
最新文章

Copyright @ 2022~2023