Javascript Blob上传已损坏

Question

所以我有这个代码修改图像文件，然后将其转换为新图像。

新图片（由canvas.toDataURL()表示）工作正常， 但转换为Blob会产生损坏的图像。

var reader = new FileReader();

reader.onload = function (e) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = e.target.result;
    imageObj.onload = function () {
        canvas.width = this.width;
        canvas.height = this.height;

        context.drawImage(imageObj, 0, 0);
        context.textAlign = 'right';
        context.fillStyle = "#FFF";
        context.font = "15pt Calibri";
        context.fillText(new Date().toLocaleString(), this.width - 30, this.height - 30);

        var blb = new Blob( [canvas.toDataURL()],  {type: 'image/jpeg', encoding: 'utf-8'});
        BuildingService.addFile({file: blb, filename: guid});
        category.Pictures.push({offlineFoto: canvas.toDataURL(), FileNameOnDevice: guid});
    };
};
reader.readAsDataURL(file);

图像也明显大于开始时的图像，启动次数= 858KB，转换= 2.107KB