在Cordova-PhoneGap中将Konva画布保存为图片的方案求助

我之前在做Cordova项目结合Konva的时候，也踩过类似的保存画布的坑，试了好几个插件都卡壳在base64处理上，后来摸索出几个靠谱的解决办法，分享给你：

方案一：通过Blob写入（推荐，避开base64处理问题） #

很多插件直接处理base64容易出各种兼容问题，不如直接把Konva的画布数据转成Blob，再用Cordova的File插件写入设备，这个方法稳定性更高：

步骤1：将Konva舞台转为Blob #

先从Konva舞台获取DataURL，再转成Blob格式：

// 假设你已经创建了Konva舞台实例
const stage = new Konva.Stage({ container: 'container', width: 600, height: 400 });

// 导出舞台为DataURL，可指定图片格式和质量
const dataURL = stage.toDataURL({
  mimeType: 'image/png',
  quality: 0.9 // 0-1之间，数值越高质量越好
});

// 工具函数：把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});
}

// 得到最终可用的Blob对象
const canvasBlob = dataURLtoBlob(dataURL);

步骤2：用Cordova File插件写入存储 #

首先确保安装了File插件：

cordova plugin add cordova-plugin-file

然后写入文件到设备外部存储：

// 写入到外部存储根目录，文件名可自定义
window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(dir) {
  // 创建或获取目标文件（create: true表示不存在则创建）
  dir.getFile('my_konva_drawing.png', {create: true, exclusive: false}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      // 写入成功回调
      fileWriter.onwriteend = function() {
        alert(`画布已保存！路径：${fileEntry.fullPath}`);
      };
      // 写入失败回调
      fileWriter.onerror = function(error) {
        console.error('保存失败：', error);
        alert('保存画布出错，请重试');
      };
      // 写入Blob数据
      fileWriter.write(canvasBlob);
    }, function(error) {
      console.error('创建文件写入器失败：', error);
    });
  }, function(error) {
    console.error('获取文件对象失败：', error);
  });
}, function(error) {
  console.error('访问存储根目录失败：', error);
});

方案二：正确使用Canvas2Image插件 #

如果你还是想用Canvas2Image，核心是要传入Konva渲染的真实DOM Canvas元素，而不是直接传base64：

步骤1：获取Konva的底层Canvas #

Konva的舞台容器里会渲染出一个真实的canvas元素，我们需要获取它：

const konvaCanvas = stage.container().querySelector('canvas');

步骤2：调用Canvas2Image插件保存 #

确保已安装插件：

cordova plugin add cordova-plugin-canvas2image

然后调用保存方法：

window.canvas2ImagePlugin.saveImageDataToLibrary(
  function(successMsg) {
    console.log('保存成功：', successMsg);
    alert('画布已保存到相册！');
  },
  function(errorMsg) {
    console.error('保存失败：', errorMsg);
    alert('保存画布出错，请重试');
  },
  konvaCanvas // 必须传入真实的canvas元素，不是base64！
);

关键注意事项：权限配置 #

不管用哪种方案，都要确保Cordova配置了存储权限，否则会保存失败：
在config.xml中添加以下配置（针对Android）：

<platform name="android">
  <!-- 存储权限声明 -->
  <config-file parent="/manifest" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  </config-file>
  <!-- Android 10+ 兼容配置，避免存储权限问题 -->
  <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:requestLegacyExternalStorage="true" />
  </edit-config>
</platform>

如果是iOS，需要在config.xml中添加相册访问权限描述：

<platform name="ios">
  <config-file parent="NSPhotoLibraryAddUsageDescription" target="*-Info.plist">
    <string>需要访问相册以保存画布作品</string>
  </config-file>
</platform>

内容的提问来源于stack exchange，提问作者Ash A