画布到图像 src 上的 base64答案

【问题标题】：canvas to base64 on image src画布到图像 src 上的 base64
【发布时间】：2017-04-25 19:29:52
【问题描述】：

我想将 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;


 }

【问题讨论】：

使用HTMLCanvasElement.toDataURL()
@Kaiido，或者如果是异步的，在filterCanvas的回调中..
您好，非常感谢您的回复。我是画布新手。我应该在哪里以及如何使用 .toDataURL() 将 rawImg 转换为 base64？

标签： javascript html image canvas base64

【解决方案1】：

使用HTMLCanvasElement.toDataURL()，返回一个数据URI，其中包含由type参数指定的格式的图像表示（默认类型为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";
}

【讨论】：

@Kaiido, True..Updated.. Quiet 对你的观察能力感到惊讶；)
您好，感谢您的更新。我真的不知道如何为此使用 DOM api。我也不需要为此使用文件阅读器。
@R.C.，你是在说还是在问？
嗨，Rayon，很抱歉给您带来了困惑。我在问如何将 DOM api 用于代码。
嗨，我仍然无法将 image.src 设为 base34

【解决方案2】：

用 HTML sn-ps 为：

<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 字符串。请试试这个。

【讨论】：