欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用 js 将图片进行转Base64转码

程序员文章站 2022-04-28 18:10:05
...

 

// html部分   <input type="file" id="myfileinput" multiple> 

// 调用方法
function change(){
    // 获取上传的文件
    let fileInput = document.getElementById("myfileinput");
    // files 是一个 FileList 对象(类似于NodeList对象)
    let files = fileInput.files;
    let imgobj = new Image();  
    let url = window.URL || window.webkitURL;
    // 手动创建一个Image对象
    imgobj.src = url.createObjectURL(files[0]);// 这里传的是File对象
    let imgBaseStr=undefined;
    // img.onload 实现图片预加载方法
    imgobj.onload = function () {
        // 进行转码
        imgBaseStr = getBase64Image(this)
    }            
},


// 将图片转 base64
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
}

 

// 成功转码截图

使用 js 将图片进行转Base64转码

 

 

运行环境:Google Browser

 

 

 

 

 

 

相关标签: js