记录生活中的点滴，分享、学习、创新
本地读取图片转base64
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" id="image"><br/>
<script>
var file = document.getElementById("image");
file.onchange = function () {
var reader = new FileReader();
//上传图片最大值(单位字节)（ 2 M = 2*1024*1024 = 2097152 B ）超过2M上传失败
var AllowImgFileSize = 2097152;
//将文件以Data URL形式读入页面
reader.readAsDataURL(file.files[0]);
reader.onload = function (e) {
// var imgUrlBase64 = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分
if (reader.result.length <= AllowImgFileSize) {
console.log(reader.result);
} else {
console.log('上传失败，请上传不大于2M的图片！');
}
};
};
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
网络图片转base64
function getBase64Image(url, width, height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
var image = new Image();
// 经测试，图片也需要后台设置允许跨域，才可以访问。光前端指定是无效的
image.crossOrigin = 'Anonymous';
image.src = url;
return new Promise(function (resolve, reject) {
image.onload = function () {
var canvas = document.createElement("canvas");
canvas.width = width ? width : image.width;
canvas.height = height ? height : image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
resolve(dataURL);
};
image.onerror = function () {
reject('图片加载失败');
};
});
}
var url = "https://pic4.zhimg.com/v2-37a81f23446cde74cc3f8053d0de86bf_r.jpg";
getBase64Image(url).then(function (response) {
var base64 = response;
var img = document.createElement('img');
img.src = base64;
document.body.appendChild(img);
console.log(response);
},function (error) {
console.log(error);
});