画布到图像base64编码的url不显示图像[重复]

Question

我在显示 base64 编码图像时遇到问题。下面我会深入讲解。

HTML 代码：

<div class="canvas-container" style="width: 856px; height: 201px; position: relative; user-select: none;">
   <canvas class="upper-canvas img-responsive" width="856" height="201" style="position: absolute; width: 856px; height: 201px; left: 0px; top: 0px; touch-action: manipulation; user-select: none; cursor: default;"> 
   </canvas>
</div>

首先，我尝试将画布转换为图像。所以，我写了一个 javascript 代码来做到这一点。

代码：

var canvas1 = document.getElementsByClassName('upper-canvas');
dataUrl = canvas1[0].toDataURL("image/png");

这里，

upper-canvas -> 画布的类名。

现在，canvas1[0] 的数组中有画布详细信息。所以我尝试过 canvas1[0].toDataURL("image/png").

它还返回一个 base64 编码格式的 URL。

输出：

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAA1gAAADJCAYAAAA + TZPTAAANjUlEQVR4Xu3XMREAAAgDMerfNCZ + DAI65Fh + 5wgQIECAAAECBAgQIEAgEViyYoQAAQIECBAgQIAAAQIETmB5AgIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh + gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg + QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIB AJCCwIkgzBAgQIECAAAECBAgQEFh + gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg + QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh + gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg + QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAA BAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh + gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg + QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh + gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg + QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAE CBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh + gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg + QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh + gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg + QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQI ECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh + gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg + QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRwAO1FwDKS8SRKwAAAABJRU5ErkJggg == EM>

然后我创建了一个 img 标签并将这个 URL 添加为图像的 src，如下所示。

var imageFoo = new Image();
imageFoo.id = "testing-image";
document.body.appendChild(imageFoo);
imageFoo.src = dataUrl;

在正文末尾附加此代码图像标记后，编码后的 URL 也设置为图像标记的 src。

但是图片没有显示。它只返回空白图像。

我有一些在线 base64 编码到图像的工具，它也返回一个空白图像。

任何人，请帮助我诊断问题并为此提供一些最佳解决方案。

Answer 1

经过一番研究，我认为您的图像是绝对透明的，尺寸为 856x201。 我认为画布中的某些图层有问题，你只得到一个背景