这是接着之前的问题提问
http://segmentfault.com/q/1010000000649809
现在安卓返回路径，file://这样放到img的src中的了，但是html中又怎么再获取这个img的base64呢？因为现在接口定义了是传base64的.
我查了一下网上都是利用file对象去做的 http://my.oschina.net/u/559991/blog/60310
但是现在没有这个file对象，可以怎么处理？
比如把安卓返回路径怎么处理到input file里面能获到file对象？
或者img有没有内置方法直接获取到base64？
问题： 在前端如何将image转成base64编码？
回答：
要实现这个功能，要使用canvas来做，Canvas里面提供了一个toDataURL的接口，可以用这个接口获得图片的base64
所以思路是：
我给个例子
极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<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/yeoman.png';
img.onload =function() {
var data = getBase64Image(img);
console.log(data);
}
document.body.appendChild(img);
}
main()
</script>
</body>
</html>
然后可以在控制台看到base64的数据
希望可以帮到你
3 回答2.1k 阅读
2 回答1k 阅读✓ 已解决
4 回答987 阅读
2.6k 阅读
2 回答902 阅读
1 回答1.4k 阅读
2 回答513 阅读
我觉得定义一个java类操作文件，用js去调用它，最直接最简单。
如果不用file:// 访问的话，倒是还可以使用CORS解决跨域、canvas的getImageData、toDataURL之类的方法读取数据。