React Native Canvas 中使用 toDataUrl

最近在用 React Native 写一个给头像加国旗的 App，主要是参加水个竞赛，详见
jsun969/chinese-flag-avatar-builder

因为涉及到了图像处理，React Native 并不能使用原生的 DOM，于是找到了这个项目
iddan/react-native-canvas

因为他的操作和原生 canvas 很相似所以就没写文档，导致用下来的感觉就是 别的库读文档，这个库读 Issues

我需要把操作完的 canvas 导出成 base64，首先想到了的是原生的canvas.toDataUrl()。
事与愿违，首先他这个调用是异步的，而且如果用的话会报一个The operation is insecure的错

既然你insecure，那八成是crossOrigin炸了，看了一下react-native-canvas#143，加了一句

img.crossOrigin = 'anonymous';

然后就遇到了另一个问题，图片不显示了

继续翻 Issue，找到了这么个 comment
react-native-canvas#77#821788006

最后用 expo 自带的转换器把图片转换成 base64，就显示了

const [{ localUri }] = await Asset.loadAsync(frameImages[frameIndex]);
const frameBase64 = await FileSystem.readAsStringAsync(localUri!, {
  encoding: FileSystem.EncodingType.Base64,
});
frame.src = `data:image/png;base64,${frameBase64}`;