<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片转base64</title>
</head>
<body>
<script>
// 图片转base64
function imgToBase64(img) {
const canvas = document.createElement('canvas');
const { width, height } = img;
canvas.width = width;
canvas.height = height;
// 获取渲染上下文
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
return canvas.toDataURL('image/jpg');
}
/**
* 获取图片base64地址
* @param imgUrl:原始图片地址
* @returns {Promise<unknown>}
*/
function getBase64(imgUrl) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = imgUrl;
img.onload = function () {
const result = imgToBase64(img)
resolve(result)
}
img.onerror = function () {
reject('error')
}
})
}
getBase64('../image/1.jpg').then(res => {
console.log(res)
})
</script>
</body>
</html>
