将图像绘制到大小同样的canvas上(大小不同转出来的会带有空白部分),然后使用canvas.toDataURL得到base64的字符串
function canvas2Base64(imgSrc) {
let img = new Image();
img.crossOrigin = "Anonymous"; // 执行一个跨域请求获取资源,但不可以携带cookie、证书或者 HTTP 基本验证信息
img.onload = function () {
const canvas = document.createElement("CANVAS");
const ctx = canvas.getContext("2d");
// 等同于img.width height
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
const dataURL = canvas.toDataURL();
console.log("canvas:", dataURL);
};
img.src = imgSrc;
}
canvas2Base64(imgSrc);
适用于上传图片,然后将图片的base64发送给后端的情况
function fileReader2Base64(el) {
const file = el.files[0];
const reader = new FileReader();
reader.onloadend = function () {
console.log("FileReader:", reader.result);
};
// readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE
// 并触发 loadend (en-US) 事件,同时 result 属性将包含一个data:URL 格式的字符串(base64 编码)以表示所读取文件的内容。
reader.readAsDataURL(file);
}
<input type="file" onchange="fileReader2Base64(this)" />