码迷,mamicode.com
首页 > Web开发 > 详细

js 预览图片 转base64

时间:2020-03-16 09:57:56      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:rom   ase   htm   index   获取   contex   window   output   log   

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>files-h5</title>
</head>
<body>
  <input type="file" id="file" onchange="showPreview(this, ‘portrait‘)" />
  <img src="" id="portrait" style="width: 200px; height: 200px; display: block;" />
  <script>

  function showPreview(source, imgId) {
    var file = source.files[0]; //获取文件
    //FileReader对象获取
    if(window.FileReader) {
      var fr = new FileReader();
      //文件加载后触发
      fr.onloadend = function(e) {
        document.getElementById(imgId).src = e.target.result;
      }
      //读取这个文件
      fr.readAsDataURL(file);
    }
  }

  </script>
  <script>
/*
    img标签到base64
    var img =document.getElementById("ak");
    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);
    console.log(dataURL);
*/

/*
  直接解析base64编码
var t1 =t.FaceInfoList[0].FaceImage.Data;   // t1= /9j/4AAQSk......Wn1aYz//Z
var  str0 =t1;//.replace(/\ /g, ‘‘); 
console.log(‘data:image/jpg;base64,‘+ str0);
document.getElementById(‘img‘).src=‘data:image/jpg;base64,‘+ str0;
*/

  /*
  方法2 
  用 createObjectURL
       url = window.URL.createObjectURL(file.files[0]);
    }
    document.getElementById(imgId).src = url;
  */

  /*
  方法3 数组 方法
   outputImg.src = ‘data:image/png;base64,‘ + arrayBufferToBase64(obj.arry);
   function arrayBufferToBase64(buffer) {
        var binary = ‘‘;
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);//编码
    }
    C# 
         byte[] bytes = vCode.get_bmp(code);
         string str = bytes.ToJsonString();
    在控制器 HOME/P_Getcode()
  */
  </script>
</body>
</html>

 转自 https://segmentfault.com/q/1010000019122380/a-1020000019123433

js 预览图片 转base64

标签:rom   ase   htm   index   获取   contex   window   output   log   

原文地址:https://www.cnblogs.com/enych/p/12501794.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!