河北城乡和住房建设厅官方网站,wordpress 注册推广,h5海报免费制作软件,十堰建设网站首页文章目录 0#xff0c;前言1#xff0c;将图片的url网络链接(http://) 转为base64格式2#xff0c;将base64的图片数据转换为file文件3#xff0c;将以base64的图片数据转换为Blob4#xff0c;将file文件转化为base645#xff0c;将file文件转换为Blob6#xff0c;获取文… 文章目录 0前言1将图片的url网络链接(http://) 转为base64格式2将base64的图片数据转换为file文件3将以base64的图片数据转换为Blob4将file文件转化为base645将file文件转换为Blob6获取文件(图片视频等)的本地内存地址 可以直接访问7视频截帧截取视频的第一帧8总结 本篇文章侧重点是对图片文件的处理比如url转file、转base64file转blob类型等。 注意不要把视频文件转成base64因为base64格式本质是一串很长的字符串如果在手机端上传大一点的视频文件并有转bsee64的操作那么就会导致页面自动刷新、程序崩溃、甚至浏览器直接被系统杀掉因为视频的base64字符串太大会撑报内存的。
如果上传视频文件后想要对视频的回显可以使用createObjectUrl()方法来生成临时的内存地址来访问。 0前言
JavaScript 提供了一些 API 来处理文件或原始文件数据例如File、Blob、FileReader、ArrayBuffer、base64 等; 了解它们会对下面的一些方法更容易理解
推荐阅读以下博客
知乎1https://zhuanlan.zhihu.com/p/568915443 csdn2https://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/u3021883569,1259262591fm253fmtautoapp120fJPEG?w1140h641;// 开始使用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 typefile /// 原生添加点击事件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 typefile /// 原生添加点击事件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 typefile /// 原生添加点击事件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 typefile /// 原生添加点击事件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 ()方法返回的文件
保证代码能够同步运行避免预料之外的问题
