手写签名不能上传的问题

Question

在网上参考了不少的例子，最后上手实践。

本应是手写好签名后，直接把生成的图片存入网络上的“qmpic”文件夹中，再把路径存入数据库中，最后显示在需要签名的位置。

遇到了两个问题：

1.生成了图片，使用a标签，在edge和华为浏览器中可以下载到手机、平板或电脑上，在电脑上QQ浏览器、firefox浏览器也可以下载，但在手机上的qq等浏览器上就不能下载了，显示失败。

function onLog() {
  const base64 = autograph.getBase64();
  if (!base64) return alert("当前签名为空，不可下载！");
  const label = document.createElement("a");/* 创建一个A标签*/
  label.href = base64;/*链接前面生成的图片文件*/
 
  filename="q-ming";/*另存的文件名*/
  label.setAttribute("download",filename);/*把这个图片下载下来*/
  label.click();/*执行点击事件*/
  label.remove();
}
/* 另存图片结束 */

2.把生成的图片上传到网络上的文件夹中，根本就不会写了。请教了一些网友，试了无数次，可能是我太笨，完全晕菜。

/* 将图片拟上传到数据库中。这个地方怎么写代码保存呢？前面已经生成了图片，请求朋友帮助。数据库为"edu_sup.mdb",表名fil_from，字段fData2。或者上传到文件夹中，比如文件夹路径为"../qmpic/",文件名为“q-ming.png” */
function xupLog() {
  const base64 = autograph.getBase64();
  if (!base64) return alert("当前签名为空，不可上传！");
  
}
/* 上传图片结束 */

能不能帮忙，解决我这个问题嘛？希望能加我，545236255

补充如下：

感谢各位朋友积极回答，真的没有想到，会有这么多热心的人。可惜，是我太菜，试了一圈，一个也没有实现。我是一个50多岁的人，代码会复制粘贴，要自己看明白，实在有些困难。谢谢大家的耐心，不妨再说得大白一点。
我把问题稍微修改了一下：如果是以数据流方式保存在数据库中，字段fData2是否要需两个字段，类型一个长文本，一个ole对象。
另外，整个网站主要是用asp代码写的。谢谢！

Answer 1

引自免费微信小程序：皆我百晓生

当然，我会尽力帮助您解决这两个问题。

问题1：图片下载兼容性问题

在不同的浏览器中实现 base64 图片的下载可能会存在兼容性差异。针对手机QQ等浏览器无法下载的问题，您可以尝试使用 Blob 对象和 URL.createObjectURL() 方法来创建一个临时的指向文件对象的 URL，这样可以提高兼容性：

function onLog() {
  const base64 = autograph.getBase64();
  if (!base64) return alert("当前签名为空，不可下载！");
  
  // 将base64转换为Blob对象
  const byteString = atob(base64.split(',')[1]);
  const mimeString = 'image/png'; // 根据实际情况调整图片类型
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([ab], { type: mimeString });

  // 创建下载链接
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = "q-ming.png"; // 设置下载的文件名
  document.body.appendChild(link); // 需要将链接添加到DOM中才能触发点击事件
  link.click();
  setTimeout(() => {
    URL.revokeObjectURL(link.href); // 释放内存
    document.body.removeChild(link);
  }, 0);
}

问题2：将图片上传至服务器或数据库

首先，你需要通过Ajax或者Fetch API将图片（Blob或Base64格式）发送到服务器端。以下是一个使用Fetch API的例子，假设服务器有一个接收POST请求并保存文件的API接口 /api/save_signature：

async function xupLog() {
  const base64 = autograph.getBase64();
  if (!base64) return alert("当前签名为空，不可上传！");
  
  // 将base64转为Blob对象（与问题1中的转换相同）
  const byteString = atob(base64.split(',')[1]);
  const mimeString = 'image/png';
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([ab], { type: mimeString });

  try {
    // 发送POST请求到服务器，包含FormData对象
    const formData = new FormData();
    formData.append('signature', blob, 'qming.png'); // 文件字段名及上传时的文件名

    // 发送请求，这里假设服务器返回JSON数据
    const response = await fetch('/api/save_signature', {
      method: 'POST',
      body: formData,
    });
    
    // 检查响应状态
    if (response.ok) {
      console.log('签名已成功上传到服务器');
      // 这里可以根据服务器返回的数据更新数据库表fil_from中的fData2字段
      // 假设你已经有了一个更新数据库的方法updateDatabase()
      // updateDatabase(response.data);
    } else {
      throw new Error(`上传失败，HTTP状态码：${response.status}`);
    }
  } catch (error) {
    console.error('上传签名时发生错误：', error);
    alert('签名上传失败，请稍后重试');
  }
}

请注意，上述代码仅展示了如何将图片以二进制形式发送到服务器，并假定服务器端已经做好了接收和处理此请求的逻辑，例如保存文件到指定路径（如 "..ypic/"），或将其内容存入数据库（如 "edu_sup.mdb" 的 "fil_from" 表的 "fData2" 字段）。具体的服务器端处理方式取决于您所使用的后端语言和技术栈。