file base64 url 之间的转换

在这里插入图片描述

    function urlToBase64(url) {
        const img = new Image()
        img.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            ctx.drawImage(this, 0, 0)
            const base64 = canvas.toDataURL()
            console.log("img.onload -> base64", base64) // base64
        }
        img.src = url
    }

    function urlToFile(url, fileName) {
        const img = new Image()
        img.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            ctx.drawImage(this, 0, 0)
            canvas.toBlob(function (blob) {
                blob.lastModifiedDate = new Date()
                blob.name = fileName
                console.log("img.onload -> blob", blob) // file
            })
        }
        img.src = url
    }

    function fileToUrl(file) {
        const objectURL = URL.createObjectURL(file)
        console.log("fileToUrl -> objectURL", objectURL) // url
    }

    function base64ToFile(base64, fileName) {
        var arr = base64.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr], {
            type: mime
        });
        blob.lastModifiedDate = new Date()
        blob.name = fileName
        console.log("functionbase64ToFile -> blob", blob) // file
    }

    function fileToBase64(file) {
        console.log("file", file)
        const read = new FileReader()
        read.onload = function () {
            console.log("read.onload -> this.result", this.result) // base64
        }
        read.readAsDataURL(file)
    }

转载:https://segmentfault.com/a/1190000022725301

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值