js base64与canvas base64

Posted 2023-05-03

参考技术A 获取到上传的文件myfile，创建一个fileRead文件对象，使用readAsDataURL方法可以将读取到的文件编码成Data URL。文件加载成功后，e.target.result就是文件图片所对应的base64编码。直接赋值给img的src，就能显示图片。

下面是onload里e对象打印的结果，可以看出e.target.result是文件图片的信息。

下面打印的是base64的编码，可以在img的src中直接引用，或者复制到浏览器搜索框里也能直接搜索图片。

使用canvas画一个填充色为红色的矩形，试点按钮后，使用canvas.toDataURL方法：返回一个包含图片展示的 data URI 。可以使用type参数其类型，默认为 PNG 格式。把得到的base64编码赋给img的src,显示图片。

结果图如下：

两种图片的base64的方法都很实用，项目开发中可能会遇到，今天来分享给大家。

js 将图片文件转换成base64

 

1.情景展示

　　在JavaScript中，如何使用图片文件转换成base64?

2.解决方案

/**
 * 网络图像文件转Base64
 * @param img dom对象 
 */
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;
}

3.测试

window.onload = function(){
    // 获取图片对象
    var imgDom = document.getElementById(\'bb\');
    var dataUrl = getBase64Image(imgDom);
    alert(dataUrl);
}

 

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

• 个人主页
• exception:Failed to execute \'toDataURL\' on \'HTMLCanvasElement\' 解决方案
• base64和Blob互相转换