将图片(路径)转换为Base64 和 将base64转换为file类型

简介: 将图片(路径)转换为Base64 和 将base64转换为file类型


var image={
    /* 将图片(路径)转换为Base64 */
    getBase64FromImageURL(url, callback) {
        let suffix = url.split('.').slice(-1)[0];//扩展名 
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = function () {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            var base64URL = canvas.toDataURL(`image/${suffix || 'png'}`);
            callback(base64URL);
            canvas = null;
        };
    },
    /* 将base64转换为file类型 */
    getFileFromBase64(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);
        }
        return new File([u8arr], filename, { type: mime });
    }
}
/* 测试用例 */
image.getBase64FromImageURL('1.png', (base64URL)=> {
    console.log(base64URL);
    var imgURL = image.getFileFromBase64(base64URL, 'imgName');
    console.log(imgURL);
});


相关文章
|
开发者
处理base64图片数据的方式
处理base64图片数据的方式
120 4
|
前端开发 API
图片或文件Blob、File、Base64之间的相互转换
在做前端项目的时候,遇到图片的上传或者下载时,不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下,三者之间的相互转换。 首先我们看看base64 ,File 对象,Blob 对象长什么样的,怎么来的。
500 1
|
人工智能 Java 对象存储
Java获取阿里云图片临时URL与图片文件转换Base64编码方法
在使用阿里云人工智能产品服务时,有部分服务需要上传的参数中包含文件URL,当我们没有开通OSS服务时,可以使用临时URL服务、或部分服务支持Base64编码格式,此文章为生成临时URL-JavaSDK方案与图片文件转换Base64编码方案。
2011 0
|
2月前
|
存储 安全 数据库
浅谈base64编码
浅谈base64编码
|
4月前
|
JavaScript
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
|
6月前
|
存储 前端开发 JavaScript
前端base64转file文件方法
前端base64转file文件方法
687 0
|
6月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
后端返回的base64流形式的图片,怎么放在src中
后端返回的base64流形式的图片,怎么放在src中
169 0
.NET指定图片地址下载并转换Base64字符串
.NET指定图片地址下载并转换Base64字符串
143 0
图片转base64 并根据格式加前缀
图片转base64 并根据格式加前缀
392 0