求助：如何用Tauri的fs模块将Canvas数据保存为PNG/JPG？代码无效

问题原因与解决方法 #

核心问题是canvas.toDataURL()返回的是Base64编码的Data URL字符串，而Tauri的writeBinaryFile方法需要的是二进制数据（Uint8Array类型），直接传入Data URL会导致文件损坏无法正常打开。

1. 实现Data URL转二进制数据的工具函数 #

先剥离Data URL的前缀，再将Base64字符串解码为Uint8Array：

function dataUrlToUint8Array(dataUrl) {
  // 移除Data URL的前缀部分（如data:image/png;base64,）
  const base64Str = dataUrl.split(',')[1];
  // 解码Base64为二进制字符串
  const binaryStr = atob(base64Str);
  // 将二进制字符串转换为Uint8Array
  const uint8Arr = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Arr[i] = binaryStr.charCodeAt(i);
  }
  return uint8Arr;
}

2. 修改保存逻辑 #

调用writeBinaryFile时传入转换后的二进制数据，同时添加错误捕获：

async function IMAGE() {
  try {
    const dataUrl = canvas.toDataURL('image/png');
    const binaryData = dataUrlToUint8Array(dataUrl);
    await writeBinaryFile('avatar2.png', binaryData, { dir: BaseDirectory.Document });
    console.log("图片已成功保存到Documents目录");
  } catch (err) {
    console.error("保存失败：", err);
  }
}

完整修正代码 #

const { writeBinaryFile, BaseDirectory } = window.__TAURI__.fs;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制渐变矩形
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

// Data URL转二进制数据工具函数
function dataUrlToUint8Array(dataUrl) {
  const base64Str = dataUrl.split(',')[1];
  const binaryStr = atob(base64Str);
  const uint8Arr = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Arr[i] = binaryStr.charCodeAt(i);
  }
  return uint8Arr;
}

// 保存图片函数
async function IMAGE() {
  try {
    const dataUrl = canvas.toDataURL('image/png');
    const binaryData = dataUrlToUint8Array(dataUrl);
    await writeBinaryFile('avatar2.png', binaryData, { dir: BaseDirectory.Document });
    console.log("图片保存成功");
  } catch (err) {
    console.error("保存失败：", err);
  }
}

IMAGE();

额外检查项 #

• 确保tauri.conf.json中配置了正确的文件系统权限，允许写入Documents目录：

{
  "tauri": {
    "allowlist": {
      "fs": {
        "writeBinaryFile": true,
        "scope": ["$DOCUMENT/*"]
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者SiaVash Moghaddas