将 dataURL 从变量转换为图像答案

【问题标题】：convert dataURL from variable into image将 dataURL 从变量转换为图像
【发布时间】：2018-09-22 15:38:24
【问题描述】：

我正在尝试将 dataURL 从全局变量（本地存储）转换为 png。

我是这样存储的：

var image = signaturePad.toDataURL("image/png");
member.questions.signature = image

现在我需要在表格中以缩略图的形式显示它。到目前为止，我一直使用这个存储来纯粹存储文本。我对如何将dataURL 转换为图像感到困惑。

这是我尝试过的（我对代码很陌生 - 道歉）：

$('#your-signature').html(member.questions.signature);

但它只是返回 dataURL - 请问我该如何重新格式化它？任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： jquery image variables todataurl

【解决方案1】：

您需要创建一个Image 元素并将您的dataUrl 分配为src 属性。然后只需使用 jQuery 的 .html 函数将该图像放置在您想要的任何位置。

因此，在您的情况下，代码应该类似于：

var imageEl = new Image;
imageEl.src = member.questions.signature; 
$('#your-signature').html(imageEl);

下面是一个示例代码：

var signaturePad = new SignaturePad($("#myCanvas").get(0));

$("#showAsImage").click(function() {
  // Get DataURL
  var dataUrl = signaturePad.toDataURL("image/png");
  
  // Create image
  var image = new Image;
  image.src = dataUrl;
  // Add image element to wrapper
  $("#imageWrapper").html(image);
});

canvas {
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

<canvas id="myCanvas" width="400" height="200"></canvas>
<br />
<button type="button" id="showAsImage">Show as image</button>

<div id="imageWrapper"></div>

【讨论】：