Question

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

我这样存储：

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

现在我需要将它作为缩略图显示在表格中。到目前为止，我已将此存储空间用于纯文本存储。我对如何将dataURL转换为图片感到困惑。

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

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

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

谢谢

Answer 1

您需要创建Image元素并将dataUrl指定为src属性。然后使用jQuery＆＃39; .html函数将图像放在任何地方。

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

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

以下是一个示例代码：

＆＃13;

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

＆＃13;

canvas {
  border: 1px solid grey;
}

＆＃13;

<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>

＆＃13;

将dataURL从变量转换为图像

1 个答案: