IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    React Native Canvas 中使用 toDataUrl

    Jsun Dot LOL发表于 2021-10-05 00:00:00
    love 0

    最近在用 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}`;
    


沪ICP备19023445号-2号
友情链接