js实现图片转base64(兼容IE8+)

最新推荐文章于 2024-05-12 21:39:04 发布
最新推荐文章于 2024-05-12 21:39:04 发布
阅读量1.6w 收藏 5
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/70153646
版权
在电商项目中，为了优化HTTP请求并减轻服务器压力，前端需要将用户上传的图片转换为base64编码。本文介绍了如何在JavaScript中实现这一功能，包括针对IE8+浏览器的兼容性处理。通过创建隐藏的file输入框，监听change事件，然后处理不同浏览器下的图片转码，最终达到图片转base64的效果。
摘要由CSDN通过智能技术生成

最近做电商项目，遇到如下一个需求：

商品评价页面：用户上传图片，点击“”确定“”前，图片由前端实现base64转码（ps:由于商品评价页面可能存在多个产品，每个产品评价又可上传多张图片，所有前端img 转码可以有效的优化http请求，减小服务器的压力）

下面我们一步一步来看看demo代码：

（1）定义一个隐藏的input[type = 'file']，通过按钮触发其change事件

<center>

    <!-- 图片上传表单 -->
    <form>
      <input type="file" class="file-hook" οnchange='PreviewImage(this)' style="display: none" />
    </form>
最低0.47元/天 解锁文章
Take_Dream
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
关于ie8浏览器 js追加base64图片显示不全问题
weixin_38808271的博客
07-05 942
ie8浏览器中 js追加base64图片显示不全
使用Js将图片转换为base64格式-在线示例
热门推荐
JackieDYH的博客
05-31 2万+
图片转base64-在线工具 <!Doctype html> <html> <head> <meta charset="utf-8" /> <title>html5 image to base64</title> </head> <body> <script type="text/javascript"> window.onload = function() { /
2024年前端最全一文打尽前端 Base64 编码知识，腾讯面试官工资
最新发布
2401_84434086的博客
05-12 946
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
js将图片转换为base64方式
一键写代码的博客
10-21 1509
1、js实现图片资源转化成base64的各种场景 （非常推荐，原理和实现都有。）
img转base64的两种方式的比较
weixin_30819085的博客
02-02 593
关于图片转base64然后提交后台，项目中一直用的是canvas的toDataUrl方法，但是之前看HTML5 API文档的时候，一直记得好像有个叫fileReader的东西也可以做到。于是过年无事的时候，把两种方法都写成了插件形式。https://github.com/tiamoyajie/Zepto/blob/master/task/js/Zepto.GetImgBase64.2.jshttp...
图片上传-本地图片转base64+ie8支持+本地预览支持
weixin_34234829的博客
08-03 786
最近项目由于flash同学没在了，图片上传只能前端重新做，后台希望用base64数据上传，复用之前接口 问题来了， 1.ie8 不支持canvas转base64 2.本地预览 base64数据，ie8仅能显示32k数据 3.本地图片如何显示预览 4.base64数据如何换算成文件大小 //ie转换方法canvas转base64 function ieBase64...
纯javascript前端实现base64图片下载(兼容IE10+)
10-18
本文将详细讨论如何使用纯JavaScript在前端实现Base64图片的下载，并重点解决兼容IE10+的问题。 首先，在Chrome等现代浏览器中，我们可以借助HTML5的新特性来实现Base64图片的下载。具体步骤如下： 1. 创建一个`...
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
08-31
Base64是一种用于将二进制数据转换为可打印ASCII字符的编码方法，常用于在网络上传输图片。这种编码方式将每三个字节的二进制数据转化为四个字符的Base64编码，使得原本不可见的二进制数据能够以文本形式在网页上...
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
11-23
我们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？ 原理分析 提取操作：复制=>粘贴=>上传 在这个操作...
Vue 后台管理类项目兼容IE9+的方法示例
10-17
Vue 后台管理类项目兼容IE9+是一个关键任务，因为许多企业仍然使用较旧的浏览器版本，如IE9，为了确保应用的广泛可用性，开发者必须解决一系列兼容性问题。本文将详细介绍如何使Vue项目在IE9及更高版本中正常运行。 ...
本地图片转base64编码ocx控件
05-11
本ocx控件可以将本地图片转成js识别的base64编码显示在浏览器上，只需要注册一下，就可以使用，方便快捷，减少js不能显示图片的烦恼，快快下载吧。
js将图片转换成base64
锦瑟年华L的博客
07-27 1万+
之前有个需求是把页面绘制成图片，上传到服务器中，我使用的html2canvas。但是html页面当中含有图片的话，在截图时存在跨域问题，导致截图失败。经过多方查找，发现把页面中的图片转换成base64，可以避免这个跨域问题。......
JS 下载文件方法分享(解决图片文件无法直接下载和 IE兼容问题)
weixin_34161064的博客
10-11 1100
场景简介 由于业务需要，经常遇到下载各类文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地址会变成直接打开图片，而不是弹窗提示另存为，研究了下前端实现文件下载最便捷的方法还是创建 a 标签，写入download 属性实现点击下载，但这在 ie 浏览器上的实现又与一般浏览器不同，于是摸索之后写了个通用的下载方法，既可用来下载文件也可下载图片，希望能够帮到大家。 npm 安装使用 ...
JavaScript blob类型转file类型以及ie不兼容file的处理
weixin_43969975的博客
10-24 2005
JavaScript blob类型转file类型 var file = new File([blob], filename, {type: contentType, lastModified: Date.now()});
canvas 将在线地址转化为base64返回
qq_44170622的博客
08-19 360
function getBase64(img){ function getBase64Image(img,width,height) { var canvas = document.createElement("canvas"); canvas.width = 170 canvas.height = 170; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0,
尼玛，终于找到在IE中将图片转换成base64的方法了
yuduo1112的专栏
02-14 3490
var x= new ActiveXObject("Msxml2.XMLHTTP.6.0"); x.onreadystatechange=function(){  if(x.readyState  var xml_dom = new ActiveXObject("MSXML2.DOMDocument");  var tmpNode = xml_dom.createElement("tmp
ie下jpg转base64编码
brucewata的专栏
03-11 728
function GetBase64_IE(photoFileName) { var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器支持的创建方式 xmlHttp.open("GET", photoFileName, false); //xmlHttp.setRequestHeader("Content-Type", "t
javascript如何实现在线图片转base64
03-13
可以使用HTML5中的File API和Canvas API来实现在线图片转base64。具体步骤如下： 1. 使用File API读取图片文件，得到一个File对象。 2. 使用Canvas API创建一个Canvas对象，并将图片绘制到Canvas上。 3. 使用Canvas对象的toDataURL()方法将Canvas上的图片转换为base64编码的字符串。 以下是示例代码： ```javascript // 选择图片文件 var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0]; // 创建一个Image对象 var img = new Image(); // 读取图片文件 var reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; } reader.readAsDataURL(file); // 将图片绘制到Canvas上 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 将Canvas上的图片转换为base64编码的字符串 var base64 = canvas.toDataURL(); console.log(base64); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值