<div id="signature" style="height:100%;"></div> <input id="clear" type="button" value="清除"> <input id="export" type="button" value="输出图片"> <input id="save" type="button" value="保存base64"> <div id="pic"></div> <p id="base" style="width:90%;"></p> <script type="text/javascript" charset="utf-8"> mui.plusReady(function() { plus.screen.lockOrientation('landscape-secondary'); }); $(document).ready(function() { $("#signature").jSignature() }); document.getElementById("clear").addEventListener('tap', function() { $("#signature").jSignature("reset"); $("#pic")[0].innerHTML = ''; }); document.getElementById("save").addEventListener('tap', function() { var datapair = $("#signature").jSignature("getData", "image"); var array = datapair.splice(","); mui.toast(array[1]); }); document.getElementById("export").addEventListener('tap', function() { var datapair = $("#signature").jSignature("getData", "image"); var i = new Image(); i.src = "data:" + datapair[0] + "," + datapair[1]; $(i).appendTo($("#pic")); }); </script>请帮我完善这个代码，把id="pic"输出的内容，提交到<textarea name="body" placeholder="留言内容"></textarea>里面，

你可以在 "export" 按钮的事件处理程序中，将图片的 base64 编码添加到 textarea 中，如下所示：

document.getElementById("export").addEventListener('tap', function() {
    var datapair = $("#signature").jSignature("getData", "image");
    var i = new Image();
    i.src = "data:" + datapair[0] + "," + datapair[1];
    $(i).appendTo($("#pic"));

    // 获取图片的 base64 编码
    var base64 = datapair[1];

    // 将 base64 编码添加到 textarea 中
    $("textarea[name='body']").val(base64);
});

这将把 id 为 "pic" 的 div 中的内容，转换成 base64 编码，并将其添加到名称为 "body" 的 textarea 中。

相关问题

<div style="float: left;width: 100%;height: 100%">改成居中

可以使用CSS样式来将该div居中。可以尝试以下代码：

<div style="text-align: center">
    <div style="float: left;width: 100%;height: 100%">内容</div>
</div>

或者：

<div style="display: flex; justify-content: center; align-items: center;">
    <div style="float: left;width: 100%;height: 100%">内容</div>
</div>

这样就可以将该div居中了。

<div style="height:50%;" id="roadMap"> </div> <div id="" style="height:50%; width:100%;"> </div>中间放个按钮让DIV可以上下折叠

您可以尝试使用 JavaScript 和 CSS 实现一个可折叠的 `DIV`。下面是一种可能的实现方式：

HTML 代码：

<div class="container">
  <button class="toggle-btn" onclick="toggleDiv()">折叠</button>
  <div class="content" id="roadMap">
    <!-- 这里是您想要放置的内容 -->
  </div>
</div>

CSS 代码：

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.toggle-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.content {
  height: 50%;
  overflow: hidden;
  transition: height 0.5s ease;
}

JavaScript 代码：

function toggleDiv() {
  var div = document.getElementById("roadMap");
  var btn = document.querySelector(".toggle-btn");
  if (div.style.height) {
    div.style.height = null;
    btn.innerHTML = "折叠";
  } else {
    div.style.height = "0";
    btn.innerHTML = "展开";
  }
}

这段代码将创建一个 `DIV`，其中包含一个按钮和一个具有初始高度的内容区域。当用户单击按钮时，JavaScript 函数将通过更改 `DIV` 的高度来切换内容区域的可见性。