Canvas签名导出PNG无法显示及服务器端存储技术求助

看起来你遇到的核心问题有两个：一是导出的PNG文件实际是HTML内容（这是因为页面上的a标签事件逻辑冲突，导致href没有被正确设置为Canvas的图片数据）；二是需要把签名上传到服务器留存。下面分步骤帮你解决：

1. 修复PNG导出异常问题 #

你当前的代码里修改了dataURL的MIME类型，其实没必要这么做——浏览器原生支持直接通过data:image/png类型的URL下载图片。另外，按钮和a标签都绑定了download函数，可能导致事件触发时href还没正确赋值就触发了下载，最终默认使用了当前页面的HTML内容作为下载文件。

修正后的下载逻辑可以简化成这样：

<div>Signature: <i class="fa fa-pencil" aria-hidden="true" onclick="Signature('jm38s4i1');"></i></div>
<button onclick="triggerDownload()">下载签名</button>
<canvas id="Sig-jm38s4i1" class="dig-sig " sig-id-data="jm38s4i1" signed-data="false" width="400" height="100"></canvas>

<script>
function triggerDownload() {
  const canvas = document.getElementById("Sig-jm38s4i1");
  // 直接获取Canvas的PNG格式dataURL
  const dataURL = canvas.toDataURL("image/png");
  
  // 创建临时a标签（避免和页面原有元素的事件冲突）
  const tempLink = document.createElement('a');
  tempLink.href = dataURL;
  tempLink.download = "签名图片.png";
  // 触发浏览器下载行为
  tempLink.click();
  // 下载完成后移除临时标签
  tempLink.remove();
}
</script>

这样修改后，导出的就是正常可查看的PNG图片了——通过临时创建a标签的方式，彻底避免了原有页面元素的事件干扰，确保href被正确设置为Canvas的图片数据。

2. 将签名图片上传到服务器端 #

要把图片上传到服务器，需要先把dataURL转换成Blob对象，再通过FormData发送到后端接口。下面是完整的上传逻辑示例：

function uploadSignature() {
  const canvas = document.getElementById("Sig-jm38s4i1");
  // 获取Canvas的dataURL并转换为Blob
  const dataURL = canvas.toDataURL("image/png");
  const blob = dataURLToBlob(dataURL);
  
  // 创建FormData对象，用于传递文件数据
  const formData = new FormData();
  // 添加文件：第一个参数是后端接收的字段名，第二个是Blob对象，第三个是文件名
  formData.append('signature', blob, '签名图片.png');
  
  // 用fetch发送POST请求到你的后端上传接口
  fetch('/your-server-upload-endpoint', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('上传失败，请重试');
    }
    return response.json();
  })
  .then(data => {
    console.log('签名上传成功！', data);
    // 这里可以添加上传成功后的逻辑，比如提示用户、更新页面状态等
  })
  .catch(error => {
    console.error('上传出错：', error);
    // 处理上传失败的情况，比如弹窗提示用户
  });
}

// 辅助函数：将dataURL转换为Blob对象
function dataURLToBlob(dataURL) {
  const arr = dataURL.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while(n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}

你只需要把/your-server-upload-endpoint替换成你实际的后端上传接口地址，后端需要对应处理multipart/form-data类型的请求，接收名为signature的文件并保存即可。

如果需要同时实现下载和上传功能，可以把两个逻辑合并到一个按钮事件里：

function handleSignatureAction() {
  // 先执行本地下载
  triggerDownload();
  // 再执行服务器上传
  uploadSignature();
}

内容的提问来源于stack exchange，提问作者73areo