朝圣言
扫描关注朝圣言

手机扫描二维码

关于在midwayjs下如何返回svg

朝圣言2021-09-14后端无忌 559 0A+A-

因为需要有些新用户没有上传头像的喜欢,但是我又不愿意使用默认头像,毕竟人都想差异化,于是借用了@nimiq/identicons(以下简称identicons)生成动态头像;

关于在midwayjs下如何返回svg  midway 坑 nodejs 处女作 第1张

但是框架是midwayjs,上下文ctx是egg的。

查询文档发现 可以通过 @ContentType 修饰器修改返回类型;

于是考虑返回的时候应该为base64编码,所以调用identicons的toDataUrl,返回,然后并不显示。

查询返回的数据发现,响应体直接修改如下,后面不接数据

data:image/svg+xml;base64,

尝试替换流,发现流编码可以顺利进入响应报文中,但依然不显示。

大胆猜测,设置了contentType后不必重新声明base64编码第一个逗号之前的东西,于是找了一个图标生成base64去掉逗号以前,发现

居然被编码了,返回内容如下

data:image/gif;base64,UjBsR09EbGhJQUFnQUxNQUFBQUFBUC8vLy8vL0FBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQ0g1QkFFQUFBSUFMQUFBQUFBZ0FDQUFRQVJvVU1oSnE3MVlnQkNBNTJEWUFWbHBhaHg1VXAvb3JYQnNiUzVHcXpKZTBaM3MvOENaVHVJcERsYzgwSkYzdkNSRHpWdlFsb294amNubWRNdnRlb0ZhN2diWGdvYWRvaFFXaXF5aHE2WW5mRGEzWWJIMDNoZWw5MHB6ZlJOTVBtVnBJMXQzZTRxTFhoRUFPdz09

目标内容如下

data:image/gif;base64,R0lGODlhIAAgALMAAAAAAP//////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAIALAAAAAAgACAAQARoUMhJq71YgBCA52DYAVlpahx5Up/orXBsbS5GqzJe0Z3s/8CZTuIpDlc80JF3vCRDzVvQlooxjcnmdMvteoFa7gbXgoadohQWiqyhq6YnfDa3YbH03hel90pzfRNMPmVpI1t3e4qLXhEAOw==

观察发现,自动将内容进行一次base64,所以相应的只需要把svg直接返回,而不需要手动base64后返回,完整代码如下


  @Get('/avatar')
  @ContentType('image/svg+xml')
  async avatar(@Query('text') text: string) {
    const Identicons = require('@nimiq/identicons').default;
    //toDataUrl是转base64,svg是svg数据
    const base64 = await Identicons.svg(text || uuid());
    this.ctx.body = base64;
  }


文章关键词
midway
nodejs
处女作
发表评论