无法将 png 图像转换为 base64 编码的字符串

Question

下面这段代码应该将原始图像转换为base64字符串。

let base1="";
let base2="";
let base3="";
let base64String="";
var img=new Image();
var img1=new Image();
var img2=new Image();

img.src='Screenshot (1).png';
img1.src='Screenshot (2).png';
img2.src='Screenshot (3).png';

var reader = new FileReader();
reader.onload = function () {
    base64String = reader.result.replace("data:", "")
        .replace(/^.+,/, "");
}

reader.readAsDataURL(img);
base1=base64String;
reader.readAsDataURL(img1);
base2=base64String;
reader.readAsDataURL(img2);
base3=base64String;

但是当我执行代码时，我得到以下错误：

未捕获的类型错误：无法在“FileReader”上执行“readAsDataURL”： 参数 1 不是“Blob”类型。

这是为什么呢？请帮我解决这个问题。

Answer 1

因为 readAsDataURL 期望参数为 Blob。最好的方法是使用 canvas 转换为 base64 数据 url

let base1="";
let base2="";
let base3="";
let base64String="";
var img=new Image();
var img1=new Image();
var img2=new Image();
img.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    base1 = canvas.toDataURL();
}
img.src='Screenshot (1).png';
img1.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = img1.width;
    canvas.height = img1.height;
    ctx = canvas.getContext('2d');
    ctx.drawImage(img1, 0, 0);
    base2 = canvas.toDataURL();
}
img1.src='Screenshot (2).png';
img2.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = img2.width;
    canvas.height = img2.height;
    ctx = canvas.getContext('2d');
    ctx.drawImage(img2, 0, 0);
    base2 = canvas.toDataURL();
}
img2.src='Screenshot (3).png';

如果img src是jpg的话，不带参数的canvas.toDataURL()会生成一个png类型的数据url