谷歌72版生成图片显示异常 about namedavatar HOT 10 CLOSED

我测试 chrome 72/73 for mac 都是正常的，请问是SVG图片不能显示了，还是显示的不太对？

from namedavatar.

是不能显示了，不知道是不是计算机环境问题？这里是win81/10下chrome72/73都有这个问题svg标签使用base64编码后加入就没有显示问题

from namedavatar.

我这边测试Windows chrome 72 和 firefox 56 不编码也可以正常显示，不过为了保险起见，我在下个版本会改成base64编码的，明天发布

from namedavatar.

hello, 新发布了一个版本1.0.1，会将图片data uri转base64显示了。
不过问题的原因我还是不太确定，你要是有空也可以帮忙分析下，谢谢啦

from namedavatar.

同样感谢你的开源，今天看了下Base64编码不编码与的区别，发现就是因为使用了十六进制颜色表示导致问题，我在chrome 63版测试发现没有问题，新版谷歌火狐测试出现问题。主要可能就是因为十六进制颜色表示其#被当做hash锚点处理，这浏览器就抛出了解析错误异常

from namedavatar.

太感谢你了，我稍后会修复这个点，编码特殊字符

from namedavatar.

嗯嗯，因为H5和小程序都有这方面的需求，小程序方面由于不能操作document会出现错误，这里简单地修改了下源码，主要是去除document操作，采用字符串拼接方式，希望这里下一版也能支持小程序，方便更多有类似需求的人

namedavatar.getDataURL:

const rect = `<rect fill="${this.getBackgroundColor()}" x="0" y="0" width="100%" height="100%"></rect>`
let text = ''
if (typeof this.name === 'string' && this.name.length > 0) {
  text = `<text fill="${this.getTextColor()}" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="${this.getFontSize()}" font-family="${this.getFontFamily()}">${this.name}</text>`
}
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${rect}${text}</svg>`

return `data:image;base64,${Base64.encodeToSafeURL(svg)}`

from namedavatar.

好的，谢谢你的建议，下一个版本会支持不使用DOM的方式

from namedavatar.

嗯嗯，因为H5和小程序都有这方面的需求，小程序方面由于不能操作document会出现错误，这里简单地修改了下源码，主要是去除document操作，采用字符串拼接方式，希望这里下一版也能支持小程序，方便更多有类似需求的人

namedavatar.getDataURL:

const rect = `<rect fill="${this.getBackgroundColor()}" x="0" y="0" width="100%" height="100%"></rect>`
let text = ''
if (typeof this.name === 'string' && this.name.length > 0) {
  text = `<text fill="${this.getTextColor()}" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="${this.getFontSize()}" font-family="${this.getFontFamily()}">${this.name}</text>`
}
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${rect}${text}</svg>`

return `data:image;base64,${Base64.encodeToSafeURL(svg)}`

hello，新发布了1.1.0版本，支持小程序等不支持DOM操作的平台，使用方法：

import namedavatar from 'namedavatar'

// 使用字符串拼接方式创建svg html文本
const svg = namedavatar.getSVGString('李连杰')

// 将html文本转为data uri资源
const uri = namedavatar.getDataURI(svg)

console.log(uri)
// data:image/svg+xml,%3Csvg%20...

from namedavatar.

谢谢你的更新

from namedavatar.