img 转为base64（转）
方法一:canvas
<script type="text/javascript">
??? function getBase64Image(img) {
??????? 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 dataURL = canvas.toDataURL("image/png");
??????? return dataURL
??????? // return dataURL.replace("data:image/png;base64,", "");
??? }
??? function main() {
??????? var img = document.createElement('img');
??????? img.src = './images/Game of Thrones.jpg';? //此处自己替换本地图片的地址
??????? img.onload =function() {
??????????? var data = getBase64Image(img);
??????????? var img1 = document.createElement('img');
??????????? img1.src = data;
??????????? document.body.appendChild(img1);
??????????? console.log(data);
??????? }
??? }
??? main()
</script>方法二:FileReader
<html>
<head>
??? <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
??? <title>通过filereader接口读取文件</title>
??? <script type="text/javascript">
??????? function readAsDataURL()
??????? {
??????????? if(typeof FileReader=='undifined')????????? //判断浏览器是否支持filereader
??????????? {
??????????????? result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
??????????????? return false;
??????????? }
??????????? var file=document.getElementById("imagefile").files[0];
??????????? if(!/image\/\w+/.test(file.type))?????????? //判断获取的是否为图片文件
??????????? {
??????????????? alert("请确保文件为图像文件");
??????????????? return false;
??????????? }
??????????? var reader=new FileReader();
??????????? reader.readAsDataURL(file);
??????????? reader.onload=function(e)
??????????? {
??????????????? var result=document.getElementById("result");
??????????????? result.innerHTML='<img src="'+this.result+'" alt=""/>'
??????????? }
??????? }
??? </script>
</head>
<body>
<p>
??? <label>请选择一个文件：</label>
??? <input type="file" id="imagefile" />
??? <input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
??? <!-- 这里用来显示图片结果-->
</div>
</body>
</html>参考文献： https://www.cnblogs.com/tugenhua0707/p/4666076.html
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/02/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读