2 smartstudent1 smartStudent1 于 2015.07.20 09:33 提问

用Js将图片转为base64字符串

如题,前台使用js将file表单选中的图片转换为base64字符串,请问该怎么做?
图片说明
这是我在网上找的相关代码,使用firefox调试,每次运行到img.onload就退出去了,进不了function,不知道是哪里有问题,还是压根就写错了。请好心人指点,先谢谢了!

7个回答

showbo
showbo   Ds   Rxr 2015.07.20 09:46
已采纳

bbb是file丢下,没有onload事件,改为onchagne,用HTML5的FileReader对象就可以转为base64了,不需要canvas

而且你bbb已经存在,不需要再append了。。如果是客户端图片预览,看这个: javascript客户端图片预览,兼容最新firefox,chrome和IE11

     img.onchange = function () {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(this.files[0]);
        oFReader.onload = function (oFREvent) {
            alert(oFREvent.target.result);
        };
    }
smartStudent1
smartStudent1 回复showbo: 就剩1c币了-,-
接近 3 年之前 回复
smartStudent1
smartStudent1 回复showbo: 看了你那个javascript客户端预览,我终于做出来了,非常感谢!
接近 3 年之前 回复
showbo
showbo 回复csdnFc1123: 看这个,将图片绘制到canvas后自己调用toDataURL转为base64。http://www.jb51.net/html5/97104.html
接近 3 年之前 回复
smartStudent1
smartStudent1 回复showbo: 这个this.files[0]获取的是什么啊?就是bbb那个file对象吗?
接近 3 年之前 回复
smartStudent1
smartStudent1 回复showbo: bbb,aaa已经没用了,
接近 3 年之前 回复
showbo
showbo 回复csdnFc1123: 我贴的代码就是了。。你的img变量指向bbb,是file对象。file没有onload,只有onchange,如果你想将img对象(aaa)加载的图片转为base64,需要canvas对象,你要搞清楚到底是aaa还是bbb对象先
接近 3 年之前 回复
smartStudent1
smartStudent1 我还是不太明白啊 ,我不是客户端预览,只需要将转好的base64字符串传到后台就可以了。不要问我为什么不在后台转,我也不知道,这个img和我上面的img是一样的吗?就是file的value?那这个代码怎么触发呢?我不太会js,多指教
接近 3 年之前 回复
smartStudent1
smartStudent1   2015.07.20 10:37

问题已经解决了,谢谢!

save4me
save4me   Ds   Rxr 2015.07.20 11:01

你找到的网上的代码原先是绑定图片元素的,而不是file类型的Input元素吧?图片元素有onload事件,在图片加载到浏览器的时候触发。file类型的input你绑定onchange事件。
类似楼上的解释,可以参考Image convert to Base64,上面有纯js和jQuery的实现示例代码。

smartStudent1
smartStudent1 回复save4me: ie8+吧
接近 3 年之前 回复
save4me
save4me 你需要支持哪个版本的IE
接近 3 年之前 回复
smartStudent1
smartStudent1 恩,代码都是差不多了,但是现在出现了一个问题就是,貌似不支持ie,请问有没有解决的办法了
接近 3 年之前 回复
save4me
save4me   Ds   Rxr 2015.07.20 23:54

IE10支持html5的FileReader 。你可以试试开源项目A FileReader polyfill for Internet Explore and Safari using Flash,通过Flash和jQuery来模拟。

juanyanni
juanyanni   2016.01.14 17:11

请问楼主最后怎么解决的??

juanyanni
juanyanni   2016.01.15 10:56

请问IE8上,怎么转base64?

CSDNXIAOD
CSDNXIAOD   2015.07.20 09:37

Android Base64字符串转换成图片
IOS图片转base64字符串和字符串转回图片
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js将图片转为base64编码 && js将base64编码图片转为Blob格式
将图片转为base64编码格式function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image(); img.crossOrigin = '
js 将图片链接转换成base64格式的简单实例
简单案例<!DOCTYPE html> <HTML> <HEAD> <meta name =“viewport”content =“width = device-width”/> <title> jquery图片base64 </ title> </ HEAD> <BODY&g
JavaScript——图片转化为base64编码
var img = "imgurl";//imgurl 就是你的图片路径 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getCon
从零开始学_JavaScript_系列(36)——base64字符串与图片的相互转换
base64字符串转图片原理是当base64字符串作为img标签的src属性时,如果是有效的,则可以预览。而若要下载,则 创建一个新的a标签 将a标签的href属性设置为该base64字符串 设置a标签的download属性为文件名 再通过js手动触发该a标签的点击事件,则完成了下载行为(具体视浏览器可能需要选择下载目录或者使用默认目录)。图片转base64字符串分为两种,一种是提供图片的src标签
JS将图片转为base64编码
1.根据img标签获取base64编码 /** * * @param img html的img标签 * @param ext 图片格式 * @returns {string} */ function getImageBase64(img, ext) { var canvas = document.createElement("canvas"); //创建canvas D...
base64字符串与图片的相互转换
一.base64字符串转图片原理是当base64字符串作为img标签的src属性时,如果是有效的,则可以预览。而若要下载,则创建一个新的a标签将a标签的href属性设置为该base64字符串设置a标签的download属性为文件名再通过js手动触发该a标签的点击事件,则完成了下载行为(具体视浏览器可能需要选择下载目录或者使用默认目录)。二.图片转base64字符串分为两种,一种是提供图片的src标...
java实现网络图片转换为base64字符串
功能需求:将网络图片转换为base64字符串传给前端 lg:String url = "https://www.baidu.com/369270f.jpg"; base64转码之后: url = "/9j/4AAQSkZJRg......G9AFqq6"; 代码实现: package test; import java.io.ByteArrayOutputStream; imp
js的base64和文本字符串之间互转
/** Convert data (an array of integers) to a Base64 string. */ var toBase64Table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; var base64Pad = '='; function toBas
JS将图片转换成Base64编码
在移动端与服务端的交互过程中,经常会遇见移动端上传图片到服务端的情况;将图片转成base64字符串然后和服务端交互,可以有效的减少HTTP数据请求,减少与服务端的数据交互; 将图片转换成base64字符串,主要使用的canvas: ①使用canvas必须在界面上创建canvas:<canvas id="photo" style="display: none;"></canvas> //创建 c
js 将图片转换为base64编码
在写爬虫程序的时候,网站采用了验证码防爬取策略,这里需要将验证码图片转换成base64编码提交到第三方网站进行验证/** * 将图片转换为Base64 */ function image2Base64(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas