图片/视频url 转 File Blob

图片转Base64

由于 onload 方法是异步的便于取值, 用 Promise 封装一下

  function urlToBase64(url) {return new Promise((resolve) => {let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')let img = new Image()img.crossOrigin = 'Anonymous';img.onload = function () {canvas.height = img.height;canvas.width = img.width;ctx?.drawImage(img, 0, 0);// 获取Base64var dataURL = canvas.toDataURL('image/png');// console.log('base64地址：', dataURL)resolve(dataURL)};img.src = url;})}

上面的方法只能将图片url转换,如果是视频或其他文件就无法转换了,可以使用下面方式转换

  function urlToBase64(url) {return new Promise((resolve) => {fetch(url).then(data => {const blob = data.blob()return blob;}).then(blob => {let reader = new FileReader()reader.onloadend = function () {const dataURL = reader.result// console.log('base64地址：', dataURL)resolve(dataURL)}reader.readAsDataURL(blob)})})}

Base64转File

  function base64ToFile(dataURL) {var arr = dataURL?.split?.(',')let mime = arr[0].match(/:(.*?);/)[1]let bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}let filename = new Date().getTime() + "" + Math.ceil(Math.random() * 100) + "." + mime.split("/")[1]return (new File([u8arr], filename, { type: mime }))}

Base64转Blob

  function base64ToBlob(dataURL) {var arr = dataURL.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });}

Blob转File

  function blobToFile(theBlob) {theBlob.lastModifiedDate = new Date();let filename = new Date().getTime() + "" + Math.ceil(Math.random() * 100) + "." + theBlob.type.split("/")[1]theBlob.name = filename;return theBlob;}

图片/视频url 转 File Blob相关推荐

【VUE】将图片的url或file类型转换成base64，并压缩图片大小
话不多,看代码! 1.将图片的url转换成base64 urlTobase64(url) {var that = thisvar img = new Image()img.src = url + '? ...
img 格式相互转换 url, base64，blob, file
正常向后端传的文件就是file格式,存储到文件服务器 url -> base64 -> file url -> blob -> file url -> base64 - ...
图片格式转换（File、Blob、base64）
前言记录一下比较常见的图片格式(File.Blob.base64)在不同的场景他们之间的相互转换的方法. 一.类型简介 Blob BLOB(binary large object): 二进制大对象, ...
图片base64，file,blob格式的相互转换，以及gif转base64
图片base64,file,blob格式的相互转换,以及gif转base64(第六点) 1.new Image()图片链接转base64 只能转化为普通的jpg/png图片.无法转化gif图 type ...
java将图片的url转换成File，File转换成二进制流byte
package com.xqy;import java.io.*; import java.net.HttpURLConnection; import java.net.URL; //java将图片的 ...
如何获取网络视频（或者说后台返回视频URL）第一帧图片以及获取本地视频的第一帧图片
在项目开发的时候,有可能会有这样的一种需求:有一段视频需要展示给用户,在界面上先展示视频上的某一帧图片,用户点击的时候再去获取视频资源进行播放.这时,服务器会先给我们返回视频的url,这个时候就需要通 ...
android 本地地址转换为url,android本地mipmap图片转url、绝对路径转URL URL URI File Path 转换...
标签: url uri file path File to URI: File file = ...; URI uri = file.toURI(); File to URL: File file = ...
为什么视频网站的视频链接地址是blob
自从HTML5提供了video标签,在网页中播放视频已经变成一个非常简单的事,只要一个video标签,src属性设置为视频的地址就完事了.由于src指向真实的视频网络地址,在早期一般网站资源文件不怎么 ...
为什么视频网站的视频链接地址是blob？
自从HTML5提供了video标签,在网页中播放视频已经变成一个非常简单的事,只要一个video标签,src属性设置为视频的地址就完事了.由于src指向真实的视频网络地址,在早期一般网站资源文件不怎么 ...

图片/视频url 转 File Blob

图片转Base64

Base64转File

Base64转Blob

Blob转File

图片/视频url 转 File Blob相关推荐

最新文章

热门文章