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

I cannot get Base64 string from a canvas

本文关键字：获取 Base64 字符串 布获取      更新时间：2023-09-26

我一直在尝试从画布上获取 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);

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

您还假设在图像 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";

Use appendChild（） cf.http：//jsfiddle.net/27hdp4y6/1/只需添加： 

...
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
...
  1. 首先，JS是异步的！因此，您的图像也将异步加载。

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

    document.body.appendChild(canvas);

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

相关文章：