js简单的图片转base64

最新推荐文章于 2024-07-29 14:17:59 发布
最新推荐文章于 2024-07-29 14:17:59 发布
阅读量2.1k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaoyyl/article/details/55098194
版权 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
</head>
<body>
<input type="file" id="fielinput" accept="image/*" οnchange="showPreview(this)">
<img id="fielImg" src="" />
</body>
</html>
<script>
    /*
     * 上传图片
     */
    function showPreview(source) {
        var file = source.files[0];
        //判断文件类型
        var extfile = file.name;
        var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|";
        var extName = extfile.substring(extfile.lastIndexOf(".")).toLowerCase();//（把路径中的所有字母全部转换为小写）
        if(AllImgExt.indexOf(extName+"|")==-1)
        {
            var ErrMsg="该文件类型不允许上传。请上传 "+AllImgExt+" 类型的文件，当前文件类型为"+extName;
            alert(ErrMsg);
            return false;
        }
        if(window.FileReader) {
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onloadend = function(e) {
                document.getElementById("fielImg").src = e.target.result;
            };
        }else{
            alert('浏览器不支持预览图片');
        }
    };
</script>

yaoyyl
关注
专栏目录
js加载base64图片
08-12
js加载base64图片js加载base64图片js加载base64图片js加载base64图片
JQ JS javascript 普通图片上传 图片格式转换 图片base64转换 jpg转base64 png转base64
04-18
本文将深入探讨如何使用jQuery（JQ）、JavaScript（JS）以及base64编码技术来实现普通图片的上传、格式转换以及base64编码转换。我们将讨论jpg和png图片如何转化为base64字符串，以便在网络上传输或存储。 首先，让...
js 图片转base64
yuer629
04-16 717
/** * * @param url 图片路径 * @param ext 图片格式 * @param callback 结果回调 */ function getUrlBase64(url, ext, callback) { var canvas = document.createElement("canvas"); //创建canvas DOM元素 var ctx ...
将图片转换为 Base64 编码（Vue实现）
l10103的博客
07-29 1789
Base64 是一种编码格式，它将二进制数据转换为一种基于64个可打印字符的表示形式。这种编码方式允许二进制数据在文本形式中安全地传输和存储，这对于网页设计和网络传输尤其重要。
js 图片转base64的方式(两种)
weixin_42776027的博客
10-30 1336
方式一：Blob和FileReader 对象 实现原理： 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"] 使用FileReader 对象接收blob ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1...
js将图片转base64格式
郝峰vip的博客
04-19 772
javascript 将图片转化为base64格式
vue.js图片转Base64上传图片并预览的实现方法
10-18
本文主要介绍了在Vue.js框架中实现图片转Base64编码后上传，并在前端进行预览的方法。在当前的前后端分离开发模式下，前端开发人员往往需要处理各种前端资源，包括图片。在传统做法中，通常会通过Ajax调用接口，以...
使用JavaScript将图片转换为Base64
olderandyanger的博客
10-23 7320
将图片转成base64格式
JS 图片转Base64
weixin_30807779的博客
02-17 87
JS 图片转Base64有时候需要向HTML中插入一张图片，可苦于上线后找不到一个合适的网盘来存储这些图片，有没有一种办法能将图片转换成文字，然后直接插入HTML中呢，通过Base64编码就可以解决这个问题。废话不多说直接上代码。不知道什么是Base64的请自行百度。 JS 图片转Base64 ...
js将图片转换成base64
热门推荐
锦瑟年华L的博客
07-27 1万+
之前有个需求是把页面绘制成图片，上传到服务器中，我使用的html2canvas。但是html页面当中含有图片的话，在截图时存在跨域问题，导致截图失败。经过多方查找，发现把页面中的图片转换成base64，可以避免这个跨域问题。......
JS获取图片base64
qq_34380572的博客
09-27 1444
function onSendImage() { var img = document.createElement('img'); img.id = "img"; img.src = pathPhoto; img.style.width = "100%"; img.style.height = "100%"; img.onload = function() { getBa
js获取图片base64
m0_46911343的博客
04-11 3618
最近遇到了一个需求，要求在python的selenium自动化打开的浏览器中，执行js代码，实现获取图片的base64，并返回给python变量。看似很简单的一个需求，实际上包含了很多js相关的知识点和开发上的技术点。今天这篇文章，主要写写整个过程中有用的知识点。本文通过笔者在js获取图片base64的过程中，遇到的问题。canvas绘图需要修改画布大小，否则无法画完整。canvas的drawimage函数，需要等待图片加载完成，否则就会直接返回画布。
js将图片文件转为base64格式
YanHSama的博客
11-10 1026
重要提示：FileReader 仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件，应使用标准 Ajax 解决方案进行服务器端文件读取，如果读取跨域，则使用 CORS 权限。元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer对象，还可以是来自在一个。对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用。对象指定要读取的文件或数据。
js 图片转base64的简单方式
wxjyu的博客
03-18 401
通过ajax获取图片进行转换 function ajax(method,url,async){ var xmlHttp = new XMLHttpRequest() xmlHttp.open(method, url, true) xmlHttp.responseType = 'blob' xmlHttp.send() xmlHttp.onload = function()
js图像转base64
Rulelur的博客
07-24 1882
js图像转base64
使用JS 将图片转成base64
weixin_40169609的博客
09-16 418
$(‘input[type=file]’).on(‘change’,function(){ var reader=new FileReader(); reader.onload=function(e){ //带头 console.log(reader.result); // 不带头 //console.log(reader.result.substring(reader.result.indexOf(",") + 1)); } console.log(reader.readAs
js 将图片转为base64格式
qq_36762151的博客
06-09 2182
两种方式：1. 利用canvas绘制图片：适用转换本地路径图片2. 通过网络请求图片地址，并返回blob格式，再操作：适用服务器端图片。
Js图片转base64
最新发布
08-07
在JavaScript中，可以使用以下步骤将图片转换为Base64编码： 1. **选择或创建图片**: 首先，您需要选择或创建一个图片。您可以使用HTML `<img>` 元素或者任何其他来源的图像数据。 2. **转换为DataURL**: 使用`FileReader`对象，您可以读取所选图片并将其转换为Base64编码的字符串。这可以通过以下代码实现： ```javascript const reader = new FileReader(); reader.readAsDataURL(file); // 假设 file 是选择的文件或文件对象 reader.onload = function(event) { // 这里处理转换后的 Base64 编码 console.log(event.target.result); // 这是 Base64 编码的图片数据 }; ``` 这里要注意的是，这个过程将占用大量的内存，因此最好只在必要时进行转换。如果文件很大，那么这种方法可能会非常慢。 如果你想将图片转为Base64编码，然后保存到服务器，你可能需要使用到`fetch`或者`axios`等HTTP库，并配合`Blob`对象来处理。 以上就是在JavaScript中将图片转为Base64编码的基本步骤。这些步骤可能会根据具体的上下文和需求有所不同。如果你有特定的应用场景或者遇到具体的问题，欢迎提供更多的信息，我会很乐意帮助你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值