js通过Image和canvas获取图片的base64格式的字符串(只能接受服务器上的图片,不支持本地图片直接转化为base64,因为js没有系统io的权限,js只能操作dom)
function getBase64(url){
//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
var Img = new Image();
var dataURL='';
Img.src=url;
Img.setAttribute('crossOrigin', 'anonymous');
Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件
var canvas = document.createElement("canvas"); //创建canvas元素
var width=Img.width; //确保canvas的尺寸和图片一样
var height=Img.height;
canvas.width=width;
canvas.height=height;
canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
dataURL=canvas.toDataURL('image/png'); //转换图片为dataURL
console.log(dataURL)
};
}
getBase64('http://d.hiphotos.baidu.com/image/pic/item/d833c895d143ad4b3ae286d88e025aafa50f06de.jpg')