Javascript 画布到图像src上的base64

我想将rawImg转换为base64并将其传递到image.src。我需要base64数据URL在画布上显示效果。 请看下面我的代码：

function onLoad() {
    canvas = document.querySelector("#myCanvas");
    context = canvas.getContext("2d"); 

    var image = new Image();
    image.onload = function () {
      if (image.width != canvas.width)
        canvas.width = image.width;
      if (image.height != canvas.height)
        canvas.height = image.height;
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(image, 0, 0, canvas.width, canvas.height);
      filterCanvas(imageFilter);
    }

    var rawImg = "flower.jpg";
    imageURL = <-- (convert rawImg to base64.. I dont know what to write here)
    image.src = imageURL;


 }  

函数onLoad（）{
canvas=document.querySelector（“myCanvas”）；
context=canvas.getContext（“2d”）；
var image=新图像（）；
image.onload=函数（）{
if（image.width！=canvas.width）
canvas.width=image.width；
if（image.height！=canvas.height）
canvas.height=image.height；
clearRect（0，0，canvas.width，canvas.height）；
context.drawImage（图像，0，0，canvas.width，canvas.height）；
filterCanvas（图像过滤器）；
}
var rawImg=“flower.jpg”；
imageURL=
使用，返回一个数据
URI
，该数据包含类型参数指定格式的图像表示（默认类型为
image/png
）

函数onLoad（）{
canvas=document.querySelector（“myCanvas”）；
context=canvas.getContext（“2d”）；
var image=新图像（）；
image.onload=函数（）{
if（image.width！=canvas.width）
canvas.width=image.width；
if（image.height！=canvas.height）
canvas.height=image.height；
clearRect（0，0，canvas.width，canvas.height）；
context.drawImage（图像，0，0，canvas.width，canvas.height）；
filterCanvas（图像过滤器）；
var imageURL=canvas.toDataURL（）；
YOUR_IMAGE.src=imageURL；//使用getElementById/querySelector/选择'YOUR_IMAGE'。。。
}
image.src=“flower.jpg”；
}
，HTML代码片段如下：

<canvas id="myCanvas"></canvas>
<span>Resultant data URL: </span><span id="result"></span>

您将在
#result
span元素中获得结果base64字符串。请尝试此操作。
使用@kaido，或者更确切地说，如果是异步的，则在
filterCanvas的回调中。.您好，非常感谢您的回复。我是canvas新手。我应该在哪里以及如何使用.toDataURL（）要将rawImg转换为base64？@Kaido，True..Updated..Quiet惊讶于你的观察技能；）嗨，谢谢你的更新。我真的不知道如何使用DOM api来实现这一点。我也不需要使用filereader来实现这一点。@R.C.，你是说还是问？嗨，人造丝，很抱歉让人困惑。我是在问如何使用DOM api来实现代码。嗨，我还是我不能把image.src设为base34
  canvas = document.querySelector("#myCanvas");
  context = canvas.getContext("2d");
  var image = new Image();
  image.onload = function() {
    if (image.width != canvas.width)
      canvas.width = image.width;
    if (image.height != canvas.height)
      canvas.height = image.height;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
   // filterCanvas(imageFilter);
    var imageURL = canvas.toDataURL();
    alert(imageURL);
    document.querySelector("#result").innerHTML = imageURL;
  }
  image.src = "flower.jpg";