将canvas转换为图片src的base64编码

Question

我希望将rawImg转换为base64并传递给image.src。我需要base64 dataURL来在我的画布上添加效果。 请看下面的代码：

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;


 }  

- R. C.

---

使用HTMLCanvasElement.toDataURL()。 - Rayon

@Kaiido，或者在filterCanvas的回调函数中，如果它是异步的... - Rayon

你好，非常感谢您的回复。我对画布不太熟悉。在哪里以及如何使用 .toDataURL() 将 rawImg 转换为 base64？ - R. C.

Answer 1

使用HTMLCanvasElement.toDataURL()方法，可以返回一个数据URI，其中包含按照类型参数指定格式呈现的图像（默认类型为image/png）。

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 imageURL = canvas.toDataURL();
    YOUR_IMAGE.src = imageURL; //Select `YOUR_IMAGE` using getElementById/querySelector/...
  }
  image.src = "flower.jpg";
}

- Rayon

---

@Kaiido，没错..已更新..你的观察力真是让人惊讶 ;) - Rayon

嗨，谢谢更新。我真的不知道如何使用DOM API来完成这个任务。我也不需要使用filereader。 - R. C.

@R.C.，你是在说话还是在问问题？ - Rayon

嗨 Rayon，抱歉造成困惑。我是在问如何使用 DOM API 来编写代码。 - R. C.

嗨，我仍然无法将image.src设置为base34。 - R. C.

Answer 2

使用HTML片段：

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

同时，将您的javascript代码更新如下：

  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";

您将在#result span元素中获得结果的base64字符串。请尝试一下。

- anusreemn