url、base64、blob之间的转换

最新推荐文章于 2023-04-02 12:00:00 发布

weixin_42291794

最新推荐文章于 2023-04-02 12:00:00 发布

阅读量468

点赞数

分类专栏：小案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42291794/article/details/106895210

版权

1.url->base64

2. base64<->blob

3. File->blob

base64 src = “data:image/png;base64,aaaaaaaaaaaaaa” DataURL
blob src = “blob:aaaaaaaaaaaaaaaaaaaaaaaaa” BlobURL

url->base64

canvas.toDataURL(‘image/png’)可以将canvas转换成base64

canvas.drawImage(image)可以将image换到canvas上

通过new image()将url转换成image对象，切记在img.onload的函数中操作image对象

blob->base64

通过fileReader.readAsDataURL(blob)生成base64

生成的base64在fileReader.onload函数的result中

通过new Blob()将BlobURL转换为为Blob对象,参数为数组

base64->blob

通过URL.createObjectURL()将Blob或者File对象转换为BlobURL

通过new Blob()将二进制对象转换为Blob对象

将base64编码转换为unicode编码，即为ArrayBuffer

通过ArrayBufferView的实例Uint8Array读取每一位ArrayBuffer的内容反到数组中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
    </style>
</head>

<body>
    <input type="file">
    <script>
        //base64    src = "data:image/png;base64,aaaaaaaaaaaaaa"
        //blob      src = "blob:aaaaaaaaaaaaaaaaaaaaaaaaa"

        function FileToBlob(file) {
   
            return new Promise((resolve, reject) => {
   
                let blobURL = URL.createObjectURL(file)
                resolve(blobURL)
            })
        }

        function urlToBase64(url) {
   
            return new Promise((resolve, reject) =>

最低0.47元/天解锁文章

weixin_42291794

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
url、base64、blob之间的转换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https:/
复制链接

扫一扫