我无法从画布中获取 Base64 字符串

Question

我一直在尝试从画布中获取 Base64 字符串。但是我不能。 下面的代码什么都不做。它应该将图像插入到 document.body 中。另一方面，我尝试获取 base64 字符串并转换图像。但我又不能。

我该怎么办？

http://jsfiddle.net/27hdp4y6/1/

var image1 = new Image();
image1.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png";
var image2 = new Image();
image2.src = "http://prismitsolutions.com/images/icons/css3.png";

var canvas = document.createElement('canvas');
canvas.width = 220;
canvas.height= image1.height;
var context = canvas.getContext("2d");

image1.onload = function() {

   context.drawImage(image1, 0, 0); 
   context.drawImage(image2, 80, 0);      
};

var base64 = canvas.toDataURL('image/png');

var img = document.createElement('img');
img.src=base64;
document.body.appendChild(img);

//document.body.appendChild(canvas); 

Answer 1

您将获得一个空画布，因为您的代码不会等待图像正确加载。图片加载是异步的。

您还假设图像 1 完成后两个图像都已加载。

• 您需要等待两个图像加载
• 在绘制图像后，从内部加载处理程序（或调用另一个函数）调用toDataURL()。
• 您正在尝试从可能尚未加载的图像中设置画布的高度。在加载图像时设置它
• 您可能会在此处触发 CORS 限制，请确保图像与页面存在于同一服务器上或服务器允许跨域使用。否则，这将引发安全错误。

var image1 = new Image();
var image2 = new Image();
var count = 2;             // two images to load, for more use an array instead

image1.onload = image2.onload = function() {
  count--;
  if (!count) {
    var canvas = document.createElement('canvas');
    canvas.width = 220;
    canvas.height = image1.height;
    var context = canvas.getContext("2d");

    context.drawImage(image1, 0, 0);
    context.drawImage(image2, 80, 0);

    // the data-uri, use f.ex. a callback function with this as
    // argument to process it further (not shown here)
    var base64 = canvas.toDataURL('image/png');

    var img = document.createElement('img'); // ideally, use a handler here too
    img.src = base64;
    document.body.appendChild(img);
  }
};

// we need cross-origin in this case/demo as images exists on a different server
// imgur.com allow using cross-origin, not all servers do though...
image1.crossOrigin = image2.crossOrigin = "anonymous";

// set sources after handlers are defined
image2.src = "http://i.imgur.com/bk0rvnj.png";
image1.src = "http://i.imgur.com/wlPnCM1.png";

Answer 2

使用 appendChild() cf.http://jsfiddle.net/27hdp4y6/1/ 只需添加：

...
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
...

Answer 3

1. 首先，JS 是异步的！所以你的图片也会异步加载。

2. 你应该将画布附加到 DOM：

   document.body.appendChild(canvas);

工作示例：http://jsfiddle.net/27hdp4y6/2/