用javascript绘制图像

我试图在正在加载的图像上添加时间戳。因此，我现在有以下代码来执行此操作：

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.font = "40pt Calibri";
    context.fillText("My TEXT!", 20, 20);

    console.log(e.target.result);
    console.log(canvas.toDataURL("image/jpeg"));
    category.Pictures.push({offlineFoto: canvas.toDataURL("image/jpeg"), FileNameOnDevice: guid});
  };

    leftToProcess--;
    if (leftToProcess == 0) {
        $scope.loadingCat = false;
        $scope.loadingSubCat = false;
    }
    $scope.$apply();
};
reader.readAsDataURL(file);

当我检查

e.target.result

的console.log时，我得到了正确图像的base64，但当我检查

canvas.toDataURL（）的日志时，它包含相同的图像

我做错什么了吗？
当您设置画布的宽度或高度时，即使值相同，也会清空整个画布，您需要在绘制之前移动它们

还有其他一些会让你的文本不可见，你放置文本的位置的颜色，
基线，
，这些可能会让文本被写入但不可见


var-cv=document.getElementById（'cv'）；
var ctx=cv.getContext（'2d'）；
//帆布清理
cv.宽度=300；
cv高度=100；
ctx.fillRect（0，0，150，100）；//用黑色填充一半
ctx.font=“40pt Calibri”；
ctx.fillText（'1'，20，20）；//黑色字母，所以看不见
ctx.fillStyle=“红色”；
ctx.fillText（“2”，135，20）；//红色字母。所以有一部分被剪掉了。
ctx.textb基线=“顶部”；
ctx.fillText（'3'，135，20）；//红色上衣。全部在区域内。
当您设置画布的宽度或高度时，即使值相同，也会清空整个画布，您需要在绘制之前移动它们

还有其他一些会让你的文本不可见，你放置文本的位置的颜色，
基线，
，这些可能会让文本被写入但不可见


var-cv=document.getElementById（'cv'）；
var ctx=cv.getContext（'2d'）；
//帆布清理
cv.宽度=300；
cv高度=100；
ctx.fillRect（0，0，150，100）；//用黑色填充一半
ctx.font=“40pt Calibri”；
ctx.fillText（'1'，20，20）；//黑色字母，所以看不见
ctx.fillStyle=“红色”；
ctx.fillText（“2”，135，20）；//红色字母。所以有一部分被剪掉了。
ctx.textb基线=“顶部”；
ctx.fillText（'3'，135，20）；//红色上衣。全部在区域内。
canvas.width=this.widthcontext.fillText（“我的文本！”，20,20）之后的code>清除整个画布。
canvas.width=this.widthcontext.fillText（“我的文本！”，20,20）之后的code>
清除整个canvas.yes修复了黑色图像，但现在它包含了我的原始图像…而且
toDataURL
是完全黑色的，因为jpeg无法处理透明像素。清除的画布像素==完全透明像素==rgba（0,0,0,0）。这些图像通过jpeg转换为rgba（0,0,0255），因此它们最终完全为黑色。您可能还需要先指定
context.fillStyle
。@Kiwi是否将原始图像张贴在此处，以便我们可以看到在图像上绘制文本后的结果。您的fillStyle是答案：）是的，修复了黑色图像，但现在它包含了我的原始图像，
toDataURL
完全是黑色的，因为jpeg无法处理透明像素。清除的画布像素==完全透明像素==rgba（0,0,0,0）。这些图像通过jpeg转换为rgba（0,0,0255），因此它们最终完全为黑色。您可能还需要先指定
上下文。fillStyle
。@Kiwi是否将原始图像张贴在此处，以便我们可以看到在图像上绘制文本后的结果。您的fillStyle就是答案：）
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;
    // Move them before drawing anything.
    context.drawImage(imageObj, 0,0);
    context.font = "40pt Calibri";
    context.fillText("My TEXT!", 20, 20);
    console.log(e.target.result);
    console.log(canvas.toDataURL("image/jpeg"));
    category.Pictures.push({offlineFoto: canvas.toDataURL("image/jpeg"), FileNameOnDevice: guid});
  };

    leftToProcess--;
    if (leftToProcess == 0) {
        $scope.loadingCat = false;
        $scope.loadingSubCat = false;
    }
    $scope.$apply();
};
reader.readAsDataURL(file);