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");

在这里

上部画布->画布的类名。

现在，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 ==

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

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

将此代码的图像标签附加在正文的末尾，并且编码的URL也设置为图像标签的src。

但是图像未显示。它只返回空白图像。

并且我有一些在线base64编码为图像工具，该工具还返回了空白图像。

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

Answer 1

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

画布到图像base64编码的URL不会显示图像

1 个答案: