javascript - 无法重绘以 base64 表示的图像

标签 javascript base64

我的应用程序的第一部分使用文件选择器从我的文件系统加载图片并将图像绘制到 Canvas 上。我拿那个 Canvas 并将其转换为数据 URL,并将其保存在我的数据库中。

var imgData = canvas.toDataURL("image/jpg");
factory.saveData(imgData);                      // execute some java code

问题来了。我无法重绘该图像,我的 javascript:

var pic = new Image();
pic.onload = function() {
    ctx.drawImage(pic, 0, 0);                  // ctx = canvas.getContext("2d")
};
// This data url is copy/pasted from database for simplicity
pic.src = "data:image/png;base64,iVBOR..........ElFTkSuQmCC";

调用了 Onload 函数,但我只得到了透明图像。

最佳答案

可能与 getDataFromDatabase() 是异步的事实有关,因此您将 promise 对象返回给 pic.src 而不是数据 url。通过对 getDataFromDatabase 使用 then 调用并在 pic.src 上使用结果来解决此问题,如下所示:

var pic = new Image();
var pic.onload = function() {
    ctx.drawImage(pic, 0, 0);
};
getDataFromDatabase().then(dataUrl => {
    pic.src = dataUrl;
});

这是一个完整的实际例子。我绘制到 Canvas 上,将 Canvas 数据作为 base64 数据 url 存储到变量中,使用闭包将其保存到模拟数据库中,然后使用 promise 从模拟的异步函数调用中重新加载数据。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Initialize canvas to a random image
const imageUrl = 'https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf';
const initialImage = new Image();
initialImage.src = imageUrl;
initialImage.onload = function() {
  ctx.drawImage(initialImage, 0, 0);
}

// Convert canvas to base64 data url
const imageData = canvas.toDataURL('image/png');
const getDataFromDatabase = saveData(imageData);

// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Redraw the image
const pic = new Image();
getDataFromDatabase().then(data => {
  pic.src = data;
});
pic.onload = function() {
  ctx.drawImage(pic, 0, 0);
}

function saveData(image) {
  return function getDataFromDatabase() {
    return new Promise(resolve => {
      resolve(image);
    });
  }
}
<canvas id="myCanvas">
  
</canvas>


编辑:从哪里获取图像数据并不重要。如果数据没有畸形,它应该绘制到 Canvas 上。这是一个与您加载图像数据的方式相同的示例(来自硬编码数据 url):

const imageData = 'data:image/png;base64,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';

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
}
image.src = imageData;
<canvas id="myCanvas">
</canvas>

我建议您使用 base64 图像解码器检查您的图像数据,看看您的图像数据是否格式错误。如果您的数据网址有效,那么我可以建议的其他事情是确保您的 Canvas 宽度和高度等于或大于图像的宽度和高度,否则它将被隐藏(如果您提供的图像有空白空间/填充)。

关于javascript - 无法重绘以 base64 表示的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51014794/

相关文章:

javascript - 内联文本的CSS垂直突出显示

javascript - Electron app.on ("open-url") Windows 中自定义协议(protocol)的替代方案

javascript - 将所有具有特定属性和值的 CSS 选择器与 RegEx 匹配

javascript - 如何检查是否使用 JavaScript 选择了单选按钮?

javascript - 根据 base 64 内容确定图像类型

javascript - 在javascript中从base64创建SVG

javascript - 如何显示使用 AJAX 动态生成的隐藏元素?

python - 将 matplotlib png 转换为 base64 以便在 html 模板中查看

javascript - FileReader readAsDataURL 创建大型 base64 图像

c++ - 如何从文件中连续读取 N 个字节直到 EOF