React Native Canvas中使用toDataUrl - 荆棘小栈
132
开发
2021-10-05 17:33:27

最近在用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,加了一句

ts
img.crossOrigin = 'anonymous'

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

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

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

ts
const [{ localUri }] = await Asset.loadAsync(frameImages[frameIndex]); const frameBase64 = await FileSystem.readAsStringAsync(localUri!, { encoding: FileSystem.EncodingType.Base64 }); frame.src = `data:image/png;base64,${frameBase64}`;
React Native
canvas
编辑于: 2021-10-05 17:36:05
知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可

React Native Canvas中使用toDataUrl

132
开发
2021-10-05 17:33:27

最近在用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,加了一句

ts
img.crossOrigin = 'anonymous'

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

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

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

ts
const [{ localUri }] = await Asset.loadAsync(frameImages[frameIndex]); const frameBase64 = await FileSystem.readAsStringAsync(localUri!, { encoding: FileSystem.EncodingType.Base64 }); frame.src = `data:image/png;base64,${frameBase64}`;
React Native
canvas
编辑于: 2021-10-05 17:36:05
知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可