js 图片转换为base64

Posted IT人生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 图片转换为base64相关的知识,希望对你有一定的参考价值。

<input id="file" type="file">
<img id="img" style="max-height: 300px;">
<textarea id="textarea" style="width: 100%;height: 300px;"></textarea>

<script>
$("#file").change(function () {
  run(this, function (data) {
    $(‘#img‘).attr(‘src‘, data);
    $(‘#textarea‘).val(data);
  });
});

function run(input_file, get_data) {
/*input_file:文件按钮对象*/
/*get_data: 转换成功后执行的方法*/
if (typeof (FileReader) === ‘undefined‘) {
  alert("抱歉,你的浏览器不支持 FileReader,不能将图片转换为Base64,请使用现代浏览器操作!");
} else {
try {
  /*图片转Base64 核心代码*/
  var file = input_file.files[0];
  //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
  if (!/image\/\w+/.test(file.type)) {
    alert("请确保文件为图像类型");
    return false;
  }
  var reader = new FileReader();
  reader.onload = function () {
    get_data(this.result);
  }
  reader.readAsDataURL(file);
  } catch (e) {
    alert(‘图片转Base64出错啦!‘ + e.toString())
  }
}
}

</script>
 
 
关于FileReader资料:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader



以上是关于js 图片转换为base64的主要内容,如果未能解决你的问题,请参考以下文章

js 将图片转换为base64编码

js将图片转换为base64

js将图片转换为base64

js 图片转换为base64

小程序 使用upng.js 把小程序选择的图片转换为base64

使用Js将图片转换为base64格式-在线示例